CSS Sprites（CSS精靈）的應用

　　加速的關鍵，不是降低重量，而是減少個數。如果重量在200K以內，只要網路不是特別慢，效率都差不多。但是，如果圖片個數多一倍，效率將明顯低一個檔次。

　　傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，電腦統一都按Byte計算。用戶端每顯示一張圖片都會向伺服器發送請求，所以，圖片越多請求次數越多，造成延遲的可能性也就越大。因為一張圖片的傳輸時間，通常遠小於請求等待的時間。

減少圖片的三個技巧(CSS Sprite)：

1. 圖片限制(Image Slicing)

典型如文字編輯器，小表徵圖特別多，開啟時一張張跑出來，給使用者的感覺很不好。如果用一張圖解決，則不會有這個問題，比如百度空間、163部落格、Gmail都是這麼做的。

Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites

2. 單圖轉滾(Single-image Rollovers)

觸發切換圖片的需求，傳統方案得重新請求新圖片，因為網路問題經常造成停留或等待。如果把多種狀態合并成一張圖，就能完美解決，然後再使用背景圖技術類比動態效果。

ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/

3. 延長背景(Extend Background Image)

如果圖片的某邊可以背景平鋪無限延長，則不需要每個角、每條邊單獨搞出來，圖片能少一個就少一個。其實，這個理論還可以擴充到四角容器裡，好處是能大大簡化HTML Structure。

  

Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/

綜合案例

Google Korea（1和2技巧）
http://demo.rexsong.com/200705/google_korea/

CSS Menus（2和3技巧）
http://demo.rexsong.com/200705/css_background_menus/

 

原文:http://blog.rexsong.com/?p=746