みなさま、こんにちは！
株式会社ホワイトボードのフロントエンジニアの末ちゃんこと、末吉です。

しとしと雨が降り続けていますね。。。今週はずっと雨予報のようです。

そしてつい先日iPhone7がリリースされました。
私は今回は個人的に入手は見送りますが、待ってました・・・とばかりに買われる方もいらっしゃるのではないでしょうか。

さてたまにiPhoneでネットサーフィン（死語？）をしていると、たまにぼやぼやした写真を見かけます。
これには実は画面解像度、とくにApple独自のRetinaという技術が邪魔していました。
ちょっとその辺について、作る人向けに簡単にまとめました。

画面解像度について

さて新しいスマホが開発されるたびにウェブエンジニアとして気になるのは画面解像度。
果たしてどのくらいの解像度なのか、そしてどのように設計すべきなのか・・・。
実に頭を悩ませる問題です。

なぜ各社企画を統一してくれないのか、実に疑問です。

iPhone7の画面解像度

iPhone7の画面解像度は幸いiPhone6と同じです。

iPhone7	iPhone7 Plus
1334×750	1920,1080

Retinaディスプレイ

ご存じRetinaディスプレイは通常のモニタとは違い、
合計4pxで1pxとして、曲線をよりキレイに描くことで画面がキレイに見えるようにする技術です。
しかしRetina用の画像を用意したり、画面設計をしたりしなければなりません。

ベース解像度について

さて、画面解像度は上記の表どおりなのですが実際にレンダリングされるのはRetinaディスプレイなので、もっと小さい解像度になります。

	iPhone7	iPhone7Plus
画面解像度	1334×750	1920×1080
ベース解像度	667×375	736×414

となっています。

表示される解像度はベース解像度なので、そちらに解像度にあわせて制作すればよいのです。
しかし、写真等をベース解像度で用意すると荒くみえてしまいます。
モニタの本当の解像度は、画面解像度で記した方だからです。
つまり、写真や画像は画面解像度のサイズで出力しておかねばなりません。

iPhone7ならば画面解像度の2倍のサイズを、iPhone7Plusならば3倍のサイズを用意する必要があります。

---

 

いかがでしたか、画像がぼやぼやするのはiPhoneでは実際の画面解像度とベース解像度との関係性が原因でした。
美しくはみえるのですが、ファイルサイズが誇大化するのが欠点です。
HTML5ではそれに対応したタグが存在しますが、まだ全部のブラウザが対応していないのが現場です。（pictureタグやsrcsetなど）
PictureタグはモバイルではiOS9.3以上でサポートしているので、iOS8ユーザーがほとんどいなくなったら使えるようになるかも知れません。

より美しい写真で、より早くサイトが届けられる時代が来るのを期待しつつ
また来週お会いしましょう！