《CSS Sprite》將佈景中多張圖片合併，提升網站效能

　　雖然說現在透過CSS3，可繪製出各式各樣的圖案，但還是免不了有些東西還是得透過圖片才能呈現出來，而為了有經驗的網頁設計師，都知道圖片能小盡量小，且將圖片製作成四方連續的方式來作延展，所以當每次將網頁的版型製作完成時，在images的資料夾中，就會有許多的圖檔，雖然說這些檔案都不大，因此當使用者向伺服請求檔案時，當讀取完畢就釋放了，但各位若平常有在拷貝檔案時，是否會發現到，當把一堆檔案壓成一個壓縮檔時，在傳輸上快許多，因此相同的道理，若將多張切好的圖片拼成一張雖然檔變大，但這樣只需對主機請求一次，相對的速度會快許多，而光想到要將已切好的小圖，再一一的用PS將檔案組成一大張時，是否會感到相當的麻煩，最近梅干發現一個好用的平台，可將多張圖片自動合併成一大張外，還會將每張圖片的位置，產生出CSS碼，讓使用者可快速套用，因此身為網頁設計的你，也趕快來看看囉!

---

CSS Sprite：

---

Step1
首先，將要合併的圖檔，全選並壓縮起來。

---

Step2
接著進到「CSS圖片合併產生器」的網站後，先點上方的語系，再點下方的選擇檔案鈕。

---

Step3
選擇剛所壓縮好的圖片檔。

---

Step4
接著再設定每個圖片的間距，以及合併後要輸出的檔案格式，和CSS輸出的前綴詞，當都設定後，再按下的合併鈕。

---

Step5
這時就會將合併好的圖片位置，產生出一連串的CSS碼，方便之後使用就不用位置算半天啦!另外別忘了也將合併好的圖片檔給下載回來喔!

---

Step6
當下載回來的圖檔，可看到全部的圖片已合併在一起了，且還是全透明的，是不是超方便的呀!