iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方

WebデベロッパやWebデザイナにとって差し迫った課題のひとつに、WebサイトをどうやってiPhone 4に対応させるか、といったものがある。iPhone 4の画面解像度はiPhone 3GSの4倍。縦が2倍、横が2倍の解像度になっている。このため、スケーラブルなデータを表示させた場合、iPhone 4とiPhone 3GSでは表示されるデータの美しさに大きな違いが現れる。iPhone 4の表示は美しい。

しかし、PCやiPhone 3GS向けに用意した画像はiPhone 4では従来通りの見た目で表示される。サイズのバランスをとるために1x1ピクセルを2x2ピクセルに拡大して表示するためだ。これではiPhone 4のRetinaディスプレイの性能を活かすことはできない。iPhone 4に限らず、今後登場するであろうスマートフォンではこうしたHigh DPIの高解像度ディスプレイが搭載されることになるとみられる。デスクトップのスクリーンで開発していると気になりにくいが、こうしたHigh DPIディスプレイを搭載したデバイスでも美しく表示されるWebサイトを構築するテクニックは、今後のWebデベロッパ/Webデザイナテクニックで重要になってくるポイントだ。

Razor-sharp Images in Mobile Safari on iPhone 4 - SitePointにそういった場合に活用できるテクニックが紹介されている。効果的な対処方法として認知が広がりつつあるCSS3メディアクエリを活用する内容だが、基本の部分が丁寧に説明され、わかりやすサンプルが掲載されており参考になる。

まず、PCの一般的なDPIにもiPhone 4のDPIにも対応する画像を表示するもっともシンプルなテクニックは次のとおり。imgタグのsrc属性はCSSからは制御できないため、CSSから背景画像を使っているところがポイントとなる。

表示したいピクセルサイズに対して、それぞれ縦と横が2倍の画像を用意する。こうすればiPhone 4では最大限にRetinaディスプレイを活かした表示が実施され、PCではブラウザがリサイズした結果の画像が表示される。サイズを広げるのではなく縮小するため表示される画像は逆のケースのように汚くはならない。

ただしこの方法では、PCで本来のサイズの4倍の画像データがやりとりされることになるほか、リサイズに時間がかかることになる。ここでメディアクエリを次のように使うと、iPhone 4のSafariからアクセスした時には4倍サイズの画像の方が使われ、それ以外では従来の画像が使われるようになる。

Razor-sharp Images in Mobile Safari on iPhone 4で紹介されているこの方法は、メディアクエリを使ってiPhone 4向けとそれ以外のブラウザ向けの画像を提供する方法としてもっとも基本的なもののひとつ。ほかにもJavaScriptを使って処理を切り分ける方法や、画像のダウンロードが可能になるようにCSS背景画像とimg要素を組み合わせて利用するなど、いくつかのテクニックがある。High DPIのデバイスと現在PCで一般的なDPIのデバイスの双方に対してスケールするWebページを制作するテクニックはこれから注目度が上がる分野になるとみられる。