WebP 圖片格式是由 Google 基于 VP8 視頻編碼格式研發(fā)的禀忆，同時(shí)提供有損壓縮和無(wú)損壓縮兩種格式，那么今天就來(lái)看看 WebP 有損壓縮與無(wú)損壓縮的具體技術(shù)細(xì)節(jié)愈涩。
WebP 有損壓縮
WebP 有損壓縮使用的圖像編碼方式與 VP8 視頻編解碼器 WebM 格式壓縮視頻關(guān)鍵幀的方法相同肠骆，WebP 格式的圖片本質(zhì)就是 WebM 文件中被壓縮的幀。
進(jìn)行有損壓縮時(shí)盔粹，WebP 會(huì)將圖片劃分為兩個(gè) 8x8 色度像素宏塊和一個(gè) 16x16 亮度像素宏塊隘梨。在每個(gè)宏塊內(nèi)，編碼器基于之前處理的宏塊來(lái)預(yù)測(cè)冗余動(dòng)作和顏色信息舷嗡。通過(guò)圖像關(guān)鍵幀運(yùn)算轴猎，使用宏塊中已解碼的像素來(lái)繪制圖像中未知部分，從而去除冗余數(shù)據(jù)进萄，實(shí)現(xiàn)更高效的壓縮捻脖。
WebP 編碼器四種幀內(nèi)預(yù)測(cè)模式：
H_PRED（水平預(yù)測(cè)）：用宏塊左邊的列 L 的填充塊的每一列锐峭；
V_PRED（垂直預(yù)測(cè)）：用宏塊上邊的行 A 的填充宏塊的每一行；
DC_PRED（DC預(yù)測(cè)）：用行 A 和列 L 的像素的平均值作為宏塊唯一的值來(lái)填充宏塊郎仆；
TM_PRED（TrueMotion預(yù)測(cè)）：除了行 A 和列 L 之外只祠，用宏塊上方和左側(cè)的像素P、A（從P開(kāi)始）中像素塊之間的水平差異以列 L 為基準(zhǔn)拓展每一行扰肌。
△ WebP 有損壓縮預(yù)測(cè)模式
當(dāng)圖片處理到此處時(shí)抛寝，還剩下小的殘差，通過(guò) FDCT （正向離散余弦變換）曙旭，讓變換后的數(shù)據(jù)低頻部分分布在數(shù)據(jù)塊左上方盗舰，而高頻部分集中于右下方實(shí)現(xiàn)更高效的壓縮。
最后是將結(jié)果量化并進(jìn)行熵編碼桂躏。WebP 使用的是布爾算術(shù)編碼作為熵編碼方式钻趋，直接把輸入的消息編碼為一個(gè)滿足(0.0 ≤ n < 1.0)的小數(shù)n。
△ WebP有損壓縮所涉及的步驟
有損 WebP VS JPG
△ JPG vs 有損 WebP
當(dāng) WebP 將 JPG 壓縮到相當(dāng)于原圖 90% 質(zhì)量 時(shí)剂习，圖片體積減少了 50% 左右蛮位。當(dāng) WebP 將 JPG 壓縮到相當(dāng)于原圖 80% 質(zhì)量時(shí)，圖片體積則減少了 60%~80%鳞绕。
有損 WebP 壓縮性能優(yōu)于 JPG 的原因主要是其預(yù)測(cè)編碼技術(shù)先進(jìn)失仁，并且宏塊自適應(yīng)量化也帶來(lái)了壓縮效率的提升，而布爾算術(shù)編碼與霍夫曼編碼相比提升了 5%~10% 的壓縮性能们何。
WebP 無(wú)損壓縮
WebP 無(wú)損壓縮采用了預(yù)測(cè)變換萄焦、顏色變換、減去綠色變換冤竹、彩色緩存編碼拂封、LZ77 反向參考等不同技術(shù)來(lái)處理圖像，之后對(duì)變換圖像數(shù)據(jù)和參數(shù)進(jìn)行熵編碼鹦蠕。下文將對(duì) WebP 的技術(shù)點(diǎn)進(jìn)行一 一解析：
預(yù)測(cè)變換
預(yù)測(cè)空間變換通過(guò)利用相鄰像素的數(shù)據(jù)相關(guān)性減少熵冒签。在預(yù)測(cè)變換中，對(duì)已解碼的像素預(yù)測(cè)當(dāng)前像素值片部，并且僅對(duì)差值（實(shí)際預(yù)測(cè)）進(jìn)行編碼镣衡。預(yù)測(cè)變換有 13 種不同的模式，使用較多的是左档悠、上廊鸥、左上以及右上的像素預(yù)測(cè)模式，其余為左辖所、上惰说、左上和右上組合的平均值預(yù)測(cè)模式。
顏色變換
借助顏色變換去除每個(gè)像素的 R缘回，G 和 B 值吆视。彩色變換時(shí)保持綠色（G）值原樣典挑，根據(jù)綠色（G）值變換紅色（R）值，再根據(jù)綠色值轉(zhuǎn)換藍(lán)色（B）值啦吧，最后根據(jù)紅色（R）值進(jìn)行轉(zhuǎn)換您觉。
如果與預(yù)測(cè)變換的情況一樣，就需要將圖像劃分為宏塊授滓，并且對(duì)于宏塊中的所有像素使用相同的變換模式琳水。變換模式分為 3 種：green_to_red，green_to_blue和red_to_blue般堆。
減去綠色變換
“減去綠色變換”從每個(gè)像素的紅色在孝、藍(lán)色值中減去綠色值。當(dāng)此變換存在時(shí)淮摔，解碼器需要將綠色值添加到紅色和藍(lán)色私沮。
彩色緩存編碼
無(wú)損 WebP 壓縮使用已經(jīng)看到的圖像片段來(lái)重構(gòu)新的像素。如果沒(méi)有找到對(duì)應(yīng)的匹配值和橙，可以使用本地調(diào)色板仔燕，同時(shí)本地調(diào)色板也會(huì)不斷更新最近使用的顏色。
△ 更新本地色彩緩存
無(wú)損 WebP 對(duì)比 PNG
△ PNG 原圖魔招、PNG 無(wú)損涨享、 WebP 無(wú)損對(duì)比
上圖是 PNG 原圖與 WebP 無(wú)損的對(duì)比，WebP 無(wú)損對(duì) PNG 圖片的優(yōu)化到達(dá)了 20%~40% 仆百。
WebP 與主流圖片格式功能對(duì)比
△ 各圖片格式功能對(duì)比
如何開(kāi)啟 WebP 圖片格式
目前 WebP 圖片格式依托于其優(yōu)異的圖片壓縮性能以及兼?zhèn)錈o(wú)損和有損兩種壓縮算法，在各大網(wǎng)站和 App 得到普及奔脐，那么要如何在網(wǎng)站中開(kāi)啟 WebP 格式呢俄周？
△ 又拍云控制臺(tái) WebP 自適應(yīng)開(kāi)啟方式
又拍云目前已經(jīng)支持 WebP 圖片格式轉(zhuǎn)換，而且還支持 WebP 自適應(yīng)功能髓迎，在后臺(tái)一鍵開(kāi)啟 WebP 自適應(yīng)功能峦朗，即可通過(guò) CDN 平臺(tái)智能判斷客戶端瀏覽器是否支持 WebP 解碼，如果支持則返回 WebP格式圖片排龄，如果不支持則會(huì)返回原圖波势，在客戶端以及源站無(wú)需任何改動(dòng)。
