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

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

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

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

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

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

詳細請見：http://l.yimg.com/f/i/tw/hp/spirit/sprite_icos_090507.png

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

使用教學

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

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

網站網址：http://csssprites.com/

補充 …

CSS Sprite Generator | Project Fondue - http://spritegen.website-performance.org/ （可用壓縮檔）
這是類似的網頁服務，可以用壓縮檔的形式上傳比較大量的圖片，就不另外做介紹。

相關文章：

• Strong Password Generator
• The Minifig Generator - 樂高人物線上產生器
• E-Mail Icon Generator - 將信箱改為圖片顯示，有效防止垃圾信攻擊。
• Password Bird - 用密碼鳥產生你的隨機密碼！
• Web20Generator - 線上產生符合 XHTML 標準語法的 Web2.0 網站！

---

如需閱讀本文章，請至 http://www.freegroup.org/ 或查詢免費資源網路社群原始文章（http://www.freegroup.org/2010/02/css-sprites-generator/）。
本文章僅供免費電子發佈使用，如需印刷許可，請提出申請。轉載時必須附上原文章連結，謝謝。

"