css 雪碧圖

CSS Sprites在國內不少人叫css精靈，是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問 該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差很少 的，因此無需 顧忌這個問題。

 

　　加速的關鍵，不是下降重量，而是減小個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求，因此，圖片越多請求次數越多，形成延遲的可能性也就越大。

CSS Sprites原理

　　CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景 圖片的位置。

CSS Sprites優勢

　　利用CSS Sprites能很好地減小了網頁的http請求，從而大大的提升了頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；
　　CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。

CSS Sprites缺點

　　誠然CSS Sprites是如此的強大，可是也存在一些不可忽視的缺點
　　在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內不會出現沒必要要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂；
　 　CSS Sprites在開發的時候比較麻煩，你要經過photoshop或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣；幸 好騰訊的鬼哥用RIA開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，可是已經比photoshop測量來的方便多了，並且樣式直接生成，複製，拷貝就OK！

　　CSS Sprites在維護的時候比較麻煩，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，若是在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增長了，還要改動css。

　　CSS Sprites很是值得學習和應用，特別是頁面有一堆ico（圖標）。總之不少時候你們要權衡一下利弊，再決定是否是應用CSS Sprites。

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的例子

　　1. 圖片限制(Image Slicing)[1]
　　典型如文本編輯器，小圖標特別多，打開時一張張跑出來，給用戶的感受很很差。若是能用一張圖解決，則不會有這個問題，好比百度空間、163博客、Gmail都是這麼作的。
　　Image Slicing’s Kiss of Death
　　http://www.alistapart.com/articles/sprites
　　2. 單圖轉滾(Single-image Rollovers)[1]
　　觸發切換圖片的需求，傳統方案得從新請求新圖片，由於網絡問題常常形成停留或等待。若是能把多種狀態合併成一張圖，就能完美解決，而後再使用背景圖技術模擬動態效果。
　　ColorScheme Ratings
　　http://demo.rexsong.com/200608/colorscheme_ratings/
　　3. 延長背景(Extend Background Image)[1]
　　若是圖片的某邊能夠背景平鋪無限延長，則不須要每一個角、每條邊單獨搞出來，圖片能少一個就少一個。其實，這個理論還能夠擴展到四角容器裏，好處是能大大簡化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 , 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各類功能不錯的參考手冊和測試工具。

圖片優化

   1. 對於非動畫的GIF更建議使用PNG8由於它一樣能作到同樣的效果，並且能爲你節省10%-30%的文件體積。
   2. Photoshop相比起Fireworks，導出同等質量的PNG圖片，體積會稍大。而Fireworks雖然作了相應壓縮優化，但沒有達到最優秀的壓縮。
   3. 我所知的設計軟件，對於PNG圖片的處理都沒作到最優秀的壓縮，圖片體積還有必定的壓縮空間。能夠嘗試使用下面介紹的」圖像優化工具」 作無失真的壓縮優化。
   4. 圖片體積及尺寸方面，建議體積保持在100K之內(較爲符合國情最佳請求SIZE)，size爲800px(最佳尺寸)。(從某權威人事中得知，具體無從考證)

CSS Sprites圖片切割術

   1. CSS Sprites圖片順序合圖片由上至下、左至右添加。而background-position通常採用數字組合形式定位，這樣能減小維護帶來的沒必要要麻煩。
   2. 不建議CSS Sprites圖片中保持必定的間距，由於文件size增大而增長文件體積。
   3. CSS Sprites圖片中把顏色較近或相同的組合在一塊兒能夠下降顏色數，由於少色數的圖片文件體積會相對的小。
   4. size相同的CSS Sprites圖片中留有較大空隙，某程度上多數狀況會增大了體積，因此CSS Sprites的圖片不要有空隙。
   5. 在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的文件體積要大。
   6. 在CSS Sprites圖片中，水平排列的圖片會比垂直排列的文件體積要大。
   7. 圖片對等合併：應用CSS Sprites圖片時，適當地把對等相同的圖像合併，以節省空間及減小體積。
   8. 區分開不須要合併的圖像：如當前用戶肯定只顯示一種狀態或一個級別時，沒必要要把其餘的級別或狀態的圖片合併。
   9. 黃金切割位：在CSS Sprites圖片的最右或左邊爲最靈活動位置最適宜擺放文本前的icon，所以不會受到其它CSS Sprites圖片干預，也不須要預留必定的行寬。

補兩條
10. 有的說定位時避免使用bottom或right等，當使用CSS sprite的時候，只用background-position: bottom -300px或background-position: right -200px;很是容易。這剛開始的時候是可行的，可是問題是，當你在寬度上或高度上擴展相關sprite圖片的時候，原先設置的位置多是錯的，由於那 個圖片已經再也不Sprite圖片的底部或右部了。使用確切的位置來避免這個問題。

其實我感受通常狀況寬度圖不片不會改應變，用RIGHT和 LEFT仍是挺方便的，但從總體考慮，升級了。改版的。圖片寬度仍是有可能會改變的。必竟開始時作太寬也沒什麼好處，仍是浪費不少空間。就是多費點時間去對座標，最好仍是不用RIGHT 和 LEIFT的了。

12　有的說竟給每一個圖片足夠的空間
　　就像你在本文頂部的實例圖片看到的那樣，那些小圖片都被預留了足夠的空間。爲何不把他們塞到一塊來讓sprite圖片更小呢? 由於使用這些圖片的元素一般都會有大量的內容並且可能會須要擴展的間距，以致於其它圖片不會意外出現。

這個我支持，必竟多空點，也佔不不了多大空間，如何要追求完美，那就慢慢調吧。費了勁了。在加上瀏覽器兼容問題，最好還大多空間。小偏差也忽略了。

From:http://www.cnblogs.com/mofish/archive/2010/10/12/1849062.html