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 以下の画像は、オリジナルのサイズのまま表示できます。

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

Retina ファイル名 最大横解像度
1x original.png 1280px
2x sample@2x.png 828px
3x sample@3x.png 1242px

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

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

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

実際に試してみました。

実際の運用では、1つの画像をリサイズして 3つのサイズを用意するのですが、ここでは、わかりやすくするために画像のサイズに合わせて画像の内容を変えています。

オリジナルの 1280px の画像 (original.png)

オリジナルの画像

横幅 1242px の画像 (sample-1242w.png)

横幅 1242px の画像

横幅 828px の画像 (sample-828w.png)

横幅 828px の画像

iPhone 8

iPhone 8で読み込まれる画像

iPhone 8 Plus

iPhone 8 Plusで読み込まれる画像

iPhone XS

iPhone XSで読み込まれる画像

iPhone XS Max

iPhone XS Maxで読み込まれる画像

PC

PCで読み込まれる画像

まとめ

Retina 対応を行いつつ、最小サイズの画像を表示するには、下記のコードを記述し、

次の 3種類のサイズの画像を用意しましょう。

  • 1280px
  • 1242px
  • 828px