頭ん中 それ間違ってないけど場合によってはちょっと違うかも、というお話。
「何をいまさら」という話かもしれないんだけど
ときどき「縦横2倍の画像を用意すればいいんだよね」というのを聞くので書いておきます。
何か気になる点があったら補足お願いします。
縦横2倍の解像度
iPhone や iPad に搭載されている「Retina ディスプレイ」は
以前の端末と比べて縦横2倍の解像度を持ってますね。
iPhone で言えば、3GS までが横方向320ピクセルだったのに対して
iPhone 4 以降は倍の640ピクセル。
縦方向も同様に2倍の解像度。
ただし以前の iPhone にあわせて横幅320ピクセルで設計されていたウェブサイトが
今は画面の半分で表示されるようになったということではなく、
画面上のサイズでは同じように表示されています。
CSS が表すピクセルとしては同じく幅320で、
デバイスとしてはその領域に幅640ピクセル分の解像度で表示できるということ。
要するに、デバイスの表示能力を存分に活かそうと思ったら
CSS で指定されるサイズに対して
縦横ともに2倍のサイズの画像を用意すればいいことになります。
面積でいえば4倍ですね。
ただこの解釈は間違ってないけどちょっと違うこともある。
デバイスピクセル比
CSS で表される1ピクセルが
表示機器では何ピクセルで表現されるかを表す数値は
「デバイスピクセル比」(device pixel ratio) と呼ばれているようです。
「比」と言うなら何と何の比かを表すべきであって
「デバイス/CSS ピクセル比」とでも呼んだ方がより丁寧な気はします。
けど、実際よく device pixcel ratio
という言葉が使われていて
JavaScript でも window.devicePixelRatio で取得できるやつなのでそのまま。
Retina ディスプレイを持つ iOS 端末では
デバイスピクセル比が2になっているということなんだけど、
この「2倍」というのはあくまで現状の iPhone 等についての話であって
全ての高解像度端末がそうなってるわけじゃない。
比率が異なる端末
例えば Nexus 5 のデバイスピクセル比は3です。
CSS で表される1ピクセルの中に、実際には3ピクセルが詰まってる。
具体的には、CSS 上の360×640ピクセルが
実際には1080×1920ピクセルで表示されます。
ということは、この画面の性能を最大限に活かそうと思ったら
上記の表現にならうと「縦横3倍の画像が必要」ということになりますね。
ということで「縦横2倍にしとけばいいんでしょ」は
現状の Retina ディスプレイへの対応について言えば間違ってないけど
それ以上の端末もあるから仕様を決めるときはそこも踏まえておかないとね、
というお話です。
iPhone も、次世代のやつはこのへん変わってくるんじゃないかな。
これまで受け継いでる横幅320ピクセルの倍数を守るなら
次は幅960ピクセルでデバイスピクセル比3とか
できるのかどうか知りませんけど1280で4とか。
実際どうするか
もちろん人間の目で認識できる解像度には限界があるから
無限に増えていったりはしないと思うんだけど
でも将来どうなっていくかはわかりませんね。
とはいえ、いずれ4倍や5倍になるかもしれないからといって
どうなってもいいよう今から万全の対応しておく、というのも現実には難しい。
用意できる画像の解像度も配置できるファイルのサイズも無限ではないし。
ということで結論ですけど、
どうせどうなるかはわからないんだし
日本に限って言えば iPhone ユーザーが多いんだから
まあとりあえず2倍にしとけばいいんじゃないかな。
