製作網頁時，除了版面風格設計會使用到影像圖片，其他如按鈕標題等...也都會使用代表圖示來襯托文字。不過，當頁面的影像圖示使用越多，使用者在瀏覽網頁時則需要花更多的時間在影像圖片的處理。現在有了CSS Sprites技術，可以將圖檔合併成一張大圖檔，使用時則利用定位屬性來顯示其位置。這樣的做法可有效降低圖片的http請求數，進而提升網頁頁面讀取的速度。

以yahoo為例，首頁的圖檔非常多，在讀取跟管理都會非常不易。所以利用CSS Sprites技術，把所有圖示合併(如連結圖)，可以有效的加快'讀取網頁圖片速度。連結yahoo css sprites圖示

CSS SPRITES GENERATOR使用教學

CSS Sprites Generator網站使用上非常簡單，圖示欄位最初只有三個，如果不夠的話可以點 "Need More »" （每次增加三個）將你的圖片加進去，在點 Generate。


上傳後，會出現合併完成的 PNG 檔以及範例頁面，下方則出現圖檔的 background-position的設定值。