HTML5+CSS3 |
Smartphone編
|
Lesson 6 | スマートフォンサイトでの 画像の扱い方 |
||||
制作・文 | 山田 敬美(ネイバージャパン株式会社) |
スマートフォンサイトで使う画像を適切に扱うことによって、高解像度のディスプレイでもくっきりキレイに見えるようにし、さらに、3G 回線下でも高速に表示できるよう工夫しよう。 |
スマートフォンの
devicePixelRatioと解像度
Androidでは機種により異なるが、1.5倍のものが多い。
同じ画面サイズで表示できるピクセル数が増えたため、細かい文字もくっきりとして読みやすくなった。
しかし、コンテンツの1pxをデバイス上の1pxとしてそのまま表示すると、全体的に小さく表示されてしまうことになる。
そこで、WebKitをベースとしたブラウザには「devicePixelRatio」というプロパティが用意されている【1】。
devicePixelRatioとは、直訳すると「デバイスのピクセル比率」で、コンテンツの1pxを実際のデバイス上で何pxとして描画するかを示すものである。
【1】スマートフォンのdevicePixelRatioと解像度の一例
コンテンツの拡大による問題
デバイスフォントはスケーラブルなデータであるため、拡大してもキレイなままだ。
しかし、画像はビットマップデータであるため、拡大するとむりやり引き伸ばすことになり、画質が劣化してぼやけてしまう【2】。文字がくっきりとした分だけ、画像のぼけが余計に目立ってしまうのだ。
【2】元のサイズから強制的に2倍に拡大されるため、輪郭がもやっとしてしまう
Webページで画像を扱う方法
まずはbackground-imageの画像をくっきりさせる方法から紹介しよう。
はじめに「元のサイズ×devicePixelRatioの値」の大きさの画像をそれぞれ用意しておこう【3】。
元の画像サイズが縦横100pxの場合、Android用なら1.5倍の150px、iPhone4なら2倍の200pxとなる。
【3】左から、等倍、1.5倍、2倍の大きさの画像
各devicePixelRatioごとに
最適な画像を出し分けする
そこに、background-image のサイ ズを調整できる「background-size」プ ロパティを組み合わせて使うことで、各 devicePixelRatioごとに最適な画像を出 し分けできる【4】【5】。
【4】-webkit-device-pixel-ratio ではなく、-webkitmin-device-pixel-ratioとしているのは、今後1.5や2.0 以外の値のデバイスがでてきた場合への対処だ。
一つ目に「devicePixelRatio=1」としていないのは、devicePixelRatioに対応していないブラウザにもCSSを適用させるためである
【5】(左)2倍サイズを縮小表示。(右)等倍サイズをそのまま表示
devicePixelRatioが1.5以上の
画像サイズ
ただし、本来必要な画像サイズより大きなものを読み込むため、表示が重くなってしまうことを念頭に置いておこう。
【6】devicePixelRatio=1.5のデバイスの場合、本来のサイズよりも大きい画像を縮小することになるが、ぼやけることはない
img要素の画像を
くっきりさせる方法
HTMLに直接書かれたimg要素の場合は、CSSのようにdevicePixelRatioごとに処理を分けられないため、2倍の画像をsrcに指定し、widthとheightに半分の値を指定すればよい【7】【8】。
devicePixelRatio が2 未満のデバイス では、無駄に大きな画像をダウンロードすることになるが、極端にサイズの大きな画像や大量の画像を使わない限りは大きな問題にはならないだろう。
【7】test@2x.pngのサイズは、200px×200px
【8】(左)2倍サイズを縮小表示。(右)等倍サイズをそのまま表示
img要素の画像を
くっきりさせる方法
ただし、写真などはJPEGのほうが向いているので、画像の種類によって使い分けよう。
Webサービス「punypng」 | http://www.punypng.com/ |
Windows「PNGGauntlet」 | http://benhollis.net/software/pnggauntlet/ |
Mac「ImageOptim」 | http://imageoptim.pornel.net/ |