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 才能讓該圖示顯示出來。
補充 …
CSS Sprite Generator | Project Fondue - http://spritegen.website-performance.org/ （可用壓縮檔） 這是類似的網頁服務，可以用壓縮檔的形式上傳比較大量的圖片，就不另外做介紹。 免費資源網路社群（原文）：http://www.freegroup.org/2010/02/css-sprites-generator/
隨機文章
Category: 電腦不能沒有電 | Tags: CSS Sprites, 產生器, 線上工具 4 comments »
二月 19th, 2010 at 6:16 上午
這篇文章不錯所以幫你推一下 XD (咦
二月 19th, 2010 at 4:47 下午
真感動，我還以為這裡已經被遺忘了 (doh)
四月 24th, 2010 at 4:25 下午
我也覺得蠻不錯的一篇文章
四月 24th, 2010 at 6:52 下午
謝謝你的鼓勵 !!!!
話說還真是稀客啊 XD