[盤(pán)點(diǎn)]項(xiàng)目中可以怎么優(yōu)化圖片

hedzr 發(fā)布于2019-08-02 12:07 / 1741人閱讀

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

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

1.前言

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

2.概念用法

‘概念用法’這個(gè)詞是自己亂起的，可能不太準(zhǔn)確，是因?yàn)樵~窮了，不知道怎樣形容。總得來(lái)說(shuō)，這部分介紹的處理方式，就是講一下就知道怎么用的方式，不需要怎么放代碼，運(yùn)行圖等。只需要籠統(tǒng)的介紹一下，大家都會(huì)懂的一些方式。

2-1.圖片壓縮

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

2-2.base64代替小圖標(biāo)

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

2-3.icon-font代替圖標(biāo)

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

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

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

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

2-4.雪碧圖

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

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

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

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

2-5.響應(yīng)式圖片

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

2-6.混合模式代替變色的圖標(biāo)

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

在特定情況下會(huì)是下面這個(gè)顏色。

同一個(gè)圖標(biāo)，在不同的時(shí)候是不同的顏色。icon-font 可以通過(guò)改變 color 實(shí)現(xiàn)。或者用兩張圖片。除了這兩個(gè)方法，用 CSS3 的混合模式，一樣可以實(shí)現(xiàn)。兩行代碼搞定。

運(yùn)行效果

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

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

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

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

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

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

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

2-7.簡(jiǎn)單圖標(biāo)使用 CSS 畫(huà)

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

自己而言，項(xiàng)目上畫(huà)的最多的就是各種箭頭

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

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

這里就簡(jiǎn)單舉個(gè)例子，需要知道 css3 還可以畫(huà)什么圖形。看參考資料。

純CSS制作的圖形效果

奇妙的 CSS shapes(CSS圖形)

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

3.隱式預(yù)加載

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

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

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


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

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

注意事項(xiàng)：

1.大概預(yù)測(cè)，用戶(hù)看首屏的時(shí)候，很大概率會(huì)往下面看。

2.該方式，用戶(hù)等待的時(shí)間比較短。但是圖片超大，要慎重考慮。因?yàn)樵摲绞綗o(wú)法保證用戶(hù)在瀏覽的時(shí)候，能把下一屏（比如瀏覽第一屏的時(shí)候，要加載第二屏）的圖片加載完畢，讓用戶(hù)無(wú)感知。如果切換的下一屏還沒(méi)加載完畢，也可能會(huì)影響體驗(yàn)。

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

4.顯式預(yù)加載

告訴用戶(hù)正在加載，等到加載完了再一次性渲染在頁(yè)面上。



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

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

注意事項(xiàng)：

1.大概預(yù)測(cè)，用戶(hù)看首屏的時(shí)候，很大概率會(huì)往下面看。

2.該方式好處在于加載完畢之后，就所有圖片都加載完畢了，體驗(yàn)比較好。如果圖片全部過(guò)大，加載時(shí)間會(huì)比較長(zhǎng)，loading 的時(shí)間也會(huì)很長(zhǎng)，會(huì)影響體驗(yàn)。

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

5.懶加載

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

window.onload = function () {
    //根據(jù)load-img 這個(gè) class 遍歷，元素距離頁(yè)面底部 100像素的時(shí)候就開(kāi)始加載，加載錯(cuò)誤就顯示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/...

6.圖片沒(méi)加載出來(lái)顯示默認(rèn)圖片

這個(gè)例子，當(dāng)網(wǎng)速比較慢的時(shí)候，想要加載的圖片沒(méi)有馬上出來(lái)。或者圖片路徑錯(cuò)誤，這個(gè)時(shí)候頁(yè)面可能會(huì)出現(xiàn)一部分空白的地方，或者頁(yè)面布局會(huì)出現(xiàn)錯(cuò)亂，比較常用的做法是先顯示一張 loading 圖或者是 logo 圖。告訴用戶(hù)，這里是圖片，正在加載，體驗(yàn)上會(huì)好很多，比如下面這個(gè)例子。

下面也簡(jiǎn)單的實(shí)現(xiàn)一下。

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

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

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

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