みなさんお馴染みのYouTube

このYouTubeのプレーヤーに使われている画像は実は↓のような一枚の画像が用意されていて、スタイルでうまく表示されているようです。

画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそうです。

このテクニックをCSS Spriteって言うそうです。。（この手法自体は知ってましたが、CSS Spriteって呼ばれているのは知りませんでした…）

せっかくなので、本日はCSS Spriteをいろいろとまとめてみました。

1. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

一枚ずつ画像をスライスした場合と、CSS Spriteを使った場合の比較をされています。
サンプルのコードも公開されているので、わかりやすいですね。

一枚の画像をCSSのbackground-positionで表示してみると。

結果、HTTPリクエストは1回、トータルの画像サイズも7KBほど短縮されています。

2. Image Sprite Navigation With CSS

メニューのロールオーバーにCSS Spriteを使うのが一番分かりやすい例ですね。

↓のようにオーバーの画像もまとめて、一枚画像を用意して、hoverのbackground-positionを変更。

3. Advanced CSS Menu

WebDesignerWallさんのメニューもとってもきれいですね。ファイルもダウロードできるので便利です。

4. Dragon Interactive

jQueryとCSS Spriteを使った例。とってもきれいなメニューですね。

↓このような画像が用意されています。

5. JavaScript Sprite Animation Using jQuery

こちらもjQueryとCSS Spriteでページをパラパラとめくるような効果を出しています。

↓のような全ページの画像を一枚用意して。

↓のようなページをめくる時の画像と組み合わせています。

デモページはこちら

ページ右側をクリックすると次のページに、左側をクリックすると前のページにめくれたように見えますね～。

6. CSS Sprite Generator

もう既に画像スライスしちゃったよ～！って方にお勧めなのが、こちらのCSS Sprite Generator。スライスした画像をフォルダにまとめて、ZIPで圧縮して、このジェネレーターにアップロードすると、一枚の画像を作ってくれて、CSSも生成してくれる優れものです。

みなさんもCSS Spriteを活用してみてはいかがでしょう？