作者 | 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%，如下圖所示。

而也正是因為這種天然的圖片體積優勢和發展趨勢，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 團隊，我們將不斷迭代前行，致力于打造極致的用戶體驗。