什麽是CSS Sprite精靈？

是用於前端的一種圖片應用技術，通常情況，我們的開發的網頁或許有很多張圖片，假如在一個頁面上有50多張小圖片，這意味著瀏覽器要逐個下載50張圖片。Css Sprite它允許你將一個頁面涉及到的所有零星圖片都包含到一張圖中，這樣一來，當訪問頁面時，就只需要下載1張圖片了，這顯然大大減低了服務器請求壓力。

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

什麽是雪碧圖？

雪碧圖就是許多在網頁中需要的小圖片被合並到了一張圖片當中，那麽這張圖片就叫雪碧圖，例如:

可以用來合並動畫幀等用途，最多常在網頁遊戲中應用

如何毫不費力的制作雪碧圖並加以使用?

前往Css Sprites在線工具地址：https://www.toptal.com/developers/css/sprite-generator

將需要的圖片導入到在線網頁工具中，就會自動生成雪碧圖，如下圖

可以看到在線工具自動生成了雪碧圖你可以點擊下載，然後還生成了css樣式，會基本網頁的你就應該自然會用了

我們下載生成的雪碧圖得到如圖:

使用後的效果案例：

案例來自：http://mc.163.com/index.html 我的世界官網

並非本人開發，我只是拿這個作為例子。

Css Sprite原理：

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

雪碧圖使用總結

優點

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

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

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

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

假如不使用這個在線生成工具，那麽將是及其的麻煩，當然這也是全職開發者必備的工具

使用雪碧圖Css Sprite精靈 | 加速網頁響應速度