武林網(www.vevb.com)文章簡介：css sprites的利弊.
css sprites的利弊
關於這項技術，最大的好處有下面幾個：
1，減少網頁加載時的http請求數。這種情況貌似只適用於初次加載之類需要重新從服務器端獲取資源的情況。但無論怎樣，對於一個流量較大或者頻繁被重新加載的網頁，還是很有用的。
2，給鏈接做背景圖時，可以防止a:hover 時再載入背景圖片而導致的背景閃爍。個人覺得這一點在提升用戶體驗具有一定的意義。
3，圖片易於管理。前提是拼合的圖片有一定的規律。如下圖，就是一張網站全部使用的按鈕背景的圖片。這樣可以很直觀的看到網站中所有的按鈕樣式。 (我個人喜歡按照圖片的一定屬性來拼圖片，一張圖片都是icon或者都是btn背景…這樣就可以順便管理圖片，且有一定規律可循的圖片，比較容易排列在一起。當然，有些時候，也會選擇按照模塊來拼合一張圖片，這樣在模塊化的結構中，就產生了一個簡單的邏輯：調用一個模塊，則調用上面的背景圖。否則，這張圖片就不被調用。可以有效的防止只用了一個小小的圖標，就調用了整個大圖片的問題。)
css sprites 適用範圍：
1，需要通過降低http請求數完成網頁加速。
2，網頁中含有大量小圖標。或者，某些圖標通用性很強。
3，網頁中有需要預載的圖片。主要是a與a:hover背景圖這種關係的。如果a與a:hover的背景圖分別加載，那麼，就會出現用戶鼠標移到某個按鈕上，按鈕的背景突然消失再出來，產生閃爍，如果按鈕文字色與大背景相同或相近，就更囧了，有可能讓人產生按鈕消失了的錯覺。
需要滿足的條件
在網頁中，通過這項技術拼合在一起的圖片最好有一項規律。定寬或者定高。最好是寬高都能定下來。需要平舖的圖片，顯然不適合sprite。
如上圖的buttons，就屬於定寬定高的情況。
定寬情況下，則可平行排列若干小圖片。定高，則縱向排列小圖片。
若背景既不定寬，也不定高情況下強行使用css sprites技術，則容易產生不應該出現的圖片出現在頁面上的狀態。若是強行定高，也將非常不利於日後的維護。
總結
這項技術好與不好並不能一概而論的。要視網站的具體情況而定。分析時首先決定自己是否需要，還要綜合開發成本，維護成本等問題。找到一個適合實際情況的方案再做定奪。及時要用sprites，建議也不要極端的將各種尺寸，各種對齊方式，各種用途圖片放在一起去維護。這樣的極端或許不能再減少幾個http請求數，反而為日後的維護埋下隱患。