都說 WebP 厲害，究竟厲害在哪裏？

時間 2020-09-10

標籤都說 webp 厲害究竟哪裏简体版

原文原文鏈接

以前在《 WebP 的前世此生》一文中，介紹了 WebP 圖片格式是由 Google 基於 VP8 視頻編碼格式研發的，同時提供有損壓縮和無損壓縮兩種格式，那麼今天就來看看 WebP 有損壓縮與無損壓縮的具體技術細節。html

WebP 有損壓縮

WebP 有損壓縮使用的圖像編碼方式與 VP8 視頻編解碼器 WebM 格式壓縮視頻關鍵幀的方法相同，WebP 格式的圖片本質就是 WebM 文件中被壓縮的幀。git

進行有損壓縮時，WebP 會將圖片劃分爲兩個 8x8 色度像素宏塊和一個 16x16 亮度像素宏塊。在每一個宏塊內，編碼器基於以前處理的宏塊來預測冗餘動做和顏色信息。經過圖像關鍵幀運算，使用宏塊中已解碼的像素來繪製圖像中未知部分，從而去除冗餘數據，實現更高效的壓縮。github

WebP 編碼器四種幀內預測模式：web

H_PRED（水平預測）：用宏塊左邊的列 L 的填充塊的每一列；
V_PRED（垂直預測）：用宏塊上邊的行 A 的填充宏塊的每一行；
DC_PRED（DC預測）：用行 A 和列 L 的像素的平均值做爲宏塊惟一的值來填充宏塊；
TM_PRED（TrueMotion預測）：除了行 A 和列 L 以外，用宏塊上方和左側的像素P、A（從P開始）中像素塊之間的水平差別以列 L 爲基準拓展每一行。

△ WebP 有損壓縮預測模式算法

當圖片處理到此處時，還剩下小的殘差，經過 FDCT （正向離散餘弦變換），讓變換後的數據低頻部分分佈在數據塊左上方，而高頻部分集中於右下方實現更高效的壓縮。瀏覽器

最後是將結果量化並進行熵編碼。WebP 使用的是布爾算術編碼做爲熵編碼方式，直接把輸入的消息編碼爲一個知足(0.0 ≤ n < 1.0)的小數n。緩存

△ WebP有損壓縮所涉及的步驟性能

△ JPG vs 有損 WebP優化

當 WebP 將 JPG 壓縮到至關於原圖 90% 質量時，圖片體積減小了 50% 左右。當 WebP 將 JPG 壓縮到至關於原圖 80% 質量時，圖片體積則減小了 60%~80%。網站

有損 WebP 壓縮性能優於 JPG 的緣由主要是其預測編碼技術先進，而且宏塊自適應量化也帶來了壓縮效率的提高，而布爾算術編碼與霍夫曼編碼相比提高了 5%~10% 的壓縮性能。

WebP 無損壓縮採用了預測變換、顏色變換、減去綠色變換、彩色緩存編碼、LZ77 反向參考等不一樣技術來處理圖像，以後對變換圖像數據和參數進行熵編碼。下文將對 WebP 的技術點進行一一解析：

預測空間變換經過利用相鄰像素的數據相關性減小熵。在預測變換中，對已解碼的像素預測當前像素值，而且僅對差值（實際預測）進行編碼。預測變換有 13 種不一樣的模式，使用較多的是左、上、左上以及右上的像素預測模式，其他爲左、上、左上和右上組合的平均值預測模式。

藉助顏色變換去除每一個像素的 R，G 和 B 值。彩色變換時保持綠色（G）值原樣，根據綠色（G）值變換紅色（R）值，再根據綠色值轉換藍色（B）值，最後根據紅色（R）值進行轉換。

若是與預測變換的狀況同樣，就須要將圖像劃分爲宏塊，而且對於宏塊中的全部像素使用相同的變換模式。變換模式分爲 3 種：green_to_red，green_to_blue和red_to_blue。

「減去綠色變換」從每一個像素的紅色、藍色值中減去綠色值。當此變換存在時，解碼器須要將綠色值添加到紅色和藍色。

無損 WebP 壓縮使用已經看到的圖像片斷來重構新的像素。若是沒有找到對應的匹配值，可使用本地調色板，同時本地調色板也會不斷更新最近使用的顏色。

△ 更新本地色彩緩存

△ PNG 原圖、PNG 無損、 WebP 無損對比（資料來源：http://isparta.github.io/compare-webp/#12345）

上圖是 PNG 原圖與 WebP 無損的對比，WebP 無損對 PNG 圖片的優化到達了 20%~40% 。

△ 各圖片格式功能對比

目前 WebP 圖片格式依託於其優異的圖片壓縮性能以及兼備無損和有損兩種壓縮算法，在各大網站和 App 獲得普及，那麼要如何在網站中開啓 WebP 格式呢？

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

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

參考文章：

WebP原理和Android支持現狀介紹：https://zhuanlan.zhihu.com/p/23648251