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

2014/09/03

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

CSS Sprite：

網站名稱：CSS Sprite
網站網址：http://spritegen.website-performance.org/

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