WebP 在減小圖片體積和流量上的效果如何？—— WebP 技術實踐分享

做者 | Jackson
編輯 | 尾尾

不管是 PC 仍是移動端，圖片一直佔據着頁面流量的大頭，在圖片的大小和質量之間如何權衡，成爲了長期困擾開發者們的問題。而 WebP 技術的出現，爲解決該問題提供了好的方案。本文將爲你們詳細介紹 WebP 技術，同時也會分享該技術在 MIP 項目)中的實踐。

1、什麼是 WebP ？

WebP 是由 Google 收購 On2 Technologies 後發展出來的圖片格式，以BSD受權條款發佈。目前已經在不一樣廠商之間進行了嘗試，如Google、Facebook、ebay、百度、騰訊、淘寶等。

2、爲何選擇 WebP？

1. WebP 的優點

WebP 在支持有損、無損、透明圖片壓縮的同時，大大減小了圖片的體積。據統計，WebP 無損壓縮後比 PNG 圖片體積減小了 26%，有損圖片比同類 JPEG 圖像體積減小了 25%~34%，下面總結 WebP 在不一樣指標上所能得到的提高對比。

（1）體積和流量方面

根據業界給出的改造數據可知，改造 WebP 以後圖片體積會下降不少，具體可參照 WebP 體積測試連接，同時也可參照下圖。

圖片

在 MIP 項目)中，經過咱們的本地測試得到的數據以下圖所示。

圖片

從以上測試可知，若是將體積換算成帶寬，WebP 不一樣模式下都會節省大量流量。科技博客 Gig‍‍‍aOM 曾報道，谷歌的 Chrome 網上應用商店採用 WebP 格式圖片後，天天能夠節省幾 TB 的帶寬；Google+ 移動應用採用 WebP 圖片格式後，天天節省了 50TB 數據存儲空間。

（2）速度方面

圖片的加載速度還要取決於網絡時間，因此咱們沒有測試肯定的數據，不過能夠參考業界的數據：科技博客 Gig‍‍‍aOM 曾報道，YouTube 的視頻略縮圖採用 WebP 格式後，網頁加載速度提高了 10%；谷歌的 Chrome 網上應用商店採用 WebP 格式圖片後，頁面平均加載時間大約減小 1/3。

2. 兼容性

目前來講，WebP 的支持程度也在不斷上升，據 2017年10月12日在 can i use 上的查詢顯示，全球 WebP 的支持程度已經達到 73.64%，以下圖所示。

WebP 支持程度圖解

而也正是由於這種自然的圖片體積優點和發展趨勢，MIP 團隊也決定進行初步的實踐嘗試，以提高頁面用戶體驗。

3、WebP 實踐經驗

1. 如何判斷瀏覽器支持程度？

WebP 的判斷方法在官方文檔中進行了總結，大體分爲 HTML5 picture、嗅探和Request Header三種方式，下面展開介紹這三種方式。

（1）HTML5 picture

這種方法不進行 WebP 支持程度的判斷，而是利用 html5 picture 元素的特性，容許開發者列舉出多個圖片地址，瀏覽器根據順序展現出第一個可以展示的圖片元素，如

<picture>
    <source type="image/webp" srcset="images/webp.webp">
    <img src="images/webp.jpg" alt="webp image">
</picture>複製代碼

上面的示例在瀏覽器不支持 WebP 圖片的狀況下自動回退到 jpg 格式進行展現，但 picture 的支持程度還不是很完善，開發者能夠根據需求決定是否進行使用。

圖片

（2）嗅探

嗅探的方式是指直接向瀏覽器中插入一段 base64 的 WebP 圖片，檢測圖片是否可以正常加載，依據該方法進而判斷支持程度，如官方給出的嗅探函數：

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}複製代碼

其中包含了對有損、無損、透明圖、動圖等 WebP 圖片的嗅探，這是一種最爲保險的方法。不過缺點也很明顯，在圖片類型不一且量級較大的狀況下，前端並不能知道哪些圖片是有損，無損，亦或是透明的，也沒有辦法對其中一種特定類型作特定策略，因此即便知道不支持該類型的 WebP，然而咱們也沒有辦法主觀的去作容錯。因此這種方法只適合於圖片類型單一的狀況，如開發者知道全部圖片都是有損的，或是動圖等，有針對性的去處理。

同時在處理的過程當中，爲了提升嗅探效率，嗅探以後能夠將結果以本地存儲的方式進行保存，如cookie ，方便下次直接進行調用。

（3）Request Header

這種方式是較爲符合標準的解決方案，瀏覽器在支持 WebP 圖片格式的狀況下，會在請求的 http header accept 中攜帶 webp/image 的字段，後端接收到請求以後能夠按照該形式來判斷是否返回 WebP 圖片內容。

MIP 在實踐中採用的是該方法，當用戶訪問 MIP Cache 上的頁面時，不須要開發者替換圖片，MIP Cache 根據 http header 自動決定是否返回 WebP 圖片內容。

不過這個過程也依然有坑——國內瀏覽器層出不羣，大部分都向標準化的方向靠近，但仍然須要必定的時間來跟進。因此，在實踐過程當中咱們就發現了這樣的問題：雖然 http header accept 中包含了 webp/image 的字段，但其實是不支持 WebP 格式的（華爲 MT7 自帶瀏覽器），具體體如今動圖（animation）的 feature 上。而相應的解決方案其實也很簡單，就是在 WebP 圖片加載失敗後發起原圖請求，讓圖片可以正確的展現在頁面上，具體方式是經過 img onerror 函數執行對應邏輯。

2. WebP轉換工具

WebP 的轉換工具不少，主要包含了命令行和可視化界面兩種：

（1）命令行

官方對於每一種 WebP 格式也分別提供了對應的轉換工具，主要包含了cwebp、dwebp、vwebp、webpmux、gif2webp 等幾種，開發者能夠擇優選擇。

（2）可視化

頁面也提供了不一樣可視化的軟件進行 WebP 格式圖片轉換，如：iSparta。

4、總結

WebP 做爲一種新型圖片格式，不但可以節省流量，減小圖片體積，必定程度上也能夠優化用戶體驗。MIP 項目對於 WebP 支持目前已上線，你們能夠瀏覽 MIP 頁面進行體驗。同時做爲關注速度優化的 MIP 團隊，咱們將不斷迭代前行，致力於打造極致的用戶體驗。