今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト⁠）⁠」についてのお話をさせていただきます。

サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。

CSS Spritesとは？

通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。

それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。

このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありますが、YouTubeのプレーヤーやGoogleなど、大手サイトでもこのテクニックが使われるようになり、CSS Spritesの名前と共に注目を集めるようになりました[1]⁠。

CSSを工夫することで、サイトを高速化できる具体的な事例

まずは先日私の会社からリリースしましたTwister Alternativeの事例から、CSS Spritesの仕組みと使い方を解説します。

下の画像は、Twister Alternativeで利用しているCSS Sprites用の画像の一部です（解説用に画像の一部だけを表示しています⁠）⁠。

ご覧のとおり、ロゴやメニュー用アイコン・マウスオーバー時の画像やフォームのボタンまであらゆる画像をひとつにしています。

通常の画像指定を行った場合のソースコードサンプル

例えば、一つの（原寸）画像でロゴを表現する場合、以下2つの方法がよく使われてきました。

(X)HTMLのimg要素で指定

<div id="logo">
<a href="/"><img src="/images/logo.png" alt="Twister Alternative" /></a>
</div>

CSSのbackgroundプロパティで指定

<div id="logo"><a href="/"><span>Twister Alternative</span></a></div>

div#logo a {
    width: 222px; /*画像の横幅*/
    height: 66px; /*画像の高さ*/
    background-image: url(/images/list.png);
    background-repeat: no-repeat;
}

div#logo a span {
    display: none; /*テキストを消してa要素の背景だけを見えるようにする*/
}

CSS Spritesの場合のソースコードサンプル

<div id="logo"><a href="/"><span>Twister Alternative</span></a></div>

div#logo a {
    width: 222px; /*画像の横幅*/
    height: 66px; /*画像の高さ*/
    background-image: url(/images/sprite.png);
    background-repeat: no-repeat;
    background-position: 0 -34px; /* CSS Sprites用の画像のうち、どの場所の画像を出すのか座標 x軸、y軸の順に指定*/
}

仕組みはとてもシンプルです。一枚の画像のなかから、表示させたい部分の座標をbackground-positionプロパティで指定するだけです。

このサンプルのロゴ部分は、キャンバスの左上を基点としてx軸方向に0px、y軸方向に34pxずれた場所にあるので、background-positionの値は0 -34pxとなります。

このように、背景画像を指定したい要素に対して、ひとつひとつ座標を指定していきます。座標を正確に取得できるソフトであれば作業がやりやすいと思います[3]⁠。

※3

Fireworksは選択したビットマップアイテムの座標がすぐに把握できるのでおすすめです。

CSS Sprites化できない場合と制約

リピート用画像は別にする

リピートさせるための背景画像は、Sprites用の画像に統合せず別の画像に分ける必要があります。

Windows IE6に対応するための制約

CSS Sprites用の統合画像が、アルファチャンネルを持った透過画像となっている場合、そのままではWindows IE6で正しく表示できません。

IE6でもアルファチャンネル画像を表示するためのhtcファイルや独自拡張・javascriptライブラリなどがありますが、大きな画像の特定の部分だけを表示することができないため現実的ではありません。

IE6用の解決策

• 見た目に問題のない範囲内で色数を落とし、アルファチャンネルのない透過画像にする
• 高度な透過が必要のないデザインにする

体感速度の向上

Twister AlternativeにおいてCSS Spritesを利用する前と後では、数字だけでなく体感速度が格段に向上し、CSSと画像の工夫だけでこんなに速くなるのだなと驚きました。ぜひとも一度実践していただくことをおすすめします。

Firefoxの拡張「YSlow」を使うと、閲覧中のページで読み込まれているファイルサイズをグラフ表示できるので、どれだけ速くなっているか確認もできます。

もっと具体的なサンプル・問題点は私の会社のブログでもご紹介していますのであわせてご覧ください。