最佳化網站設計（三十）：最佳化CSS sprites

前言

網站設計的最佳化是一個很大的話題,有一些通用的原則,也有針對不同開發平台的一些建議。這方面的研究一直沒有停止過，我在不同的場合也分享過這樣的話題。

作為通用的原則，雅虎的工程師團隊曾經給出過35個最佳實務。這個列表請參考 Best Practices for Speeding Up Your Web Site  （http://developer.yahoo.com/performance/rules.html），同時，他們還發布了一個相應的測試載入器Yslow http://developer.yahoo.com/yslow/

我強烈推薦所有的網站開發人員都應該學習這些最佳實務，並結合自己的實際項目情況進行應用。 接下來的一段時間，我將結合ASP.NET這個開發平台，針對這些原則，通過一個系列文章的形式，做些講解和演繹，以協助大家更好地理解這些原則，並且更好地使用他們。

準備工作

為了跟隨我進行後續的學習，你需要準備如下的開發環境和工具

1. Google Chrome 或者firefox ，並且安裝 Yslow 這個向外延展群組件.請注意，這個組件是雅虎提供的，但目前沒有針對IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你應該對這些瀏覽器的開發人員工具有所瞭解，你可以通過按下F12鍵調出這個工具。
2. Visaul Studio 2010 SP1 或更高版本，推薦使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你需要對ASP.NET的開發基本流程和核心技術有相當的瞭解，本系列文章很難對基礎知識做普及。

本文要討論的話題

這一篇我和大家討論的是第三十條原則：Optimize CSS Sprites （最佳化CSS Sprites)。

CSS Sprite(由於很難做中文翻譯，所以保留英文）是這樣一種技術：

如果我們的多個頁面元素需要使用不同的圖片（例如作為背景）,常規的做法可以為每個元素定製一個CSS，每個CSS中通過background-image屬性來設定不同的圖片。這樣做是可以實現功能的，但會帶來的一個問題就是可能需要下載多個圖片。為了改善這一點，CSS的設計者考慮了一種新的做法：可以將這些圖片合并為一個大圖片，然後在CSS中不僅僅設定background-image屬性，同時還設定background-position屬性來決定要顯示的圖片地區。這樣一來，既實現同樣的效果，又減少了圖片下載的數量。

這個技術，在“最佳化網站設計（一）：減少請求數”這篇文章中，我已經提到過了。不過也要注意一下，這種技術可能會帶來一些額外的工作或者麻煩：

1. 手工地合并這些圖片，並要去測量相應的像素位置，是比較繁瑣的。不過，現在可以通過一些工具來協助簡化工作。

• http://spritegen.website-performance.org/
•  http://csssprites.com/

額外的維護工作。如果其中某個圖片修改了，不光要產生新的圖片，而且可能涉及到很多CSS的修改。

CSS Sprites一般只能使用到固定大小的盒子（box）裡，這樣才能夠遮擋住不應該看到的部分。

本文提到的幾個最佳化建議，主要如下

1. 儘可能地使用橫向組合圖片，這比縱向組合圖片通常體積更小一些。
2. 盡量使圖片具有接近的色系，這樣最終組合出來的圖片也會小一些。
3. 盡量使用小一些的圖片，並且圖片之間的間隙盡量也小一些，目的還是為了最終組合出來的圖片體積更小。

【備忘】就像上一篇文章提到的那樣，我對圖片並不特別在行，但這也有一個好處，我通常對於自己並不怎麼在行的內容，都會毫不猶豫地選擇遵從專業人士所提供的最佳實務和原則，例如上面提到的三條建議。