一場關於webp的革命，讓你的網站更絲滑
webp是什麼？
webp是谷歌推出的一種新型圖片格式，從2010發佈到現在已經過去了10年。其通過減少文件大小，但達到和JPEG格式相同的圖片質量，來縮短圖片的網絡請求時長。值得注意的是，圖片不能過大，webp支持的圖片像素最大數量是16383x16383(width x height)。
webp的兼容性怎麼樣？
特定場景下，webp是一個很不錯的選擇，比如大屏可視化，花瓣網那種圖片素材網站，京東淘寶等電商平臺，應用很廣。感興趣的可以去某個網站通過network網絡面板進行查看，看看什麼樣的圖片場景使用了webp。好用，但並不意味着可以全線使用。下面這張圖是webp在不同瀏覽器下的兼容情況。
比較明顯的，除了ie和蘋果，其他的都沒啥大問題。然而現實的問題就是，這兩類瀏覽器涵蓋的用戶量還挺多的。如果使用，需要做降級處理，降級成png,jpeg,jpg等其他支持的圖片格式。當然，如果一切以chrome爲標準，不考慮兼容問題，那就可以無腦用了。
webp和同類圖片格式的比較
webp是否真的能在輕量和色彩度上魚和熊掌兼得呢？
我們來進行一個測試。最近在學英語，我就用一張英語知識點的思維導圖來當案例了,測試網址見文末。
如果你對英語不感興趣，可以不用過多關注上邊圖片中的內容，只需知道這張圖原始大小爲1.14M,png格式。如果不做任何處理，尤其是網不好的情況下，加載真的很慢，有部分白屏，然後一點點加載…體驗很差。那麼轉成webp會如何呢？來看一下對比數據。
一圖勝千言，處理成webp格式的圖片尺寸小了一半多，接下來再看看視覺效果，下邊這張圖是webp格式
仔細康康昂，視覺角度，有明顯差異嗎？幾乎沒有，放大效果也是差不多的，但事實就是，圖片尺寸確實小了很多。webp真的做到了魚和熊掌兼得。
如何把其他格式圖片轉成webp格式？
- 如果不用程序實現，文末的那個測試地址就可以了
- 當然，作爲程序員，我們還是傾向用程序實現的，這裏以nodejs爲例
1. 安裝cwebp-bin cnpm i cwebp-bin (windows平臺推薦使用cnpm安裝)
2. 編寫轉換方法towebp
3. 輸入原始圖片地址和輸出圖片地址，調用towebp函數進行測試
4. 注意，原始圖片尺寸不要超過16383x16383(width x height)，超過會報錯，這是webp的像素支持上限了
const { execFile } = require('child_process');
const cwebp = require('cwebp-bin');
function towebp (src, target) {
return new Promise((resolve, reject) => {
execFile(cwebp, [src, '-o', target], err => {
if (err) { reject(err); }
resolve(true)
});
})
}
webp的選擇時機和降級處理
webp的出現不是爲了取代原有圖片格式的，所以沒必要什麼圖片都拿來轉一下，如果圖片特別小，其實轉成webp也沒有太大效果。可以參考一下淘寶京東等電商平臺不同場景下圖片格式的選用。還有就是瀏覽器的兼容性，要做降級處理。這裏採用html5的picture標籤來做降級處理。
<picture>
<source srcset="/名詞性從句.webp"> </source>
<img src="/名詞性從句.png" alt="名詞性從句">
</picture>
上邊這種寫法，瀏覽器會優先解析webp格式圖片，如果不支持，就降級採用png的圖片，無論哪種，都不會兩個都下載的，這才符合預期。
當然，如果是ie，那麼它可能識別不了html5的新標籤，可以使用html5shiv這個大補丁，讓ie支持，文末附上html5shiv的cdn地址。
下面來看一下ie下降級成png的效果，這裏使用了html5shiv
chrome顯示肯定是沒問題的，這裏看一下資源加載,：只會加載一種圖片格式，這正是我們預期的
如果你不想用html的方式，也可以用js做降級處理
//這裏的!![].map是對低級ie的校驗，防止後邊的方法掛掉
let allowWebp= !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
項目中的實踐
涉及用戶自定義圖片處理的，都會提供上傳接口，可以在後臺對用戶上傳的圖片做一個處理，將大圖轉成webp,然後前端做降級處理。
對於用戶而言，能明顯體會到加載速度變快，至於圖片轉換前後的質量和色彩度，幾乎是無感知的。
總結
本文從webp的概念入手，先後分析了webp的兼容性，優缺點，並和其他圖片格式進行比較，最後給出了一套後端的轉換方案和前端的降級處理策略。最後安利一波我的英語學習網站，包含英語基礎語法，側重圖文展示的早安分享和側重英語短視頻的晚安分享。
相關鏈接
- webp測試網站：https://zhitu.isux.us/
- html5shiv ：https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js
- 花瓣：https://huaban.com/
- 京東：https://www.jd.com/
- 淘寶：https://www.taobao.com/
- enote英語學習網站：https://lengyuexin.github.io/