武林網(www.49028c.com)文章簡介：CSS sprites 是網站速度的優化很重要的一環，但也有其對性能的不利之處。

CSS sprites 是網站速度的優化很重要的一環，但也有其對性能的不利之處。

Vladimir Vukićević 的博文《To Sprite Or Not To Sprite》提到：

CSS sprites 的最大問題是內存占用。非精確構造的 sprite 圖片會占用意想不到的內存空間。以 WHIT TV 網站為例，這里是一張 sprite 圖片，1299x15,000 的png，已經經過很好的壓縮，實際下載大小只有26K左右，但是瀏覽器不會轉換壓縮的圖像數據。當圖片下載并解壓，將耗費75MB內存(1299 * 15000 * 4)。如果圖片沒有阿爾法透明，可能會減小到1299 * 15000 * 3，可往往還是犧牲了渲染速度。即便如此，我們占用了55MB內存。這張圖片絕大部分是空白的，什么都沒有，沒有什么有用的內容。僅僅因為這張圖片，當瀏覽器只加載WHIT 主頁時會增加75+MB內存。

Mozilla Web Development Blog 在《 Use Sprites Wisely》中總結道：

簡而言之，即使是很小的 sprite 圖片也有可能吃掉大量的系統內存 -- 每個頁面50M甚至100M或者更多。速度雖然至關重要，但要意識到 sprite 及其他 hacks 同樣會影響用戶體驗。

現在再回過頭看之前的《Yahoo與Gmail的CSS Sprites對比》，綜合性能方面 Gmail 無疑占了上風。當然，這些只是前端層面的優化，從根源上來看，設計師用最少的圖片來實現最優的效果才是王道。

正如雅虎女工程師 Nicole Sullivan 在 Velocity 2009 大會演講 PPT 《The Fast And The Fabulous》所提到的：

consistent design = clean code = fast site（一致的設計 = 更干凈的代碼 = 更快的網站）