Retina対応画像の最適サイズまとめ

ウェブサイトの画像サイズは、色々と工夫のしがいがあります。

ただ単に綺麗な画像を表示するだけなら、大きな画像を貼り付けておけば問題ありません。
しかし、ファイルサイズが大きくなると、表示に時間がかかってしまいます。

一方で、特にスマホは画面が小さいのだから、小さい画像にしておけばサイズも小さくなるし、画質も問題ないだろうと考えても、そうとは限りません。
iPhone などの Retina ディスプレイでは、細かい表示を行うために、ディスプレイの論理解像度よりも解像度の大きなものが求められるからです。

そこで、どのようなサイズの画像を用意すればよいのか、考察してみました。

Retina を考慮する

iPhone などの Retina 端末できれいな画像を表示するには、Retina の倍数に応じた解像度の画像を用意する必要があります。

Retina の倍率は、2倍のものと 3倍のものがあります。
(Android 端末では 4倍のものもありますが、ここでは一旦無視します。)

その場合の、img タグの指定方法は下記のように 3種類の画像を srcset で指定し、アクセスしてきた端末ごとに最適な画像が表示されるようにします。

sample@2x.png や sample@3x.png の解像度(サイズ)は、sample.png の 2倍、3倍です。

Retina 対応のために 2倍、3倍のサイズの画像を用意する必要があります。

一方で、iPhone の横解像度は物理的に決まっています。
ウェブサイトで画像を表示する場合は、”max-width: 100%” を指定してブラウザの横幅(= デバイスの横幅)に合わせるのが一般的です。

それ以上のサイズを用意しても、縮小して表示されるので意味がありません。
つまり、Retina 対応しつつも、デバイスの横解像度を超えないサイズが最適なサイズとなります。

では、具体的には、どのような解像度の画像を用意すればよいのでしょうか。

ここでは、PC で表示したときのウェブサイトの最大幅を 1280px とします。

1x の場合は簡単で、オリジナルのサイズが 1280px を超える画像の場合は 1280px にリサイズします。
1280px 以下の画像は、オリジナルのサイズのまま表示できます。

2x の場合は、もっとも解像度が大きい iPhone XR の 828px が基準になります。
オリジナルのサイズが 828px を超える画像の場合は 828px にリサイズします。
828px 以下の画像は、オリジナルのサイズのまま表示できます。

3x の場合は、もっとも解像度が大きい iPhone XS Max の 1242px が基準になります。
オリジナルのサイズが 1242px を超える画像の場合は 1242px にリサイズします。
1242px 以下の画像は、オリジナルのサイズのまま表示できます。

まとめると、次のようになります。

結局、1x の PC 向けがもっとも大きくなりました。

そこで、画像の出し分けを Retina 倍率ではなく、横幅に変更します。

このようにすると、各デバイスで読み込まれるファイルは次のようになります。

機種	Retina	読み込まれるファイル
iPhone 6, iPhone 6s, iPhone 7, iPhone 8, iPhone XR	2x	img/sample-828w.png
iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8 Plus	3x	img/sample-1242w.png
iPhone X, iPhone XS	3x	img/sample-1242w.png
iPhone XS Max	3x	img/sample-1242w.png
PC	1x	img/original.png