一，關于CSS Sprite
CSS Sprites是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網絡流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需 顧忌這個問題。
按照yahoo的rules for high performance web sites的原則，應當較少Client與Server端間 的HTTP Request次數。通過CSS Sprites方法將多張圖片組裝成單獨的一張圖片，可以有效減少HTTP請求 的次數。
當整幅圖片載入完成后，你就可以使用CSS方法通過設置背景位置的方式完成所需圖片的準確調用。
加速的關鍵，不是降低重量，而是減少個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求，所以，圖片越多請求次數越多，造成延遲的可能性也就越大。
二，CSS Sprite的使用
有幾篇關于CSS Sprites的文章，基本上把其原理和機制說明得很清楚。
What Are CSS Sprites?
How to create CSS sprites
Creating Rollover Effects with CSS Sprites
Building a Dynamic Banner with CSS Sprites
High Performance Web Sites中關于CSS Sprites的內容3.2. CSS Sprites
三，CSS Sprite的例子
[原文：http://blog.rexsong.com/?p=746#comments]
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/
四，CSS Sprites的問題
由于IE6存在的background的flicker問題IE6/Win, background image on <a>, cache=‘check every visit’: flicker!，有人針對此問題提出了解決方案Fast Rollovers Without Preload
關于IE6的flicker問題，fivesevensix.com上有一篇很不錯的研究文章Minimize Flickering CSS Background Images in IE6
另外：brunildo.org的CSS tests and experiments是關于css各種功能不錯的參考手冊和測試工具。
五，相關資源
What Are CSS Sprites?
http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=1
CSS Sprites: Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites/
CSS Sprites Generator
http://www.csssprites.com/
http://spritegen.website-performance.org/
Fast Rollovers Without Preload
http://wellstyled.com/css-nopreload-rollovers.html
JavaScript Sprite Animation Using jQuery
http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/
http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/
How to create CSS sprites
http://fatagnus.com/how-to-create-css-sprites/
Creating Rollover Effects with CSS Sprites
http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/
Building a Dynamic Banner with CSS Sprites
http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/
CSS Sprites and IE/Win Flicker Issue
http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/
css用法測試工具：CSS tests and experiments
http://www.brunildo.org/test/index.html