iPhone4用に高解像度対応の画像でスマフォサイトを作る

一般的に、スマートフォンサイトでは横幅を320pxとしてデザインし、後にviewportでデバイス毎に横幅をフィットするように調整してサイトを構築します。

さて、iPhone4からディスプレイの解像度が2倍になったようです。
ここで何が問題かというと、これまで通り320pxでデザイン、構築した場合、解像度が倍になったiPhone4で閲覧してみると、画像が荒れて、または、ぼやけて表示されるという事です。つまり、iPhone4にとっては640pxが最適という事ですね。

iPhone4で画像があれるイメージ

解像度が倍になったことで画像があれるということは、

上の画像が、iPhone4だと下のように見えるということになります。

ほんとにこんなに荒れるの！？と思いますが。
実際にiPhone4は手元にないので、あくまでイメージです。。。このように見えていると思います。

iPhone4対策の画像埋め込み方法

倍の解像度でもきれいに画像を見せるために、実際よりも倍の大きさで画像を切り出し、50%の大きさでhtmlに埋め込むという方法があるようです。
つまり、100×100で埋め込むべき画像を200×200で切り出し、以下のように埋め込みます。

<img src="images/tentou_200x200.jpg" width="100" height="100" />

上記のファイル「tentou_200x200.jpg」は200×200の大きさですが、htmlで100×100で表示させています。
iPhone4だと画像が荒れる問題をクリアしてきれいに見えているはず。

CSSで背景指定する場合も考え方は同じです。

background-image: url(images/tentou_200x200.jpg);
background-size: 100px 100px;
-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;

CSS3に対応していれば「background-size」、iPhoneのために「-webkit-background-size」、古いAndroidのために「-moz-background-size」を指定します。

この手法の注意点

これまで説明してきたように、この手法はあくまで「iPhone4用」です。
他のデバイスにとってはメリットがなく、逆に画像サイズが大きくなることで、コンテンツの容量が多くなり、レスポンスが悪くなるといったデメリットが発生するかもしれません。

また、解像度については、最近ではAndroid端末で1.5倍の解像度をもったディスプレイのものも発売されているようです。今後、さまざまなデバイスが出る中で、一概にこの方法が最適とは言えない状況になるでしょう。

このようにiPhone4に対応するにあたり、デメリットも理解したうえで導入は慎重に検討したほうがいいと思います。

そろそろIE6などのブラウザ問題から解放されるかと思いきや、今度はデバイス問題に悩まされそうですね。。。