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