1. 程式人生 > >WebP 的前世今生

WebP 的前世今生

視頻格式 也有 同時 無損壓縮 得到 閱讀 大小 firefox 並且

除了視頻,圖片占據了 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 厲害,究竟厲害在哪裏?

WebP 的前世今生