スマートフォンでWEBサイトを見る時に画像をぼやけさせない方法（Retinaディスプレイ対応）

WEBサイトをパソコンで見た時は綺麗に画像が表示されていたのに、Retinaディスプレイを採用しているスマートフォンで見ると画像がぼやけて鮮明に見えないことがあります。
どうしてRetinaディスプレイスで画像がぼやけるのか、またその対応を説明をいたします。

Retinaディスプレイとは

Retinaディスプレイとは高精細ディスプレイの名称で、高画素密度を保持した高画素ディスプレイのことで、2010年に発売されたiPhone4から搭載されました。
通常のディスプレは解像度を100～200dpiの設定ですが、Retinaディスプレイは約2倍になる高画素密度なディスプレイで、1つ1つのドットが細かく、より高品質な画像や映像を画面に映すことができます。

ほやける原因

結論は元画像が小さいたためRetinaディスプレイなどの高解像度ディスプレイではぼやけて見えてしまう。
通常のディスプレは画像は等倍で表示されますが、Retinaディスプレイは2倍のピクセルになるので画像の縦横が2倍に引き伸ばされて表示されてしまいます。
そのため、画像が小さいとぼやけて表示されてしまいます。
Retinaディスプレイの専門的な詳しい構造はここではしませんが、例えば横幅200pxの画像を綺麗に表示させるには、2倍の横幅400pxが必要になります。

Retinaディスプレイへの対応方法

画像（img）要素に直接指定する方法

表示させるたいサイズの倍サイズで画像を作成してHTMLでサイズを指定する方法になります。
100px×100pxの画像を表示させたい場合は200px×200pxの画像をサイズで作成します。

このまま表示させると当然、100px×100pxとは200px×200pxの画像で表示されます。

大きい方の画像のwidthとheightのサイズ指定を表示させたいサイズに変更します。
<img src=”倍のサイズの画像URL” width=”実際の半分の幅” height=”実際の半分の高さ”>
今回の場合は100px×100pxにします。

比較画像

100px×100pxの画像がぼやけています。

html5のsrcset属性を使う方法

先ほどは画像サイズを指定する方法でしたがsrcset属性を使うと画像サイズを指定しなくても表示サイズを1/2の大きさに縮小してくれます。
htmlに記述するには下記のコードになります。
<img src=”サイズの画像URL” srcset=”倍のサイズの画像URL 2x”>
このようにすることで、widthとheightを指定ぜずに、画像を1/2に縮小表示することができます。
読み込みの条件は画像パスの後ろにある「2x」が分岐条件になります。
「1x」だと通常
「2x」だとRetinaディスプレイ
「4x」だと4Kディスプレイ
などデバイスの大きさに合わせて読み込む画像を自動的に変えてくれます。

まとめ

Retinaディスプレイ対応として倍のサイズで作成と言いましたが、場合によっては縦横1.2～1.5倍でも綺麗に表示されることがあります。
近年のWEBサイトはページの表示スピードを速くする流れになっていますので大きい画像を作成する場合でも、読み込みスピードを少しでも上げるために容量に注意することも必要です。