CSS Sprite

ボタンとか、角丸の枠で使うことが多いと思いますが、youtubeってほとんど一枚の画像なんですね。
DesignWalker：CSS Spriteを活用しよう

基本的に自分はGIFならGIFでひとまとめにすることが多いです。
スライスして、あとはwebsite-performanceさんにおまかせ。
日本語にも翻訳されてます。



spriteでも使えそうな画像達をzipに圧縮して、
透過色の設定とか出力画像の形式（GIF,PNG,JPG）を選択して簡単にsprite画像とcssを作成してくれます。
GIFボタン4こでやった場合の例↓

出来た画像はこんな感じです。


んで、はき出されたcssはこんな感じ

.sprite-navi_news { background-position: 0 -30px; }
.sprite-navi_home { background-position: 0 -142px; }
.sprite-navi_shop { background-position: 0 -254px; }
.sprite-navi_blog { background-position: 0 -366px; }

/*　以下ロールオーバー画像 */
.sprite-navi_news_ro { background-position: 0 -71px; }
.sprite-navi_home_ro { background-position: 0 -183px; }
.sprite-navi_shop_ro { background-position: 0 -295px; }
.sprite-navi_blog_ro { background-position: 0 -407px; }

backgroundルールの追加も忘れずに！

/*　これはサンプルです　*/
#menu ul li{
     background:url(img/hoge.gif) no-repeat left top;
}

今回は、ボタンだけで説明しましたが、ページ内のリピートされない画像はひとまとめに出来ると思います。

画像が多かったりすると、表示されなかったりすること多い世の中ですが、
spriteならHTTPリクエストの回数も減ってステキです。

自分の場合、デザイナーから『ここやっぱり変更！』っていうのもうないよね！？って確認して
最終的なデザインが通ったらspriteにしてUPしたりしてます。
spriteにしてデザイン変更あったらめんどいので。