1枚の画像を切り出すテクニックCSS Sprite、便利ツール登場

Webページに表示される画像をひとつの画像にまとめ、表示する際にCSSで切り出して使うテクニックがある。通称「CSS Sprite」と呼ばれるテクニックで、Ed Eliot氏およびStuart Colville氏が2007年9月28日(ドイツ時間)にCSS Sprite Generatorを公開してからとくに広がりを見せたテクニックだ。CSS Sprite Generatorは複数の画像を1枚の画像にするとともに、それぞれの画像にアクセスするためのCSSを生成する。CSS Spriteを実施するためのツールだ。

これと似ているが、逆に1枚の画像から特定の画像を取り出すCSSを作成するためのツールSprite Creator 1.0がChris Brainard氏から発表された。画像をアップロートしたら、あとはドラッグ&ドロップで切り出したい画像部分を選択すると、それに対応したCSSが生成される作りになっている。

CSS SpriteはWebページを高速化するためのツールとして広く認知されるようになった。たしかにHTTPリクエストが軽減されることによるパフォーマンスの向上が確認できる。