CSSスプライト(CSS Sprite)でサイトを高速化する方法

投稿者: | 2009年10月28日

CSS Sprite・CSSスプライトとは、ページに表示される全部の画像をひとつにまとめて一枚の画像にしておき、表示する際にその一枚の画像から必要な部分のみをCSSで切り出して使うテクニック。
簡単な例として、メニュー等で画像を使い、ロールオーバーによる画像変更をする場合、ひと昔前であれば、通常時とマウスオーバー時の画像をそれぞれ用意し、Javascriptでプリロード、同様にJavascriptで画像を差し替える。最近では、通常時とマウスオーバー時の画像を一枚にまとめておき、CSS・スタイルシートを使って画像位置を変える。といった方法がよく使われてきていたが、これをさらに全面的に使うのがCSSスプライト(CSS Sprite)と呼ばれる方法。

確かに、サーバーへのリクエストが減るため軽量化されることが多いが、画像の作成、CSSの設定が面倒なのも事実。
そういった場合には、Sprite Creatorを使うといい。
http://www.floweringmind.com/sprite-creator/
で公開されているこのサービスは、1枚の画像から特定の画像を取り出すCSSを作成するためのツールで、画像をアップロートして切り出したい画像部分を選択すると、それに対応したCSSが自動生成される。

さらに、既存の画像ファイルをCSS Sprite・CSSスプライト化したい場合には、画像をまとめてくれるCSS Sprite Generatorを使う。
http://ja.spritegen.website-performance.org/
使っている画像をまとめてzip圧縮してアップロードすると、1枚の画像にしてくれる上に、CSS SpriteのCSSも自動的に生成してくれる。様々な設定が可能で、クラス名につけるCSS接頭語も設定できるので、既存のサイトのCSSスプライトにも便利だろう。