CSS Sprites在國內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需 顧忌這個問題。

利用CSS Sprites能很好地減少了網(wǎng)頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprites最大的優(yōu)點，也是其被廣泛傳播和應(yīng)用的主要原因；

CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。

傳統(tǒng)切圖思想進行操作，講究精細，圖片規(guī)格越小越好，重量越小越好，其實規(guī)格大小無所謂，計算機統(tǒng)一都按Byte計算。客戶端每顯示一張圖片都會向服務(wù)器發(fā)送請求，所以，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。因為一張圖片的傳輸時間，通常遠小于請求等待的時間。典型如文本編輯器，小圖標特別多，打開時一張張跑出來，給用戶的感覺很不好。如果能用一張圖解決，則不會有這個問題

加速的關(guān)鍵，不是降低重量，而是減少個數(shù)。傳統(tǒng)切圖講究精細，圖片規(guī)格越小越好，重量越小越好，其實規(guī)格大小無所謂，計算機統(tǒng)一都按byte計算?？蛻舳嗣匡@示一張圖片都會向服務(wù)器發(fā)送請求，所以，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。

CSS Sprites原理

　　CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

CSS Sprites優(yōu)點

　　利用CSS Sprites能很好地減少了網(wǎng)頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprites最大的優(yōu)點，也是其被廣泛傳播和應(yīng)用的主要原因；
　　CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。

CSS Sprites缺點

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

　　CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動css。

　　CSS Sprites非常值得學習和應(yīng)用，特別是頁面有一堆ico（圖標）?？傊芏鄷r候大家要權(quán)衡一下利弊，再決定是不是應(yīng)用CSS Sprites。

CSS Sprite的使用

　　有幾篇關(guān)于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中關(guān)于CSS Sprites的內(nèi)容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. 單圖轉(zhuǎn)滾(Single-image Rollovers)[1]
　　觸發(fā)切換圖片的需求，傳統(tǒng)方案得重新請求新圖片，因為網(wǎng)絡(luò)問題經(jīng)常造成停留或等待。如果能把多種狀態(tài)合并成一張圖，就能完美解決，然后再使用背景圖技術(shù)模擬動態(tài)效果。
　　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
　　關(guān)于IE6的flicker問題，fivesevensix.com上有一篇很不錯的研究文章Minimize Flickering CSS Background Images in IE6
　　另外：brunildo.org的CSS tests and experiments是關(guān)于css各種功能不錯的參考手冊和測試工具。

圖片優(yōu)化

1. 對于非動畫的GIF更建議使用PNG8因為它同樣能做到一樣的效果，而且能為你節(jié)省10%-30%的文件體積。
2. Photoshop相比起Fireworks，導出同等質(zhì)量的PNG圖片，體積會稍大。而Fireworks雖然做了相應(yīng)壓縮優(yōu)化，但沒有達到最優(yōu)秀的壓縮。
3. 我所知的設(shè)計軟件，對于PNG圖片的處理都沒做到最優(yōu)秀的壓縮，圖片體積還有一定的壓縮空間?？梢試L試使用下面介紹的”圖像優(yōu)化工具” 做無失真的壓縮優(yōu)化。
4. 圖片體積及尺寸方面，建議體積保持在100K以內(nèi)(較為符合國情最佳請求SIZE)，size為800px(最佳尺寸)。(從某權(quán)威人事中得知，具體無從考證)

CSS Sprites圖片切割術(shù)

1. CSS Sprites圖片順序合圖片由上至下、左至右添加。而background-position一般采用數(shù)字組合形式定位，這樣能減少維護帶來的不必要麻煩。
2. 不建議CSS Sprites圖片中保持一定的間距，因為文件size增大而增加文件體積。
3. CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數(shù)，因為少色數(shù)的圖片文件體積會相對的小。
4. size相同的CSS Sprites圖片中留有較大空隙，某程度上多數(shù)情況會增大了體積，所以CSS Sprites的圖片不要有空隙。
5. 在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的文件體積要大。
6. 在CSS Sprites圖片中，水平排列的圖片會比垂直排列的文件體積要大。
7. 圖片對等合并：應(yīng)用CSS Sprites圖片時，適當?shù)匕褜Φ认嗤膱D像合并，以節(jié)省空間及減少體積。
8. 區(qū)分開不需要合并的圖像：如當前用戶確定只顯示一種狀態(tài)或一個級別時，不必要把其他的級別或狀態(tài)的圖片合并。
9. 黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動位置最適宜擺放文本前的icon，因此不會受到其它CSS Sprites圖片干預(yù)，也不需要預(yù)留一定的行寬。

補兩條

10. 有的說定位時避免使用bottom或right等，當使用CSS sprite的時候，只用background-position: bottom -300px或background-position: right -200px;非常容易。這剛開始的時候是可行的，但是問題是，當你在寬度上或高度上擴展相關(guān)sprite圖片的時候，原先設(shè)置的位置可能是錯的，因為那個圖片已經(jīng)不再Sprite圖片的底部或右部了。使用確切的位置來避免這個問題。

其實我感覺一般情況寬度圖不片不會改應(yīng)變，用RIGHT和 LEFT還是挺方便的，但從整體考慮，升級了。改版的。圖片寬度還是有可能會改變的。必竟開始時做太寬也沒什么好處，還是浪費很多空間。就是多費點時間去對坐標，最好還是不用RIGHT 和 LEIFT的了。

11.有的說竟給每個圖片足夠的空間就像你在本文頂部的實例圖片看到的那樣，那些小圖片都被預(yù)留了足夠的空間。為什么不把他們?nèi)揭粔K來讓sprite圖片更小呢? 因為使用這些圖片的元素通常都會有大量的內(nèi)容而且可能會需要擴展的間距，以至于其它圖片不會意外出現(xiàn)。

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

最新評論