CSSスプライトを使用してサイトの表示速度を改善する

はじめに

　デザイナーが作るデザインはますます手の込んだものになっていますが、その一方で、HTTPリクエストの数と使用される情報量を減らそうとする試みが継続的に行われています。本稿では、その手法の1つであるCSSスプライトについて、基本的な使用例を挙げながら説明していきます。

CSSスプライトの使用例

　リクエストの数と情報量の両方を減らすための1つの手法は、デザインの各所で使われているスタイリング画像（例えばコーナー画像、ライン画像、グラデーション、背景など）を結合することです。まず、図1に示すようなスタイリング画像の基本的な使用例から見てみましょう。

　この単純なボックスはスタイリング画像のよくある使用例ですが、リクエストの数はかなり多くなります。この例では、8枚の異なる画像が使用されています（各コーナーと各辺に対して1つずつ）。これらの8枚の画像を図2に示します。

　それぞれの画像がよく見えるよう背景を黄色にしています。これらの画像を結合して、いくつかのCSSスプライト画像にできます。ただし、結合を行う前に、まずCSSに注目し、CSSスプライトを使用するためにCSSをどのように変更するかを考える必要があります。次に示すのは、図1のボックスを作成するのに使用したCSSからの抜粋です。

　最初のCSSクラスTopは、ボックス上部の辺を描くためのものです。ここではheightパラメータとrepeat-xを使用することで、コーナーに合わせてライン画像を適切に配置し、ボックスの幅いっぱいにライン画像を繰り返しています。次のクラスTopLeftは、ボックスの左上コーナーの部分を描くためのもので、heightとwidthに固定値を指定しています。これらのクラスには他のステートメントも存在しますが、それらは画像の結合方法を決定する上で重要な意味を持ちません。基本的には、次に示すように画像を3つのカテゴリに分ける必要があります。

1. 幅と高さが固定の画像
2. X方向に繰り返す画像（水平ライン用）
3. Y方向に繰り返す画像（垂直ライン用）

　画像のカテゴリ分けが決まったところで、お好きなペイントソフトを使用して、8枚あった画像を結合し、3枚の画像にします。この結果、図3に示す3枚の画像ができます。

　これらの結合された3枚の画像を使用するために、CSSを修正することにします。これらの画像を使用するには、CSS内のbackgroundステートメントを次のような形式に修正する必要があります。

　背景画像の開始位置を決めるために、backgroundステートメントに-xパラメータと-yパラメータを追加して、左上隅の位置を指定します。ボックスの各コーナーで指定する4つの座標を次に示します。

• 左上コーナー: -0 -0
• 右上コーナー: -10 -0
• 左下コーナー: -0 -10
• 右下コーナー: -10 -10

　スプライト画像を扱うときの重要なポイントの1つは、間違いなく、使用する適切なオフセット量を決定することです。この情報に基づいて、3つのスプライト画像を使うように元のCSSを修正する必要があります。下のリストは、先ほど紹介したボックス上部の辺と左上コーナーを描画するためのクラスを書き直したものです。

　後は、残りのCSSクラスについても同様の書き換えを行い、各backgroundステートメントに、スプライト画像に対する適切なオフセット量を指定します。

まとめ

　CSSスプライトを使用したサンプルサイトができたので、実際にどのような改善がなされたのかをパフォーマンスの観点から確認してみましょう。以下に示すのは、変更前後の結果を示す簡単な表です。

表1：CSSスプライトによるパフォーマンスの差異

	画像の数	合計ファイルサイズ
個別の画像を使用した場合	8	7.24KB
CSSスプライトを使用した場合	3	2.97KB
改善効果	リクエスト数が5つ減少	4.27KB減少

　CSSスプライトを使用する場合のもう1つのメリットは、ブラウザでリソースが再利用されるため、サイトのより高速なレンダリングが可能になるということです。この四隅が丸い単純なボックスの例は、あくまで第一歩に過ぎません。CSSスプライトの使い方に工夫をこらし、前述の3つのカテゴリに基づいてできるだけ多くの画像を結合してみてください。図4は、CSSスプライトの可能性を追求してできた画像の一例です。合計13枚の小さな画像を結合して、1枚の3.07KBの画像にしています。この画像の中に、背景やボックス、メニュー、各種セパレータで使用するコーナー部分が含まれています。