css sprite:網頁圖片應用處理方式-中文百科頻道

簡介

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

這是一款腳本之家翻譯自國外網站的css樣式工具，可在線生成css精靈/雪碧圖樣式。用戶隻需點擊按鈕上傳雪碧圖片即可通過鼠标點擊拖動來選擇雪碧圖上的小圖案，待系統自動确定圖形邊界即可框選出相應的小圖案，并在下方的代碼區顯示出對應的圖案位置css樣式。該工具還提供背景圖比例設置、相對位置百分比設置等功能。提供給需要的朋友使用。

原理

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

優缺點

優點

1.利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；

2.CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和。

3.解決了網頁設計師在圖片命名上的困擾，隻需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。

4.更換風格方便，隻需要在一張或少張圖片上修改圖片的顔色或樣式，整個網頁的風格就可以改變。維護起來更加方便。

缺點

誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點，如下：

1.在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止闆塊内出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自适應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；

2.CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精确位置，這是針線活，沒什麼難度，但是很繁瑣；幸好騰訊的鬼哥用ADOBEAIR開發了一個CSS Sprites樣式生成工具，雖然還有一些使用上的不靈活，但是已經比photoshop測量來的方便多了，而且樣式直接生成，複制，拷貝就OK！

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

4.CSS Sprites非常值得學習和應用，特别是頁面有一堆ico（圖标）。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。