CSSスプライトとは、一枚の画像に幾つかのアイコンやイメージをまとめ
て、CSSで画像の位置を制御して、指定した画像を表示させる方法です。
画像の呼び出しは、キャッシュが残っていたりしない場合は、プリロード
するか表示する度にリクエストするので、回線やサイト閲覧に多少不可が
かかり、表示が遅くなったりします。
CSSスプライトで画像をなるべく一度の読み込みで完了させ、CSSで所定の
画像位置を指定させることで、画像読み込みの
画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプ
ライト用の画像を用意するにはちょっとした工夫が必要なので、ご利用は
計画的に行わねばなりません。
メリット
サイトの読み込みが速くなる
スライス設定が楽ちん
HTMLがすっきりする（imgフォルダもすっきりする）
デメリット
更新が面倒（サイズが変わった時とか増えた時とか）
スライスするまでにちょっとした工夫が必要
CSSがbackground-positionで溢れ返る
技術
画像置換と呼ばれるCSSの小技を応用しています。
画像置換とは「HTML要素の内容を非表示にする替わりに、backgroundプロ
パティで背景画像を表示させる」というもので、かなり以前から使われて
いた技です。
画像置換の方法は、いろいろやり方が公開されてるんですが、基本的には
「テキストを非表示にしたところに背景画像を忍ばせる」という事をしま
す。詳しくは後述します。
下記サイトではいろいろな画像置換が、年代別に紹介されてます。ちゃん
と名前もあるんですね。