Retina対応のバナー画像｜2倍で書き出すべき場面と、容量を増やさない方法

Retinaは、Appleが高解像度のディスプレイにつけている呼び名です。こうした画面では、Webページの「1ピクセル」を、実際には2つ分や3つ分の細かい点で表示しています。この比率は「デバイスピクセル比」と呼ばれます（参考：MDN「Window: devicePixelRatio プロパティ」）。

そのため、表示サイズと同じ大きさで作った画像を高解像度の画面で見ると、引き伸ばされた状態になり、文字や線がぼやけて見えることがあります。

2倍画像とは、表示したい大きさの縦横2倍のピクセル数で作った画像です。たとえば300×250の枠に表示するバナーなら、600×500で作って、300×250の大きさで表示させます。高解像度の画面でも、細かい点まできれいに表示されます。

ただし、すべてを2倍にすればよいわけではありません。置く場所によって考え方が変わります。

置く場所	考え方
自社サイト	2倍で書き出すのがおすすめ。ただし容量が増えるので、圧縮や形式の工夫とセットで行う
広告媒体	媒体の推奨サイズに合わせる。Googleのレスポンシブ ディスプレイ広告（1200×628など）のように、もともと大きめのサイズが推奨されている媒体も多い
文字が多い	文字や細い線はぼやけが目立つので、2倍にする効果が大きい
写真だけ	写真は多少ぼやけても目立ちにくいので、容量とのバランスで決める

広告の推奨サイズはバナーのリサイズ（サイズ変更）のやり方で一覧にしています。