如今行業(yè)內(nèi)的圖片格式越來(lái)越豐富，優(yōu)化、壓縮的方法也越來(lái)越多。我們?cè)撊绾芜x擇適合自己項(xiàng)目的圖片優(yōu)化方法呢？讓我們來(lái)一起探討圖片優(yōu)化的最佳實(shí)踐吧。
我選擇了幾種常用的圖片格式和優(yōu)化方法來(lái)做實(shí)驗(yàn)，我會(huì)分別從【矢量圖】和【位圖】來(lái)進(jìn)行分析。
一、矢量圖 -- iconfont
什么是iconfont？
從字面意思理解就是“圖標(biāo)字體”。
為什么用iconfont？
1. 自由變換大小和顏色等樣式
2. 畫(huà)質(zhì)清晰
3. 易于維護(hù)
4. 兼容性好
css能為字體加的樣式對(duì)于圖標(biāo)字體都可適用。
如何使用iconfont？
這里我濃縮成了3步：
1. 在網(wǎng)上選擇一款你喜歡的圖標(biāo)字體生產(chǎn)工具，將svg圖片提交上去；
2. 下載包含字體文件、樣式文件、Demo的文件包；
3. 使用代碼，利用demo中的代碼修改成適合你用的。
二、矢量圖 -- svg
什么是iconfont？
谷歌和度娘上都有一大段專業(yè)的文字來(lái)描述，我的簡(jiǎn)單理解就是一種二維矢量圖片格式。
為什么用svg？
使用方便
任意縮放
文件體積小
如何使用svg？
我分為2步：
1.導(dǎo)出 -- 用任何一款可以畫(huà)矢量圖的軟件都可以導(dǎo)出svg格式圖片，如：Adobe Illustrator／Sketch
這里可以注意的是，圖形勾勒過(guò)程中可以去掉多余的錨點(diǎn)，錨點(diǎn)越少文件越小。
2. 應(yīng)用 -- 導(dǎo)出的圖片應(yīng)用在網(wǎng)頁(yè)中就像通常用jpg／png格式的圖片一樣引入相應(yīng)的圖片路徑就行。
svg既然有這么多優(yōu)點(diǎn)，又方便使用，我們來(lái)看看效果如何呢？下面分別用svg圖和png圖做一個(gè)簡(jiǎn)單的對(duì)比：
我們發(fā)現(xiàn)在質(zhì)量幾乎相同的情況下svg圖片體積小很多，但別忘了svg是矢量圖形，其實(shí)質(zhì)量會(huì)比位圖png好很多。如此美妙的圖片格式我們還有什么理由拒絕使用它。
查理·芒格說(shuō)：只有了解一個(gè)知識(shí)的局限性，才能真正擁有一個(gè)知識(shí)。
接下來(lái)我們看看svg的兼容性：
兼容性看似前景一片大好，但還是有些低版本瀏覽器無(wú)法支持。沒(méi)關(guān)系，我們先把問(wèn)題暫時(shí)放一放。后面再來(lái)聊一聊兼容性的解決方案。
三、 位圖
關(guān)于位圖我通過(guò)一系列實(shí)驗(yàn)，得出了兩條結(jié)論：
- 圖片顏色越豐富webp的壓縮效果越好
- 顏色單一的圖片壓縮模式png優(yōu)于webp優(yōu)于jpg
為了方便理解我畫(huà)了個(gè)簡(jiǎn)單的圖表來(lái)描述png、jpg、webp與文件大小、圖片顏色豐富程度的關(guān)系。
我是如何得出這個(gè)結(jié)論的呢？我在幾百?gòu)垐D片實(shí)驗(yàn)中挑選了三組典型的案例來(lái)展示：
這組圖片說(shuō)明了圖片顏色越單一png格式的壓縮效果越好。
這組圖片雖然看上去貌似顏色單一，但它標(biāo)題的陰影所用的灰色通道占據(jù)了大量的顏色數(shù)，所以可以看出其webp的表現(xiàn)較優(yōu)越。
這張顏色相對(duì)豐富的圖片就更加能說(shuō)明webp對(duì)于顏色數(shù)多的圖片優(yōu)異的表現(xiàn)能力了。
四、位圖 -- webp
說(shuō)了這么多webp到底是什么呢？
谷歌作為其開(kāi)發(fā)商用了一大段文字來(lái)描述，我簡(jiǎn)單的理解webp就是一種壓縮效果更好的圖片格式。
為什么用webp？
體積更小
顏色豐富
如何使用webp？
關(guān)于如何使用webp我在線上找了一些轉(zhuǎn)換壓縮工具和軟件，使用后發(fā)現(xiàn)這些工具的參數(shù)、穩(wěn)定性都不太一樣，就導(dǎo)致導(dǎo)出的圖片效果也不太一樣，非常影響我實(shí)驗(yàn)的最終效果。對(duì)比各種方案后還是選擇工程化的方式比較靠譜。
五、gulp插件自動(dòng)壓縮
為什么選擇工程化？
自動(dòng)化 — 節(jié)約人力
標(biāo)準(zhǔn)化 — 避免出錯(cuò)
如何使用？
這里我選擇了以下幾種gulp插件供大家參考：
gulp插件的用法：
從上面的截圖可以看出imagemin和webp插件除了可配置需要壓縮的圖片格式外，還可以自行配置壓縮的質(zhì)量。我想重點(diǎn)說(shuō)明一下壓縮質(zhì)量可以根據(jù)自己的項(xiàng)目需要來(lái)配置參數(shù)，截圖中是我根據(jù)實(shí)驗(yàn)中的圖片總體輸出質(zhì)量和體積不斷測(cè)試出的一個(gè)相對(duì)較合適的參數(shù)。
我分別做了三個(gè)方案的測(cè)試，測(cè)試對(duì)象是一個(gè)有124個(gè)圖片文件的文件夾，結(jié)論如下：
從統(tǒng)計(jì)結(jié)果來(lái)看方案2(將大部分圖片壓縮轉(zhuǎn)換成webp格式)的效果是壓縮率最高的，雖然耗時(shí)相對(duì)較長(zhǎng)，但比起人工手動(dòng)在線壓縮優(yōu)勢(shì)會(huì)大很多。
以下是方案2的實(shí)驗(yàn)截圖：
實(shí)驗(yàn)得出的結(jié)論是從整體來(lái)看webp的壓縮格式相比png和jpg都相對(duì)較優(yōu)。
webp既然如此好用，我們來(lái)看看兼容性。
這樣看來(lái)我們接下來(lái)要考慮兼容圖片格式相關(guān)工作了。
六、按需加載
關(guān)于兼容瀏覽器不支持webp的方案我簡(jiǎn)單的為大家介紹3種：
1. h5標(biāo)簽
這個(gè)方案最簡(jiǎn)單，利用<picture><source>標(biāo)簽，具體實(shí)現(xiàn)方式如下截圖：
當(dāng)瀏覽器支持source標(biāo)簽srcset屬性里的圖片時(shí)會(huì)顯示此圖片，如果不支持則會(huì)向下兼容img標(biāo)簽里的圖片，所以img標(biāo)簽里通常放入是瀏覽器都支持的普通圖片格式。
但貌似兼容性并不是那么理想android又不支持新h5標(biāo)簽，欲哭無(wú)淚有木有？我還是決定再測(cè)試一下。
網(wǎng)上有資料說(shuō)source標(biāo)簽也可以用src屬性，于是我做了幾組測(cè)試，測(cè)試結(jié)果如下圖：
能展示微證券banner圖的是android系統(tǒng)，能看到小黃人說(shuō)明瀏覽器不支持webp圖片格式，那第二張圖是怎么回事？
我們通過(guò)下面這個(gè)表格來(lái)分析一下關(guān)于source標(biāo)簽里srcset這個(gè)屬性。
通過(guò)測(cè)試得出以上表格結(jié)論，說(shuō)明source標(biāo)簽是不支持“src”屬性的。但是如果srcset里的路徑圖片是webp格式的話蘋(píng)果相關(guān)的產(chǎn)品都是不支持，而且還不向下兼容，不顯示任何圖片。以此判斷如果srcset里是webp格式，由于瀏覽器本身是支持srcset的所以當(dāng)它遇見(jiàn)的是不支持的webp格式就沒(méi)有再向下兼容。
于是我將srcset改為src，瀏覽器不支持src的屬性，直接就向下兼容了。所以測(cè)試圖片中的第二張圖片下面展示的小黃人是因?yàn)閟ource標(biāo)簽內(nèi)用src屬性，瀏覽器支持向下兼容了png格式的小黃人圖片。
2. JS兼容方案
此段代碼先判斷瀏覽器是否支持webp圖片格式，原理是先加載一張webp圖片格式。如果瀏覽器能加載到圖片的寬高說(shuō)明是支持的，反之則不支持。
接下來(lái)就可以利用這段代碼設(shè)置函數(shù)用來(lái)判斷支持或不支持webp格式時(shí)的操作。
在html中設(shè)置參數(shù)分別用來(lái)插入支持或不支持webp格式時(shí)的圖片路徑。
3. 服務(wù)器端兼容方案
利用服務(wù)器端請(qǐng)求瀏覽器端的accept 頭，支持webp圖片格式的就返回webp格式的文件。這些配置可以用nodejs實(shí)現(xiàn)，也可以在nginx中完成。
七、動(dòng)圖--apng
既然我們有很多方案可以向下兼容圖片，再介紹一個(gè)好用的動(dòng)圖格式——apng。
什么是apng？
簡(jiǎn)單說(shuō)就是一種png擴(kuò)展的動(dòng)態(tài)圖片格式（Animated png）。
為什么用apng？
支持24位彩色圖像，表現(xiàn)更多動(dòng)態(tài)圖片細(xì)節(jié)
支持8位透明通道，背景完全透明
怎么用？
為大家介紹一種在線生成的工具，可以把每一幀圖片倒入利用它生成apng格式的動(dòng)圖
https://ezgif.com/apng-maker
效果對(duì)比
我在網(wǎng)上找到一張圖非常能說(shuō)明gif、png、apng三者的關(guān)系。大家一看便知了。
apng兼容性
雖然兼容性看上去不是特別理想，但是apng自己會(huì)向下兼容，若是在不支持的瀏覽器上apng會(huì)只顯示第一幀，那么圖片看上去會(huì)像png圖。
不支持apng時(shí)：
支持apng時(shí)：
八、最佳實(shí)踐總結(jié)
綜上所述那么多圖片優(yōu)化的格式和方法，我將它們和相應(yīng)的情況做了個(gè)小結(jié)：
隨著技術(shù)的進(jìn)步會(huì)有越來(lái)越多的技術(shù)和方法來(lái)完善圖片優(yōu)化的工作，面對(duì)技術(shù)的進(jìn)步，我們應(yīng)該用辯證的方法看待問(wèn)題。遇到困難敢于開(kāi)拓，勇于實(shí)踐，通過(guò)不斷地探索和驗(yàn)證使我們更加接近真理。
