CSS Sprites 產生器，改造網頁以加快圖示載入速度

一般在做網頁時，都會加入許多圖示來讓整體網頁看起來更為活潑，不過你可能不知道，當一個頁面裡圖示越多，使用者就必須花更多時間來讀取這些零散的圖示，但透過CSS Sprites這項技術，可以幫你把所有圖示合併成一張大圖，在以CSS的定位方式來讓某圖示出現。

CSS Sprites Generator是一個幫你把圖片組合起來的網站工具，除了幫你組合起來之外，還會幫你算好位置並且顯示出來，讓你不必自己辛苦計算位置，因為CSS Sprites Generator會幫你搞定。

在介紹之前先來展示一個範例，讓大家瞭解這個功能到底是做什麼的，首先拿Yahoo!奇摩的網站來給大家看看背景圖。

▲ 圖中紅色框部分的圖示其實都是同一張圖片，當然不只這些…還有更多。

其實Google的首頁也有用CSS Sprite，只是數量上比較沒那麼明顯，使用CSS Sprite的目的是為了提升網頁頁面讀取的速度，可以有效降低圖片的HTTP請求數，尤其是你的網站有很多小圖示或圖片時，一張張上傳也很麻煩。

使用教學

CSS Sprites Generator的頁面大致上非常簡單易懂，最初會有三個，如果不夠可以點 "Need More »" （每次增加三個）將你的圖片加進去，在點 Generate。

上傳完成後，會出現合併完成的 PNG 檔以及範例頁面，下方也會有詳細的 CSS 設定教學，告訴你要設定多少的 background-position 才能讓該圖示顯示出來。