
MacやiPhoneでウェブサイトを見ているときに、何か画像がぼやけている時がありませんか?
今回はそれを解決する方法をご紹介します。
Retinaディスプレイとは
Retinaディスプレイとは、Appleが開発したディスプレイの名称で、画面の解像度が非常に高いことが特徴です。
では、なぜRetinaディスプレイでは画像がぼやけてしまうのでしょうか。
それは、解像度が飛躍的に向上しているため、これまでのデバイスでは等倍で表示していたものをRetinaディスプレイでは2倍以上に引き伸ばして表示しているので、それが原因で画像がぼやけてみえてしまうのです。
解決策
画像がぼやけるのを解決するには、Retinaディスプレイ用にサイズの大きい画像を用意し、Retinaディスプレイでアクセスされた場合はそちらの画像を表示するようにします。
Retina.jsの利用
Retina.jsを利用することで、Retinaディスプレイでアクセスされた場合はRetinaディスプレイ用の画像を表示できるようになります。
画像自体はもとの画像の2倍のものと3倍のものを用意し、名前に「@2x」「@3x」という文字を付けておくことで判定されます。
まとめ
最近はどんどん高画質なディスプレイが登場しているので、写真や画像を前面に出すサイトの場合は必ず考えないといけない問題になってきました。