CSSスプライトとは複数の画像を一つの画像にまとめて、CSSのbackgroundプロパティで画像のポジションを指定することにより任意の画像を表示させる手法。
CSSで呼び出す背景画像を少なくすることでサイトの表示を高速化することができる。サイトの規模や内容にもよるが大手サイトでは積極的に使われている。例えば以下のようなサイトも使われている。
上記サイトのようにいろいろなサービスやツールを備えたサイトには非常に便利な手法だが、一般的な企業サイトや商店サイトではそれほど思い切って使えないような気がする。実際、携わった案件では上記サイトのような数十個以上の画像を一つにまとめて使ったことはない。そしてCSSスプライトにはデメリットもあります。
- 背景画像のリピートさせることができない
- CSSでサイズを変えると画像も変えなければならない
（1）は、すでに画像がいくつも並んでいるためリピートさせるようなポジショニングが難しくなる。（2）はCSSで対象範囲のサイズを変える場合は画像も変えなければならなくなる。逆の場合も同様に画像を変える場合はCSSも書き直さなければならない。すなわち改修する時に手間がかかってしまう。
導入できる箇所はある
大手サイトのような使い方は出来なくとも、グローバルメニューの背景やボタンなどCSSでマウスオーバー画像を変化させたい時にはCSSスプライトは有効だ。それほど一つのファイルに画像を集約する必要もないので（ボタンなら大体2種類くらいで済むだろう）画像をリピートさせることも出来る。
私はWordPressでサイトを作る際、グローバルメニューとなる部分は絶対にカスタムメニューを使いたいひとなのでCSSスプライトは多用する。
是非、お試しあれ。
