WebP 的前世今生

又拍雲發表於2017-11-08

除了視訊,圖片佔據了 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 厲害,究竟厲害在哪裡?

相關文章