CSS Sprites圖片整合，加速網頁載入速度

今天在網路上看一些如何讓網頁加速的一些法則
突然想到前陣子在看一些關於jquery Mobile的書，提到了這個部分
說到CSS Sprites ，或許有些CSS排版的工具書有用到類似的概念，
只是我們用過了，卻不知道他是甚麼，
說實在當初知道這種圖片整合的概念的確有讓我驚艷了一下xd
心裡常會OS說，埃，早知道就這樣弄了

到底什麼是CSS Sprites呢?

根據wiki的解釋是說:

(透過google翻譯簡單的說是...)
為了減少瀏覽器對http請求的數量，一些網頁設計師結合了眾多的小圖片或圖標進入一個較大的圖像稱為一個sprite表或title set。[21] CSS被用來選擇複合圖像顯示部分在頁面的不同點。
如果一個頁面有10個1 KB的圖像，它們可以組合成一個10 KB的圖像，下載一個HTTP請求，然後用CSS定位，減少HTTP請求的數量，可以使網頁加載更快。

蛤  ? 所以呢，甚麼意思?  
是的，光看解釋好像有那麼一丁點的不是很了解，我舉個例子好了，比方說我前陣子在看的jquery mobile的書(我看書都不實作的，我只是看他怎麼做...)，我們都知道手機網頁的介面有好多種icon，比方說:

像這張圖呢，是從jquery mobile下載下來的zip檔的demo，他的demo很完整，就是一個完整的index.html檔，好~這個不重要，我們在使用手機頁面的時候，像照片裡面被我框起來的部分，都是屬於icon，由於手機會用到的icon大小都差不多，因此在研究jquery mobile時，你會發現會用到icon的圖片其實都是來自同一張，重點取決於它的定位點，

這時候就可以看一下網站跟目錄的images的資料夾:

這時候我們會就發現，真的所有的icon都是同一張圖，
檔案還有分black跟white
比如說 icons-18 -blcak.png這個檔案來說

這張圖包含18個icon，
因此在網頁上我們只需要匯入這張圖片，利用css去調整他的水平位置就可以了。

舉個寫法的例子: 
比方說現在有張圖叫做nav.png
他是一張選單的圖案，把四個選單的圖片整合成同一張圖
因此在 background 的設定上
除了指定背景圖片都是同一張nav.png之外， 後面還必須去指定他的位子
意思就是這樣。

#navigation li#home      {
  background: url(../images/nav.png) no-repeat 0 0;
}
#navigation li#about    {
  background: url(../images/nav.png) no-repeat -236px -43px;
}
#navigation li#works  {
  background: url(../images/nav.png) no-repeat 0 -86px;
}
#navigation li#contact {
  background: url(../images/nav.png) no-repeat 0 -129px;
}

結論:
CSS sprites以背景定位的方式來顯示
可以減少瀏覽器下載圖片的次數
大部分的瀏覽器可以支援。

缺點 :
製作費時，定位必須非常精準。

延伸連結 :
CSS sprites產生器   http://csssprites.com/