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

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

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

Retinaディスプレイとは

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

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

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

解決策

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

Retina.jsの利用

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

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

まとめ

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

三好 泰史

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

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

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

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

Tweet

Check