スマートフォン時代のWebサイト制作 第4回 画像の扱いと最適化
作成日
9 November 2011
ページ ツール |
必要条件
スマートフォン向けサイトでは、デスクトップに及ばないスペックや接続回線を考慮し、いかに「軽い、表示が速い」サイトを作るかが重要です。一方で、様々な画面解像度の端末があり、高解像度の画面を搭載した端末向けには、そのサイズに対応した大きな画像が必要となる場合もあります。画像の扱いひとつをとっても、「パフォーマンス」と「見栄え」の双方を考慮しなければいけない難しさがあります。そこで今回は、前回のサンプルサイトを元に、画像関係の扱いや最適化などを解説します。
適切な画像形式の選択と軽量化
スマートフォンブラウザーはPNGに対応しています。デスクトップブラウザーでPNGを使う場合、Internet Explorer 6などの古いブラウザーに気をつける必要がありますが、スマートフォンブラウザーの場合は気にする必要がありません。
PNGは圧縮率が高く、容量を抑えることができます。また、アルファチャンネル（透過機能）を持つので、半透明やアンチエイリアスの効いた透過が可能なため、GIFよりも表現力の高い透過表現が可能です。さらに、PNGにはPNG-8（8bit）とPNG-24/32（24/32bit）といった種類があり、GIFのように256色で対応できるものはPNG-8、それ以上であればフルカラーのPNG-24/32と使い分けることができます。なお、写真のような画像であれば、JPEGを採用する方が容量を抑えることができます。
少しでも画像の容量を抑えるためには、適切な画像形式を選ぶことが必要ですが、他にも次に紹介するようなサービスやツールを使うことで、さらに容量を抑えることができます。これらは再圧縮や画像の持つメタ情報など削除することで容量を削減しています。
| JPEGmini | JPEGの画像容量を削減するサービス。ある程度大きなサイズのものでなければ効果は小さい。 | |
| PunyPNG | PNGだけでなく、JPEGやGIFにも対応している。 | |
| ImageOptim | Mac用のローカルアプリケーション。こちらもPNG／JPEG／GIFに対応している。 | |
CSSスプライトで画像リクエスト数を抑える
パフォーマンスの最適化における重要なポイントとして「HTTPリクエストの数」があります。画像を含め、CSSやJavaScriptなどのファイルの読み込み数を減らすことで、ページの表示速度が変わります。これに関連したテクニックとして有名なのが「CSSスプライト」です。
CSSスプライトは複数の画像を1つの背景画像にまとめ、CSSによって表示したい画像を制御するテクニックです。それにより、通常は画像ファイルの数だけリクエストが発生しますが、1つにまとめることでリクエスト数を抑えることができます。CSSスプライトはGoogleやYouTubeといった大規模サイトで利用されていることで有名となりましたが、中小規模サイトでも利用する価値があります。
本記事のサンプルサイトでは、記事リストのナビゲーションの右矢印アイコンでCSSスプライトを利用しています。以下該当箇所のコードです。
※コードは解説に必要な部分だけを抜粋して掲載しています。コードの全体はサンプルデータをご覧ください。
article.html
<li>
<a href="smartphone_web_part1.html">
<p class="series">スマートフォン時代のWebサイト制作 第1回</p>
<p>スマートフォン対応の重要性とその方法</p>
<span class="icon"></span>
</a>
</li>
アイコンを表示させるための要素（<span class="icon"></span>）を置きます
style.css
.icon {
display: block;
width: 9px;
height: 14px;
background-image: url(../img/sprite.png);
background-position: -2px -2px;
}
表示領域（表示させたいアイコンの大きさ）をwidthとheightプロパティで指定し、該当するアイコン画像の箇所をbackground-positionで座標指定します
ここでもう1つ、アイコンの表示方法に関するテクニックを紹介します。このサンプルコードでは、表示させたい箇所に空のspan要素を置くようにしていますが、このような形であれば、CSSの擬似要素を使う方法もあります。
article.html
<li>
<a href="smartphone_web_part1.html">
<p class="series">スマートフォン時代のWebサイト制作 第1回</p>
<p>スマートフォン対応の重要性とその方法</p>
</a>
</li>
style.css
a:after {
display: block;
content: "";
width: 9px;
height: 14px;
background-image: url(../img/sprite.png);
background-position: -2px -2px;
}
擬似要素を利用する場合は、contentプロパティが必要となります。ここでは中身は不要であるため、空にしています
このようにafter擬似要素を使うと、先ほどのサンプルコードにあったspan要素と同じところに、擬似的に要素が挿入されるため、装飾用の要素をHTMLに直接記述する必要がありません。アイコンの配置場所や要素の構成によっては使えない場合もありますが、この例のようなよくあるリスト型のナビゲーションでは使えるテクニックです。
CSSスプライトに関する注意点もあります。例えばリクエスト数を減らすために、ページ内の全ての画像を1つにまとめてしまうと、そのCSSスプライト用画像そのものの容量が大きくなってしまい、読み込みの遅延や、その画像を読み込むのにメモリを多く消費してしまうかもしれません。そのため、単体では容量は小さいが数が多い、アイコンのような画像を適度にまとめると良いでしょう。
リクエスト数を減らす工夫はCSSスプライトだけではありません。画像そのものの利用を減らすために、CSS3を駆使したビジュアル表現を採用したり、またはData URIスキームを利用し、画像をバイナリデータではなくテキストデータに変換することでリクエストせずに画像を表示させるという方法もあります。これらについては今回解説しませんが、画像ひとつをとっても様々な工夫があるということを知っておきましょう。
※スマートフォン向けのパフォーマンス最適化対応については、著書（共著）の『スマートフォンサイト制作の教科書』にも一部まとめてあるので、こちらを参照ください。
高解像度画面向けの対応
画像の容量をいかに小さくするかという話から一転して、ここからは大きなサイズの画像を扱う話になります。前回のホームスクリーン用のアイコン指定のところでも少し触れましたが、iPhone 4（iPhone 4S）や、AndroidのGalaxyシリーズなどの主流端末では、旧端末よりも高解像度の画面を搭載しています。それぞれの端末における1インチあたりのピクセル数（PPI≒DPI）が、旧端末よりも約1.5～2倍多くなり、密度が高くなることで鮮やかさを実現しています。
また、ブラウザーやアプリなどのスクリーン上では、1ピクセルをデバイスにおける1.5～2.0ピクセルで描画するようになっているため、ビットマップ画像の表示において気を付けなければいけません。次の例は、実際に表示させたいサイズに対して等倍の画像と、縦横を2倍にした画像を読み込んだ場合の違いです。
左側はぼやけており、右側の方が鮮明なのがわかりますでしょうか。ぼやけている理由は、端末の解像度に基づき、iPhone 4／4Sなどでは縦横2倍、Androidの主流端末では縦横1.5倍ほどに画像が引き伸ばされているような状態になっているからです。そのため、それぞれの倍サイズの画像を用い、HTML／CSS上では等倍サイズで指定しなければ、画像を鮮やかに表示することができません。
少し難しい話かもしれませんが、やや乱暴にいってしまえば、現在の主流端末で写真などのビットマップ画像を鮮やか・きれいに画像を表示させるためには、実際に表示させたいサイズよりも、倍近いサイズのファイルを用意する必要があるということです。実際にサイトを作る上では、縦横2倍の画像を用意しておけば、1.5倍の端末にも対応することができます。
※ここで解説している「Androidの主流端末で1.5倍」という点は、端末やブラウザーによって異なります。またAndroid端末ではユーザーの設定で変更することも可能です。
ここまでの例ではimg要素などで読み込む画像のサイズを制御する説明でしたが、背景画像ではどうでしょうか。背景画像の場合は、CSS3のbackground-sizeプロパティを用います。サンプルサイトでは、先ほど解説したCSSスプライトの画像も大きなものを用意し、background-sizeプロパティで制御しています。
style.css
a:after {
background-image: url(../img/sprite_2x.png); /* 幅76px/縦68pxの画像 */
-webkit-background-size: 38px auto;
background-size: 38px auto; /* 1/2のサイズを指定 */
}
WebKitのベンダープレフィックスは古いWebKitブラウザー用に必要です
ここで1つ考えたいのは、高解像度ではない端末向けの対応です。それらの端末上では、高解像度向けの大きな画像は必要ありません。その場合の対応方法として、ここでは背景画像を対象に、メディアクエリーを利用した方法を解説します。具体的には次のようなコードです。
style.css
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2) {
a:after {
background-image: url(../img/sprite_2x.png);
-webkit-background-size: 38px auto;
background-size: 38px auto;
}
}
「device-pixel-ratio」を条件としてスタイルを読み込みます。いずれもベンダープレフィックスが必要ですが、-moz-（Gekko）のみ書き方が少し違う点に注意してください。また値について、-o-（Opera）の場合は、分数（比率）で記述する必要があるので注意してください
「device-pixel-ratio」は解像度の解説にあった、1ピクセルを何ピクセルで描画するかの値です。ここでは「device-pixel-ratioが1.5以上か」という条件で、高解像度向けの画像とスタイルを読み込ませるようにしています。
背景画像ではなく、img要素などの画像である場合にはJavaScript（window.devicePixelRatio）や、PHPなどを組み合わせて、読み込む画像を切り替える必要があります。スマートフォン専用のスクリプトではないですが、「Adaptive Images」のような、端末の解像度を判別して実行するスクリプトもその1つです。
これらの解像度の問題が影響するのは、ビットマップ形式の画像の場合です。SVGのようなベクター形式での描画・画像であれば、端末の解像度を問わず鮮明な表現が可能です。しかし、現在普及している多くのAndroid端末のデフォルトブラウザーのバージョンではSVGに対応していませんし、写真のような画像では代替に使うことはできません。
その他には、CSS3で表現できるものであれば、その場合も端末の解像度に依存することはありません。「あまり複雑ではないグラデーションにテキストがのっている」程度の画像であれば、CSSのみでの表現が可能でしょう。
高解像度対応とパフォーマンス対応のバランス
高解像度画面端末のために大きなサイズの画像を用意しなければいけない、というのは冒頭で解説した「いかにサイトを軽くするか」という話とは少し矛盾しているように思えるかもしれません。しかし前述の通り、等倍サイズのままの画像だと、ぼやけてしまうというのも一目瞭然です。この落とし所というのは非常に難しいです。
例えば今回のサンプルサイトにあるような、矢印のアイコン程度であれば、仮に等倍サイズで少しぼやけていても、利用者に対する影響というのはあまり無いかもしれません（まったく不鮮明で形が分からないというレベルでなければ）。しかし、ECサイトやブランドサイトなどで「写真」が重要となるようなコンテンツであれば、できるだけ鮮明で、魅力を感じるような画像にしなければいけません。その時には、画像の容量を極力削減できるようなサービスやツールを使う、Photoshopで色数をなるべく落とすような処理をするなどの対応が必要となります。また、画像処理以外のところでのパフォーマンス最適化をできるだけ対応しなければいけません。
このような細部までにこだわった対応は、企画・設計段階から考えておく必要がありますので、本連載の主な読者であろうHTML／CSSコーダーの方々だけでなく、デザイナーその他の方を含めて理解していく必要があるでしょう。
