提到CSS Sprites不得不說一下與之相似的Image Maps：
Image Maps
將一個頁面中所要引用的圖片整合成一個單一的圖片文件，按順序排好，再分切出裏面的鏈接區域。這樣對整個圖片羣的需求樣式沒有變，但減少了對圖片的http請求數。圖1-1顯示的是一個有五個圖片組成的導航欄，每個圖片對應一個獨立的超鏈接。我們常規的做法，當然就是做五個圖片，然後爲每個圖片做一個鏈接;但爲了更高效，我們把五張獨立的圖片做成一張image map，這樣從五個HTTP請求，就變成了一個HTTP請求，相應的響應時間也就會變的更快了。
您可以試一下下面的兩個鏈接，自己體會一下Image maps所帶來的速度上的不同。
No Image Map
http://stevesouders.com/hpws/imagemap-no.php
Image Map
http://stevesouders.com/hpws/imagemap.php
如果使用IE6在DSL(~900Kbps)的網絡環境下，用image map的方法組成的導航欄要比用單獨圖片文件的所組成的導航欄要快56%(354ms 比 799ms).這是因爲image map會減少四個HTTP請求。
Image Map最常用的實現方式是使用HTML的map標籤，把大圖片分成一個一個的小塊，並設置其不同的鏈接。如下：
<img usemap="#map1" border=0 src="http://7career.org/images/imagemap.gif">
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="http://7career.org/home.html" title="Home">
<area shape="rect" coords="36,0,66,31" href="http://7career.org/gifts.html" title="Gifts">
<area shape="rect" coords="71,0,101,31" href="http://7career.org/cart.html" title="Cart">
<area shape="rect" coords="106,0,136,31" href="http://7career.org/settings.html" title="Settings">
<area shape="rect" coords="141,0,171,31" href="http://7career.org/help.html" title="Help">
</map>
但是它所帶來的缺點就是你得手動確定圖片的座標，這會比較乏味和容易出錯，並且它只適合把圖片都組合在一個長方形的區域裏。
CSS Sprites （您可以參考YouTube和iGoogle的首頁，它們就是採用的這種優化方式）
與image maps類似，CSS Sprites也是把若干小圖片合成一個大圖片，但是CSS Sprites方式更靈活。爲了實現CSS Sprites，是把各個小圖片像組成一個棋盤一樣地合成一個圖片。如下圖： 然後通過HTML中任何能支持背景圖片的元素，如<span>或<div>，再通過CSS中的background- position屬性來定位要顯示的大圖片中的某個小圖片的位置。如下，就是要在上面給出的在圖片中使用"My"這個圖標來充當下面這個div的背景：
<div style="background-image: url('a_lot_of_sprites.gif');
background-position: -260px -90px;
width: 26px; height: 24px;">
</div>
我把前面我介紹image map的例子轉成CSS Sprites的形式：把導航欄的五個鏈接都放到一個名爲navbar的DIV中。每個鏈接都有一個SPAN元素，在#navbar的樣式中爲SPAN元素定義了背景圖片spritebg.gif，但每個SPAN都有一個不同的class以指明其具體顯示的背景圖片的偏移位置，正是利用了CSS中的 background-position屬性。
<style>
#navbar span {
width:31px;
height:31px;
display:inline;
float:left;
background-image:url(/images/spritebg.gif);
}
.home { background-position:0 0; margin-right:4px; margin-left: 4px;}
.gifts { background-position:-32px 0; margin-right:4px;}
.cart { background-position:-64px 0; margin-right:4px;}
.settings { background-position:-96px 0; margin-right:4px;}
.help { background-position:-128px 0; margin-right:0px;}
</style>
<div id="navbar" style="background-color: #F4F5EB; border: 2px ridge #333;
width:180px; height: 32px; padding: 4px 0 4px 0;">
<a href="javascript:alert('Home')"><span class="home"></span></a>
<a href="javascript:alert('Gifts')"><span class="gifts"></span></a>
<a href="javascript:alert('Cart')"><span class="cart"></span></a>
<a href="javascript:alert('Settings')"><span class="settings"></span></a>
<a href="javascript:alert('Help')"><span class="help"></span></a>
</div>
這比image map的方式的例子要更快：342ms VS 354ms，但是他們之間的實現方式只有很小的不同。但重要的是，這可比用單獨的五個圖片的例子要快57%了。
CSS Sprites
http://stevesouders.com/hpws/sprites.php
我們看到，image map的方式要求所有的圖片是連續的組合在一起的，而CSS Sprites沒有這個限制。關於CSS Sprites的優缺點在Dave Shea的權威文章"CSS Sprites: Image Slicing's Kiss of Death"中已經有詳細的介紹，但我已經從CSS Sprites中體會到它的優點：減少了HTTP請求，比image maps靈活。另一個讓我沒想到的優點是它減少了下載的數據量。大多數人可能會認爲一個拼合成的大圖片肯定要比這此小圖片的總量要大，因爲它會有一些小圖片的間隔區域。實際上正相反，大圖片減少了圖片中的color
tables和格式信息等，而使得大圖片比一堆小圖片實際size要小一些。
如果你的網站中有很多背景圖片，按鈕圖片，導航欄圖片，那麼你應該用CSS Sprites方式來優化你的頁面了。（您可以參考YouTube和iGoogle的首頁，它們就是採用的這種優化方式）
還有一個好玩的例子：
CSSplay網站上的一個
The streaker - just for fun動畫就是完美實例
http://www.cssplay.co.uk/menu/streaker