今天用chrome打開(kāi)微信公眾號(hào)閱讀的時(shí)候，突然發(fā)現(xiàn)里面的圖片都是WebP格式的，用IE打開(kāi)來(lái)圖片就都變成了PNG格式，微信應(yīng)該用了漸進(jìn)式增強(qiáng)來(lái)讓圖片兼容不同的瀏覽器，進(jìn)行了資源優(yōu)化。
一般漸進(jìn)式優(yōu)化我們可以這么來(lái)：
<picture>
<source srcset="demo.webp" type="image/webp">
<source srcset="demo.jpg" type="image/jpg">
<img src="demo.jpg" alt="">
</picture>
那么問(wèn)題來(lái)了，我們要如何獲取WebP的圖片格式呢？
我百度了很多方法，大多都不太靠譜，有一個(gè)免費(fèi)的網(wǎng)站https://cloudconvert.com/可以轉(zhuǎn)換成功，然而速度太感人，果斷放棄。
這時(shí)候前端er就應(yīng)該想到用npm包去解決這個(gè)問(wèn)題啦~
imagemin-webp 就提供了很好的解決方案，下面貼代碼：
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*.{jpg,png}'], 'build/images', {
use: [imageminWebp({ quality: 50 })]
}).then(() => {
console.log('Images optimized');
});
安裝 imagemin-webp 需要先安裝imagemin哦~imagemin有很多衍生插件用于處理圖片，但我覺(jué)得與其自己手殘把圖片壓縮得太失真還不如用tinypng科學(xué)的壓縮呢。
另外我們注意到壓縮率是50，默認(rèn)值是75，我們可以把原圖跟不同壓縮率的轉(zhuǎn)換圖進(jìn)行對(duì)比：
| 壓縮率 | 轉(zhuǎn)換后尺寸/轉(zhuǎn)換前尺寸 |
|---|---|
| 75 | 0.3+ |
| 50 | 0.2+ |
我們可以看到圖片真的變小了好多呢~
至于轉(zhuǎn)換后圖片的清晰度我們也可以來(lái)看下:
comparison.jpg
這是圖片放大后局部的截圖，我們可以看到部分細(xì)節(jié)進(jìn)行了刪減，原圖其實(shí)看不到什么差異的，所以北鼻們可以用起來(lái)了，安全可靠不要錢(qián)哈~
