作者 | 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 團隊，我們將不斷迭代前行，致力于打造極致的用戶體驗。
