摘要：雪碧圖雪碧圖就是把很多小的圖整合到一起，制作成一張比較大的圖，然后作為元素的背景圖片使用，定位到相應(yīng)的圖片即可。除此之外，使用雪碧圖，有兩個個注意地方不要把頁面所有的圖片都合并，比如把整合會破壞的語義結(jié)構(gòu)。

看似平常的事物，往往會蘊(yùn)含的巨大的智慧。把看似平常的事物簡單做好，可能很正常。如果能把平常的事物做精，做細(xì)，這個不平常。

每一個開發(fā)者在開發(fā)項目中，不可避免要和圖片打交道，優(yōu)化圖片似乎也成了一個必修課。圖片優(yōu)化也不僅僅是性能上的優(yōu)化，還要進(jìn)行體驗上的優(yōu)化。至于怎么優(yōu)化圖片，沒有固定的方式，只能具體場景，具體分析，選擇合適的方案。不多說，下面也簡單介紹下自己處理過，了解過的一些方式。如果大家有補(bǔ)充，建議。歡迎在評論區(qū)留言，交流學(xué)習(xí)下。

‘概念用法’這個詞是自己亂起的，可能不太準(zhǔn)確，是因為詞窮了，不知道怎樣形容?？偟脕碚f，這部分介紹的處理方式，就是講一下就知道怎么用的方式，不需要怎么放代碼，運(yùn)行圖等。只需要籠統(tǒng)的介紹一下，大家都會懂的一些方式。

這個沒有隱含的意思，就是把圖片的大小進(jìn)行壓縮。目前自己用的比較多的兩個壓縮網(wǎng)站是TinyPng和智圖。使用比較方便，品質(zhì)也基本保持一致。

一些比較小的圖標(biāo)，使用 base64 編碼代替可以減少 http 請求。但是有一個缺點(diǎn)就是轉(zhuǎn)成 base64 后，編碼會比原圖更大，圖片越大，差別就越大。1K左右的圖標(biāo)，轉(zhuǎn)碼出來的 base64 大概是 1.1K-2K。如果是 8K 的圖片，轉(zhuǎn)碼出來的 base64 可能超過10K。就自己項目開發(fā)而言，只有小于 4K 的圖標(biāo)，才會進(jìn)行轉(zhuǎn)碼。

由于 icon-font 看著是圖片，實際上是字體。

優(yōu)點(diǎn)：就是在于可以矢量縮放，大小圖標(biāo)都可以使用，也可以改變顏色，使用也不麻煩。

缺點(diǎn)：需要引入的文件不少(.svg,.ttf,.woff,.eot )。文件大小也比較大。建議是項目的圖標(biāo)要達(dá)到一定量才使用 icon-font，如果是幾個圖標(biāo)，還是用圖片吧。如果需要引入的圖標(biāo)多，就建議使用 icon-font。

上面說的 icon-font 由于是字體，所以不支持多色圖標(biāo)。有了解到，現(xiàn)在 icon-font 可以支持多色圖標(biāo)了（symbol引用）。只是兼容性不好。

雪碧圖就是把很多小的圖整合到一起，制作成一張比較大的圖，然后作為元素的背景圖片使用，定位到相應(yīng)的圖片即可。

優(yōu)點(diǎn)：減少了大量的 http 請求。

缺點(diǎn)：背景定位和在移動端適配大小有點(diǎn)麻煩。

除此之外，使用雪碧圖，有兩個個注意地方
1.不要把頁面所有的圖片都合并，比如把 logo 整合會破壞 html 的語義結(jié)構(gòu)。圖像復(fù)雜的 banner 也不要合并
2.盡量只把顏色相近的圖標(biāo)整合在一張圖片上，如果圖片顏色相差太大，合并出來的圖片可能會很大。

比如頁面上有一張尺寸是 100*100 的圖片，但是圖片的實際尺寸是 1000*1000 的。這樣的情況建議在多準(zhǔn)備一張 100*100 的圖片。不然可能會造成資源浪費(fèi)。

如下例子，比如頁面有這個圖標(biāo)

在特定情況下會是下面這個顏色。

同一個圖標(biāo)，在不同的時候是不同的顏色。icon-font 可以通過改變 color 實現(xiàn)?；蛘哂脙蓮垐D片。除了這兩個方法，用 CSS3 的混合模式，一樣可以實現(xiàn)。兩行代碼搞定。

運(yùn)行效果

展示完 mix-blend-mode，順便提下 background-blend-mode 。用法基本一致，只是 mix-blend-mode 作用于 html 元素的混合模式，background-blend-mode 作用于元素背景的混合模式。

注意事項
1.圖片必須是白底純色圖標(biāo)
2.現(xiàn)代的瀏覽器，支持這個屬性的瀏覽器

如果圖片是透明純色背景，得到的結(jié)果會是這樣

受限篇幅影響，混合模式暫時就介紹這么多，以后發(fā)現(xiàn)好玩的再寫文章。有興趣可以看下面的參考資料。

兩行 CSS 代碼實現(xiàn)圖片任意顏色賦色技術(shù)

不可思議的顏色混合模式 mix-blend-mode

不可思議的混合模式 background-blend-mode

有一些簡單的圖標(biāo)，可以使用 CSS 代替。比如下面這些

自己而言，項目上畫的最多的就是各種箭頭

優(yōu)點(diǎn)：矢量縮放，顏色可變，不需要發(fā)送請求

缺點(diǎn)：只適合用簡單圖形，1-5行 CSS 代碼可以搞定的才建議用，超過的不建議。想得痛苦，寫也麻煩，花時間也多，效果未必比其它方案好。建議還是圖片 base64，或者 icon-font。

這里就簡單舉個例子，需要知道 css3 還可以畫什么圖形?？磪⒖假Y料。

純CSS制作的圖形效果

奇妙的 CSS shapes(CSS圖形)

【CSS】用CSS繪制圖標(biāo)（圖標(biāo)大全）

1.從這里開始。下面的demo，有些會用到 ecDo 這個庫（自己寫的一個常用函數(shù)庫，歡迎star）。之前的文章有介紹過，這里就不再重復(fù)。大家不知道的時候點(diǎn)開看下相應(yīng)的 API ，運(yùn)行下，調(diào)試下就好。
2.為方便展示，下面的demo，除了懶加載，都有在 network 把網(wǎng)速調(diào)至了慢速的3G。

有些項目圖片比較多，如果一次性加載，用戶等待時間會過久，可能會造成體驗效果很差，甚至導(dǎo)致用戶流失，很多網(wǎng)站用到的一個體驗優(yōu)化方式是隱式預(yù)加載。

等待首屏加載，在用戶看首屏（第一張大圖）的時候，悄悄的加載其它圖片（這里為了展示效果，在項目上其他的小圖片不應(yīng)在第一屏）。

    

    
這是預(yù)加載的圖片
    

        
    

//測試請先清空緩存
window.onload = function () {
    ecDo.loadImg("load-img", function () {
        console.log("加載完畢")
    });
}

注意事項：

1.大概預(yù)測，用戶看首屏的時候，很大概率會往下面看。

2.該方式，用戶等待的時間比較短。但是圖片超大，要慎重考慮。因為該方式無法保證用戶在瀏覽的時候，能把下一屏（比如瀏覽第一屏的時候，要加載第二屏）的圖片加載完畢，讓用戶無感知。如果切換的下一屏還沒加載完畢，也可能會影響體驗。

demo:https://github.com/chenhuiYj/...

告訴用戶正在加載，等到加載完了再一次性渲染在頁面上。

    
顯示預(yù)加載進(jìn)行中
    

        
    

let oP1=document.getElementById("p");
let oDiv=document.getElementById("div");
//測試請先清空緩存
window.onload = function () {
    ecDo.loadImg("load-img", function () {
        oDiv.style.display="block";
        oP1.style.display="none";
    });
}

注意事項：

1.大概預(yù)測，用戶看首屏的時候，很大概率會往下面看。

2.該方式好處在于加載完畢之后，就所有圖片都加載完畢了，體驗比較好。如果圖片全部過大，加載時間會比較長，loading 的時間也會很長，會影響體驗。

demo地址：https://github.com/chenhuiYj/...

這個大家應(yīng)該很熟悉了，簡單點(diǎn)說就是圖片一開始不加載，當(dāng)用戶瀏覽到什么位置的時候，相應(yīng)位置得圖片就加載出來。

window.onload = function () {
    //根據(jù)load-img 這個 class 遍歷，元素距離頁面底部 100像素的時候就開始加載，加載錯誤就顯示error.jpg
    ecDo.delayFn(ecDo.lazyLoadImg("load-img", 100, "error.jpg"),100,200);
    window.onscroll = function () {
        ecDo.delayFn(ecDo.lazyLoadImg("load-img", 100, "error.jpg"),100,200);
    }
}

demo:https://github.com/chenhuiYj/...

這個例子，當(dāng)網(wǎng)速比較慢的時候，想要加載的圖片沒有馬上出來?；蛘邎D片路徑錯誤，這個時候頁面可能會出現(xiàn)一部分空白的地方，或者頁面布局會出現(xiàn)錯亂，比較常用的做法是先顯示一張 loading 圖或者是 logo 圖。告訴用戶，這里是圖片，正在加載，體驗上會好很多，比如下面這個例子。

下面也簡單的實現(xiàn)一下。

比如網(wǎng)站上有這樣的圖片

在 network 把網(wǎng)速調(diào)至了慢速的3G，以方便調(diào)試。

//測試前請先清空緩存
window.onload = function () {
    let oImg=document.getElementsByTagName("img");
    for(let i=0;i

可以看到，一開始顯示的是一張默認(rèn)圖片，等需要加載的圖片，加載完了之后，再加載需要加載的圖片。（最后一張圖片，是故意把路徑寫錯，所以出來的圖片是之前的圖片）
demo：https://github.com/chenhuiYj/...
7.小結(jié)
關(guān)于項目上，優(yōu)化圖片的各種方式，自己用過的，聽過的，大概就在這里了。實現(xiàn)方案，也不敢說是最好。如果大家有更好的想法，建議，歡迎在評論區(qū)留言。
-------------------------華麗的分割線--------------------
想了解更多，和我交流，內(nèi)推職位，請?zhí)砑游椅⑿拧；蛘哧P(guān)注我的微信公眾號：守候書閣