Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法

Ratinaディスプレイとは

Ratina（英語で網膜という意味）はApple社の高精細ディスプレイの名称で、肉眼では判断できないほど細かな解像度のディスプレイのこと。液晶画面では無数の光が別々の色を発することで画像を表示している。
その光の数（ピクセル）が多いほど高解像度の画像や映像を表示することが可能。

Retinaディスプレイの仕組み

従来のブラウザで高解像を実現するには、画面のサイズを大きくする必要があった。しかし、Retinaディスプレイでは、通常の液晶画面の２倍のピクセル数を通常の画面サイズのまま表現することができる。

Retinaディスプレイがゆえの注意点

Retinaディスプレイは、一般のユーザにとって画像や映像が美しく表示され、良い点ばかりが目立ちますが、Web制作に携わる側にとってはいくつか注意が必要な点がある。

①ウェブサイトの画像がぼやけて見える

非Retinaディスプレイで普通に表示されていた画像が、Retinaディスプレイではぼやけて見えることがある。通常等倍で表示されていた画像が、2倍のピクセルを持つRetinaディスプレイでは画像の縦横が2倍に引き伸ばされて表示されることが原因。

②画面キャプチャ（スクリーンショット）が2倍のサイズになる

画面キャプチャを撮ると画像の縦横の長さが2倍になる。非Retinaディスプレイでキャプチャを撮る際は、見えているままのサイズで画像が書き出されますが、Retinaディスプレイで実寸が幅800pxの画像を表示し、キャプチャを撮ると幅が1600pxになる。ですのでキャプチャ画像をそのままのサイズで共有したり、アップロードする際にはリサイズが必要になる。

Retina対応のWebサイトを制作する際の対策

①倍のサイズの画像を半分のサイズで表示して対策する方法

対応策は至ってシンプルで、使用する画像を縦横2倍で作成し、ブラウザ上で半分のサイズに縮小。
ブラウザ上で幅200pxで表示したい画像があれば、実際は幅が400pxの画像を用意し、それを画面上で縦横半分のサイズで表示させる。倍の解像度のRetinaディスプレイでも画像を美しく表示させることが可能。

<img src="倍のサイズの画像URL" width="実際の半分の幅" height="実際の半分の高さ">

しかしながら、サイズの大きな画像を読み込むことで容量が大きくなることは否めない。

②srcset属性を使って対策する方法

容量が大きくなる問題を解消できて、ディスプレイに応じて異なる画像を表示できるsrcsetという属性を使う方法がある。画像ファイル名の後に半角スペースを空け、「srcset=”img/sample01.jpg 1x」のように倍率（1x）を指定する。その後にカンマ（,）でつなげて、複数の倍率毎に画像を指定する下記のような書き方。

<img src="img/sample01.jpg" srcset="img/sample01.jpg 1x,img/sample02.jpg 2x"
alt="sample image">

上記のように画像と画像が読み込まれる条件を指定することで、通常のディスプレイの場合はimg/sample01.jpg(通常サイズの画像)、Retinaディスプレイの場合はimg/sample02.jpg(縦横倍のサイズの画像)が表示される。通常のディスプレイの場合は「img/sample01.jpg」のみが読み込まれるので、サイズ毎に画像を指定しても不必要に重い画像が読み込まれることが無く、容量を軽減できる。