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

BrilliantOpenWeb發表於2017-10-19
Web

作者 | Jackson
編輯 | 尾尾

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

一、什麼是 WebP ？

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

二、為什麼選擇 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 支援程度圖解
WebP 支援程度圖解

而也正是因為這種天然的圖片體積優勢和發展趨勢，MIP 團隊也決定進行初步的實踐嘗試，以提升頁面使用者體驗。

三、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。

四、總結

WebP 作為一種新型圖片格式，不但能夠節省流量，減少圖片體積，一定程度上也可以優化使用者體驗。MIP 專案對於 WebP 支援目前已上線，大家可以瀏覽 MIP 頁面進行體驗。同時作為關注速度優化的 MIP 團隊，我們將不斷迭代前行，致力於打造極致的使用者體驗。

相關文章