大きさが違う写真画像を同じ大きさで表示させています。(150k)HTML記述で、width、heightの指定なし。スマホ、タブレットなどはディスプレイの大きさで写真の表示サイズが変わります。px)で画質が違います。(62k)JPGは保存時の圧縮率を高くして容量少なくすると同時に画質も下がる。できるだけ圧縮率を下げてきれいに見せたいけど、データ容量はページのサクサク感を決めるので悩みどころです。(62k)データ容量で10倍の差がある写真の比較。サイズ普通・画質ほどほど。Proで確認しました。5と同じディスプレイです。touchからはどちらも同じでシャープに見える。360のほうは4倍に拡大した状態と同じということになる(ややこしい)。普通のディスプレイで見る限りはRetinaの描写は想像できなかったが、実際に比べて見てみると分かりやすい。Proで撮ったスクリーンショットをどうぞ。等倍で見ればさらに違いが分かるはずです。touchからはどちらも同じシャープに見える。普通のディスプレイでもほとんど差はない。Proでは両方ともボケていてディテールが感じられない。touchで2枚並べると差がわかる。上がシャープ、下は少しボケて見える。普通ディスプレイ/Macでは、たいして差はなし。データ容量が10倍も違うのに...。Proでは、差が歴然!データの大きさ(ピクセル数)が見た目の画質に与える影響がより大きいのが分かった。極端に圧縮率を変えれば違うだろうが、JPG圧縮率の差はあまり感じられない。Retina対策としては、必要な大きさを確保して、その後JPG圧縮率をどうするか判断していくのが良いかな。対策もっとも簡単確実かつ効果的なのは、表示サイズの4倍の大きさのデータ(縦横が2倍)にすること。720ピクセルのデータが必要になる。JPG圧縮率を多少あげても表示画質にはそれほど影響しなかったので、思い切って圧縮率をあげることで少しはデータ容量を節約できるかもしれない。欠点もあり、ディスプレイが小さい閲覧者は必要以上のデータ容量を受信しないといけない。「srcset属性」によって、ディスプレイサイズで読み込む画像を切り替えるという手段も考えられるが、現状ではほとんどのブラウザが対応していない。関連記事Retina/非Retinaへの画像の振り分け方法の実験SRCSET属性による写真画像の。