網站性能優化之css sprites

什麼是css sprites?

打開一些網站能夠看到每張圖片相應須要請求一次後臺，以下圖：

http請求是比較消耗資源的，當網站中存在較多的http請求時，性能就會相應的下降，加載就會變慢，甚至卡住。
減小http請求能提升web性能，css sprites就是經過合併多張圖片達到減小請求目的的一種技術。

css sprites工做原理

將多張圖片合併成一張大的圖片，而後利用css中的background-image,background-repeat以及background-position來實現。
background-image用於指定容器的背景圖片，好比background-image:url(xxx.png);,
background-repeat用於指定是否及如何重複背景圖像，好比background-repeat:no-repeat;,
最重要的是background-position,用於控制咱們想要顯示的圖片位置，好比background-position:6px 6px;表示背景圖片的左上角將相對容器元素的左上角向右以及向下移動6px。

適用場景

1.通常只能使用到固定大小的盒子（box）裏，這樣纔可以遮擋住不該該看到的部分

2.須要經過下降http請求數完成網頁加速。

3.網頁中含有大量小圖標。或者，某些圖標通用性很強。

4.網頁中有須要預載的圖片。主要是a與a:hover背景圖這種關係的。若是a與a:hover的背景圖分別加載，那麼，就會出現用戶鼠標移到某個按鈕上，按鈕的背景忽然消失再出來，產生「閃爍」，若是按鈕文字色與大背景相同或相近，就更囧了，有可能讓人產生按鈕「消失」了的錯覺。

注意事項

1 把幾乎不會改變的通用性很強的圖標或者其餘圖片合併最好，能夠避免每次更新圖片都要從新合併圖片
2 利用一些自動工具生成CSS代碼，省去本身用ps找偏移量的工做

推薦工具

css sprite tools(客戶端工具)，此工具生成的部分代碼以下，選擇器的名字就是你的小圖片的文件名：

.pic1{background:url(../imgs/allbgs.png) no-repeat 0px 0px;width:6px;padding-top:6px;}
.pic2{background:url(../imgs/allbgs.png) no-repeat -6px 0px;width:6px;padding-top:6px;}
.pic3{background:url(../imgs/allbgs.png) no-repeat -12px 0px;width:16px;padding-top:13px;}
.pic4{background:url(../imgs/allbgs.png) no-repeat -28px 0px;width:15px;padding-top:17px;}

測試結果

jsfiddle地址

一些文章

CSS Sprites（截取部分圖片）是怎麼工做的

csszengarden

CSS Sprites: Image Slicing’s Kiss of Death

CSS Sprites的概念、原理、適用範圍和優缺點

在線工具

在線工具sprite-creator