始めに
ニートから見習いエンジニアに転職して約１ヶ月。
HTML、CSSと格闘する毎日。
そんな中、スマホ用のサイトを構築する事になった時のお話。
3倍Retina！？
今回スマホ用のサイトを構築するに当たって、要件の一つにRetina対応があった。
Retinaについて調べてみると、3倍Retinaなる物の存在を知り、
どのように違うのか気になったので検証してみた。
そもそもRetinaとは
Retinaディスプレイ（英語：Retina Display）は、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」（レティナ）は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている[1]、ということから命名された。
”Retinaディスプレイ”『ウィキペディア (Wikipedia): フリー百科事典』
更新日時：2019年6月6日 (木) 07:11 URL: http://ja.wikipedia.org
ざっくりと説明すると、画像を描画する点の集まりが今までの倍！
より鮮明に綺麗に表示されるという事。
ここで疑問が…
通常のRetinaですら人の目で識別できる限界を超えるほど画素が細かいのに、
さらに画素の細かい3倍Retinaは必要なのか…？
他のエンジニア方もあまり気にしていなかったみたい…
実際にやってみた
今回は先輩のiPhoneXをお借りして検証。
等倍の画像、Retina対応の画像、3倍Retina対応の画像を並べて比較してみた。
See the Pen agOqoB by ShunyaTsukamoto (@ShunyaTsukamoto) on CodePen.
結果
等倍とRetinaの違いははっきりと確認できるが、
Retinaと3倍Retinaの違いはぱっと見では分からなかった。
強いて言うならば、Retinaと3倍Retinaを拡大、比較した際に、
光の加減が少し違うかもしれないという違いだけだった。
感想
個人的には今の所3倍Retinaは必要無いように感じた。
ただ、今後要件の上がる事があるかもしれないので
頭の片隅に置いておく事にする。