SuperRetinaディスプレイのiPhone

iPhone XR、XS、XS Maxが発表されました。
iPhoneのラインナップに今後これらが加わることにより、画面表示のバリエーションは下記の図のようになります。

ディスプレイサイズのバリエーションが、今までよりさらに増えることになります。

さて、この表をみてもわかるとおりディスプレイがSuper Retinaディスプレイの機種が増えてきました。
Retinaディスプレイを簡単に説明しますと、実際に液晶に表示されている2倍もしくは3倍の大きさの画像やテキストを1倍に圧縮することで綺麗に表示するというものです。
Retinaディスプレイが2倍の解像度、Super Retinaディスプレイが3倍の解像度を持つディスプレイです。

現在、多くのスマートフォン用ウェブサイトではRetinaディスプレイ用に2倍の解像度で書き出した画像を配置しています。
解像度が3倍のSuper Retinaディスプレイ登場によりウェブサイトの画像を3倍のものに置き換えなくてはならないようにも思いますが、実際はそうではありません。

iPhone XS Maxですとディスプレイ解像度は1242 × 2688pixelにもなり、この大きさの写真は圧縮してもたった1枚の画像で1MBもの容量になります。サイト全体の容量が多ければ読み込み速度が遅れ、検索結果の上位に表示されづらくなると共にユーザーへもストレスを与えてしまうことになり、現状では2倍の解像度の画像をそのまま使うのが一般的な対応になります。

とはいえ、製品やサービスなどの画像を美しく見せるのはウェブサイトの重要な役割のひとつです。特に美しく見せるべき画像にのみ、3倍の解像度の画像を用意してみるのも良いでしょう。

ランガレウェブのサイト制作