コラム

スマホやタブレットなど次々と進化していくこの頃、WEB上でとても綺麗な画像を見れるようになりました。
ですが、スマホやタブレットに採用されているRetina（レティーナ）ディスプレイで画像が荒いサイトを見ることも珍しくなく
表示速度の向上？画像処理にあまり気にしない？ガビガビの画像が今でもたくさんのホームページで使われています。
高解像度なRetinaディスプレイで画像が荒くなる理由を解説します

そもそもRetinaディスプレイって何？

Retina（英訳すると網膜）はAppleが開発した高解像度ディスプレイで、
その綿密な解像度は、肉眼では認識することまず不可能でしょう。
液晶画面では幾千の光が様々な色を発することで画像が表示されます。
その光のドット数が多さに比例して高解像度の画像が表示されます。

どのようにRetinaディスプレイの仕組みは？

では、どのように画像を美しく表示しているのか。
従来のブラウザで高解像を実現するには、画面のサイズを大きくする必要がありました。
しかし、Retinaディスプレイでは、通常の液晶画面の2～3倍のピクセル数を通常の画面サイズのまま表現することができます。
iPhone12で例えるとRetinaディスプレイは1200万画素ですので、光の点が画面の中に1200万個あるということです。
Retinaディスプレイ実装前のモデルと比べるとその差は一目瞭然です。
iPhone12のきめ細かな表示は1200万個の光により再現されているのです。

Retinaディスプレイがゆえの注意点

Retinaディスプレイは、一般のユーザーにとっては美しい映像が提供されるためプラスのイメージしかないと思いますが
WEB制作の仕事の観点からは注意が必要です。

□注意その1　ウェブサイトの画像がぼやけて見える

Retinaではないディスプレイできちんと表示されていた画像が、
Retinaディスプレイで見るとぼやけてガビガビに見えることがあります。
原因は通常の縦横比で表示されていた画像が、倍以上のピクセル数を持つRetinaディスプレイにより引き伸ばされて表示されているためです。

□注意その2　画面キャプチャ（スクリーンショット）が2～3倍のサイズになる

画面キャプチャを撮ると画像の縦横の長さが2～3倍になります。
非Retinaディスプレイでキャプチャを撮る際は、見えているままのサイズで画像が書き出されますが、
Retinaディスプレイで実寸が幅800pxの画像を表示し、キャプチャを撮ると幅が1600pxになります。
ですのでキャプチャ画像をそのままのサイズで共有したり、アップロードする際にはリサイズが必要になります。

Retinaディスプレイでデザインするときの設定方法

Retinaディスプレイでデザインするときは機種によって幅や倍率が異なるのでその都度計算が必要に
例えばiPhone12の場合は下記のような計算式になります。

端末の物理的な横幅×Retina対応比＝スマホ(端末)で表示される大きさ

【iPhone12の場合】
iPhone12：ディスプレイの大きさ（390×844）　Retina対応比（3）　スマートフォンで表示される大きさ（1170×2532）

390px(iPhone12の物理的な横幅)　×　3倍(Retina対応比)＝　1170px(iPhone12スマホで表示される大きさ)

上記の計算式に沿って導き出された大きさでアートボードを作成すると
Retina対応用のデザインが作成できます！iPhone12では横幅1170pxになります。

まとめ

Retinaディスプレイの仕組みや、画像がぼやける原因など、ご理解頂けましたでしょうか。
日進月歩で進化するこの業界ではその都度柔軟に対応することが重要です。
画像によっては2～3倍のサイズでなくてもきちんと表示されることもあるので、読み込みに時間がかかるようであれば、
倍率を小さめにして調整するのも良いかと思います。