網頁提速之：利用css sprites減少圖片請求

　　在高舉“用戶體驗”為中心的網絡時代，你是否因為打開網頁速度太慢而關閉網頁呢?相信很多人的答案都是肯定的。在高速的網絡時代，千萬不要挑戰廣東網民的耐心，不然只會導致網民遠離你的網站而去。

　　網頁提速有很多的方法，其中一條就是減少http請求。每一個網站都會用到圖片，當一個網站有10張單獨的圖片，就意味著在浏覽網站時會向服務器提出10次http請求來加載圖片。下面為大家介紹減少圖片請求的方法。

　　css sprites：網站前端開發者大多稱之為“css精靈”，通俗的理解就是：將多張小圖片合成為一張大圖片，減少http請求次數而達到網頁提速。下面以淘寶網為例子，為大家講解下css sprites是如何實現的。如我們要在網頁上顯示“今日淘寶活動”這個圖片。

　　代碼：

　　width：要定位圖片的寬度。height：要定位圖片的高度。(css sprites必須定義容器的大小，不然會顯示出錯)

　　background：url(sprites.gif)背景圖片的路徑。 no-repeat：背景不重復。 -133px：X坐標的位置 -153px：y坐標的位置。

　　可能有人會不明白這個-133px 和-153px是怎麼來的，這個坐標是小圖片在大圖片中的x坐標和y左邊坐標，如下圖，紅色點的坐標是在大圖上x坐標為133px y坐標為153px。(坐標也可以用百分比表示，如：50% 50%)有人會提出，為什麼坐標是正數，你卻寫成了負數呢?因為用background這種方式定義背景圖片，默認x y坐標是0 0。如下圖今日淘寶活動圖片的坐標是133px 153px，所以要用-133px -153px來歸零才能正確的顯示圖片。

　　css sprites的優點：可以減少http的請求數，如10張單獨的圖片就會發出10次的http請求，合成為一張的大圖片，只會發出一次的http請求，從而提高了網頁加載速度。

　　css sprites的缺點：凡事有利必有弊端。可能有人喜歡，有人不喜歡，因為每次圖片改動都要往這張圖片添加內容，圖片的坐標定位要很准確會，會稍顯繁瑣。坐標定位要固定為某個絕對值，因此會失去如center的一些靈活屬性。

　　css sprites有優點也有缺點。要不要使用，具體要看網頁以加載速度為主還是以維護方便容易為主。