WebP 的前世此生

除了視頻，圖片佔據了 PC 和 App 的大部分流量，爲運營方帶來高額的成本支出，同時過多的圖片加載會影響到網站與 App 的加載速度。所以在保證圖片質量的前提下縮小圖片的體積就成了迫在眉睫的事情。

目前，傳統的圖片格式如 JPEG、PNG、GIF 等格式的圖片已經沒有太多能夠優化的空間，而 Google 推出 WebP 格式在圖片壓縮方面有了新的突破。

WebP 的誕生及原理

WebP 的誕生是由於最初 Google 開發了一種基於 VP8 視頻編碼格式的 WebM 視頻格式，Google 的工程師意識到 WebM 格式很是適合壓縮關鍵幀，由此開發了 WebP 圖片格式。

WebP 最初發佈於 2010 年，主要目標是使圖片質量和 JPEG 格式質量相同的狀況下，減小圖片文件的體積，籍此減小互聯網上圖片的發送時間和流量消耗。發佈不久以後，WebP 便被整合到 Chrome 以及 Android 系統中，而且 Google 發佈了函數庫，讓 iOS 應用等其餘工具支持 WebP 格式。

WebP 圖片格式派生自 VP8 視頻編碼，同時提供有損壓縮和無損壓縮：

• 有損 WebP 壓縮使用的圖像編碼方式與 VP8 視頻編解碼器中壓縮視頻關鍵幀的方法相同。利用圖像已編碼部分預測未編碼部分，將圖像細分來進行預測處理，分塊越細預測越準確。獲取編碼數值後將原圖像數據減去預測數據獲得差值，僅對差值進行編碼，以此控制大小；

• 無損 WebP 壓縮使用已知的圖像片斷來精確地重建新的像素，在沒法找到相應的匹配值的狀況下，使用本地調色板進行優化。

Webp使圖片體積減小45%

與其餘圖片格式相比，WebP 集合了多種圖片文件格式的特色。它像 JPEG 同樣適合壓縮照片和其餘細節豐富的圖片，像 GIF 同樣能夠顯示動態圖片，像 PNG 同樣支持透明圖像。根據 Google 的測試，WebP 無損壓縮圖片比 PNG 圖片少了 45％ 的文件體積，即便這些 PNG 圖片在使用 pngcrush 和 PNGOUT 處理後，WebP 依舊能夠減小 28％ 的文件體積。

△ WebP 圖片格式與其餘圖片格式對比

WebP 應用效果

隨着瀏覽器對 WebP 支持的普及，目前也有愈來愈多的互聯網開始使用 WebP，這裏分享幾個數據：

YouTube 的視頻略縮圖採用 WebP 後，網頁加載速度提高了 10%；

Google Chrome 應用商店採用 WebP 後，天天能夠節省幾 TB 的帶寬，頁面加載時間減小了30% 左右；

花瓣網在 2017 年 5 月開啓 WebP 後，在網站整體請求量沒有減小的狀況下，總體帶寬降低了近 50%。

WebP 格式兼容狀況

雖然 WebP 的使用給實際應用帶來了不少好處，且 Google Chrome 和 Opera 瀏覽器以及許多其餘工具和軟件庫都支持 WebP，可是到目前爲止也並不是全部瀏覽器都支持 WebP， IE、Edge、Firefox、Safari 就均未支持 WebP 格式。

△ WebP 支持的狀況

如何開啓 WebP 圖片格式

WebP 憑藉優異的圖片壓縮性能，以及兼備無損和有損兩種壓縮算法，迅速在各大網站、App 普及。那麼要如何在網站中開啓 WebP 格式呢？

△ 又拍雲控制檯 WebP 自適應開啓方式

又拍雲目前已經支持 WebP 圖片格式轉換，並且還支持 WebP 自適應功能。在又拍雲後臺一鍵開啓 WebP 自適應功能，便可經過 CDN 平臺智能判斷客戶端瀏覽器是否支持 WebP 解碼，若是支持則返回 WebP 格式圖片，若是不支持則會返回原圖，在客戶端以及源站無需任何改動。

 

參考文章：

WebP—維基百科 https://zh.wikipedia.org/wiki/WebP

A new image format for the Web https://developers.google.com/speed/webp/

 

相關閱讀：都說 WebP 厲害，究竟厲害在哪裏？