WebP 圖片格式是由 Google 基于 VP8 視頻編碼格式研發的，同時提供有損壓縮和無損壓縮兩種格式，那么今天就來看看 WebP 有損壓縮與無損壓縮的具體技術細節。

WebP 有損壓縮

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

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

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

• H_PRED（水平預測）：用宏塊左邊的列 L 的填充塊的每一列；

• V_PRED（垂直預測）：用宏塊上邊的行 A 的填充宏塊的每一行；

• DC_PRED（DC預測）：用行 A 和列 L 的像素的平均值作為宏塊唯一的值來填充宏塊；

• TM_PRED（TrueMotion預測）：除了行 A 和列 L 之外，用宏塊上方和左側的像素P、A（從P開始）中像素塊之間的水平差異以列 L 為基準拓展每一行。

image

△ WebP 有損壓縮預測模式

當圖片處理到此處時，還剩下小的殘差，通過 FDCT （正向離散余弦變換），讓變換后的數據低頻部分分布在數據塊左上方，而高頻部分集中于右下方實現更高效的壓縮。

最后是將結果量化并進行熵編碼。WebP 使用的是布爾算術編碼作為熵編碼方式，直接把輸入的消息編碼為一個滿足(0.0 ≤ n < 1.0)的小數n。

image

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

有損 WebP VS JPG

image

△ JPG vs 有損 WebP

當 WebP 將 JPG 壓縮到相當于原圖 90% 質量 時，圖片體積減少了 50% 左右。當 WebP 將 JPG 壓縮到相當于原圖 80% 質量時，圖片體積則減少了 60%~80%。

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

WebP 無損壓縮

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

預測變換

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

顏色變換

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

如果與預測變換的情況一樣，就需要將圖像劃分為宏塊，并且對于宏塊中的所有像素使用相同的變換模式。變換模式分為 3 種：green_to_red，green_to_blue和red_to_blue。

減去綠色變換

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

彩色緩存編碼

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

image

△ 更新本地色彩緩存

無損 WebP 對比 PNG

image

△ PNG 原圖、PNG 無損、 WebP 無損對比

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

WebP 與主流圖片格式功能對比

image

△ 各圖片格式功能對比

如何開啟 WebP 圖片格式

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

image

△ 又拍云控制臺 WebP 自適應開啟方式

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