原文：CSS Sprites: Useful Technique, or Potential Nuisance?

譯文：CSS Sprites：魚翅還是三鹿？

無處不在的 CSS sptites － 為數不多的幾個可以直接跳過”流行”這個過程，而可以馬上并且牢牢地躋身于最佳 CSS 實踐之中的幾個技術之一。雖然它真正流行是在 A List Apart 解釋并認可這個技術之后，但是早在 2003 年 7 月份，Peter Stanicek 就已經開始談論它了。

目前大多數的開發人員對這個技術都有相當地掌握，也有很多關于它的教程和文章。幾乎所有的文章中都宣稱設計師和開發人員都應該使用 CSS sprite 來減少 HTTP 請求數，并且節省一些流量。這個技術被大量網站使用，包括使用了大型 sprite 的 Amazon .

但是這些被廣泛熱議的好處真的是值得的嗎？設計師們是否在沒有全面考慮到所有情況的情況下，在盲目地使用這個技術呢？設計師們是不是過于關注 CSS sprite 的流行，而忽略了其它應該仔細斟酌的因素了呢？ 這篇文章會討論下使用 CSS sprite 的好處和壞處，尤其關注”濫用” sprites 的情況，而且會解釋下為什么“濫用” sprite 其實是浪費時間。

瀏覽器緩存所有圖片

sprite 技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小于所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。但是這真的有想象的那么好嗎？

一般來說，瀏覽器會緩存所有的圖片 – 無論圖片 sprite 與否。sprite 技術只是在頁面第一次加載的時候才會節省帶寬，同時緩存也會對使用相同圖片的其他頁面有效。

Firefox 緩存顯示的瀏覽器緩存的來自 amazon.com 的圖片(在 Firefox 地址欄輸入 “about:cache” 來查看)。

考慮到現在的普遍網速已經比 2003-2004 年時提出這個技術的時候要快多了，因此大量使用 sprite 技術就不是那么必要了。有一點需要明確，不是說不應該用 sprite，而是不應該為了有限的好處來濫用這個技術。

拼合圖片的時間成本會增加

想象一下一個有三個狀態的圖片按鈕是怎么制作的：代表不同的狀態的圖片需要臨近放置在一起組成一張圖片。在使用 Photoshop 或其他軟件切圖時，不同的狀態并不會在一起；需要把他們單獨切出來再合并為一張圖片。

如果其中任一個圖片狀態需要改變，整個圖片就需要重新制作保存。對一些設計師來說這不是什么問題，也許他們會單獨保留不同按鈕狀態的源文件，這樣需要合并的時候就簡單了。但是這個過程有點復雜，遠沒有切出一個單獨圖片來的簡單。