Retinaディスプレイで画像がぼやける問題をJavaScriptで解決 - Retina.js –

Retinaディスプレイで画像がぼやける問題をJavaScriptで解決

MacやiPhoneでウェブサイトを見ているときに、何か画像がぼやけている時がありませんか?

今回はそれを解決する方法をご紹介します。

Retinaディスプレイとは

Retinaディスプレイとは、Appleが開発したディスプレイの名称で、画面の解像度が非常に高いことが特徴です。

では、なぜRetinaディスプレイでは画像がぼやけてしまうのでしょうか。

それは、解像度が飛躍的に向上しているため、これまでのデバイスでは等倍で表示していたものをRetinaディスプレイでは2倍以上に引き伸ばして表示しているので、それが原因で画像がぼやけてみえてしまうのです。

解決策

画像がぼやけるのを解決するには、Retinaディスプレイ用にサイズの大きい画像を用意し、Retinaディスプレイでアクセスされた場合はそちらの画像を表示するようにします。

Retina.jsの利用

Retina.jsを利用することで、Retinaディスプレイでアクセスされた場合はRetinaディスプレイ用の画像を表示できるようになります。

画像自体はもとの画像の2倍のものと3倍のものを用意し、名前に「@2x」「@3x」という文字を付けておくことで判定されます。

ソースコード情報

制作者

Axial

ダウンロードURL

Retina.js

まとめ

最近はどんどん高画質なディスプレイが登場しているので、写真や画像を前面に出すサイトの場合は必ず考えないといけない問題になってきました。

ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

  
大学卒業後、法律事務所にてシステム部の部長として、ホームページを活用してわずか数年で数人規模から数百人規模へと成長させ、その経験を元に、ECサイト制作会社にてディレクターとして小規模から大規模のディレクションを行う。
インターネットになれないWeb担当者や店舗オーナーの方にもインターネットの恩恵を受けられるようにしたいと思い、2015年にダブルドット合同会社を設立。

「デジタルデバイドなくす」をモットーに誰もがインターネットの恩恵を受けられる社会を目指して活動中。

趣味はロードバイクで、休日は晴れていれば基本的に走っています。

この記事が気に入ったら
いいね!しよう

Twitter で

Chatworkによるお問い合わせ・ご相談

ダブルドット合同会社ではChatwork(チャットワーク)というビジネスチャットツールを使ってのお問合せも受け付けております。
ご利用になる場合は弊社アカウントまでコンタクト申請をお願いいたいします。
もちろんお電話やフォームからのお問合せでも構いません。お好みの方をお使いください。対応速度はチャットワークの方が若干早いと思います。

SNSでもご購読できます。