このページは、Retinaディスプレイで見ないと何のことがよく分からないと思います……

２枚の写真を比較する

大きさが違う写真

大きさが違う写真画像を同じ大きさで表示させています。

HTML記述で、width、heightの指定なし。スマホ、タブレットなどはディスプレイの大きさで写真の表示サイズが変わります。最大表示サイズは 640 x 360px です。

JPGの圧縮率（画質）が違う

写真画像の大きさは同じ（640 x 360 px）で画質が違います。

JPGは保存時の圧縮率を高くして容量少なくすると同時に画質も下がる。できるだけ圧縮率を下げてきれいに見せたいけど、データ容量はページのサクサク感を決めるので悩みどころです。

データの差が極端なもの

データ容量で１０倍の差がある写真の比較。
サイズが大きく・画質良い vs サイズ普通・画質ほどほど。さて、見え方はどうだろう？

結果

Macで普通のディスプレイ（NEC MultiSync LCD2690WUXi2）と、RetinaディスプレイのiPod touch、MacBook Proで確認しました。iPod touchは iPhone 5と同じディスプレイです。

大きさが違う写真.の結果

iPod touchからはどちらも同じでシャープに見える。ただし、ピンチアウト（拡大）すれば1280 x 720が断然良し。

普通のディスプレイで見る限りでは２枚の差はまったくないが、MacBook Proでみると、640 x 360 のほうはボケボケになっている！！

Retinaでは見かけ上のサイズは 640 x 360だが、実際は 1280 x 720のデータとして表示させているので、640 x 360のほうは４倍に拡大した状態と同じということになる（ややこしい）。普通のディスプレイで見る限りはRetinaの描写は想像できなかったが、実際に比べて見てみると分かりやすい。

Retinaディスプレイで見られる環境でないかたは、上記写真をRetina/MacBook Proで撮ったスクリーンショットをどうぞ。等倍で見ればさらに違いが分かるはずです。

JPGの圧縮率が違う.写真の結果

iPod touchからはどちらも同じシャープに見える。

普通のディスプレイでもほとんど差はない。当初の想像では細かいところのディテールが違うと思ったが、普通のディスプレイではディテールが見える大きさではないらしい（もっと大きいサイズなら違いがわかるかもしれない）、MacBook Proでは両方ともボケていてディテールが感じられない。

データの差が極端なもの.の結果

iPod touchで２枚並べると差がわかる。上がシャープ、下は少しボケて見える。

普通ディスプレイ/Macでは、たいして差はなし。データ容量が１０倍も違うのに…。しかし、MacBook Proでは、差が歴然！

データの大きさ（ピクセル数）が見た目の画質に与える影響がより大きいのが分かった。極端に圧縮率を変えれば違うだろうが、JPG圧縮率の差はあまり感じられない。

Retina対策としては、必要な大きさを確保して、その後JPG圧縮率をどうするか判断していくのが良いかな。

対策

もっとも簡単確実かつ効果的なのは、表示サイズの４倍の大きさのデータ（縦横が２倍）にすること。

表示サイズが 640 x 360ピクセルなら、1280 x 720ピクセルのデータが必要になる。JPG圧縮率を多少あげても表示画質にはそれほど影響しなかったので、思い切って圧縮率をあげることで少しはデータ容量を節約できるかもしれない。

ただ欠点もあり、ディスプレイが小さい閲覧者は必要以上のデータ容量を受信しないといけない。「srcset属性」によって、ディスプレイサイズで読み込む画像を切り替えるという手段も考えられるが、現状ではほとんどのブラウザが対応していない。