WebP是什么格式？

在看圖為王的互聯(lián)網(wǎng)世界里，圖片的壓縮算法極大提升了用戶的體驗(yàn)，優(yōu)秀的壓縮算法可以用更小的文件尺寸存儲高質(zhì)量的圖片信息，讓用戶可以秒開圖片；對于服務(wù)商而言，更小的文件尺寸可以節(jié)省更多的帶寬成本，為自己創(chuàng)造更大的利潤。所以改進(jìn)圖片壓縮算法一直都是互聯(lián)網(wǎng)巨頭技術(shù)團(tuán)隊(duì)的努力的方向。當(dāng)前jpeg、gif、png三大圖片格式占據(jù)了絕大多數(shù)的網(wǎng)絡(luò)流量，也被各大平臺廣泛接受，但這三種格式的確立已經(jīng)有些年頭，本身可以優(yōu)化的空間已經(jīng)不大，互聯(lián)網(wǎng)需要一種更好的格式。

WebP緣來及發(fā)展過程

WebP （發(fā)音weppy)的誕生是因?yàn)樽畛?Google 開發(fā)了一種基于 VP8 視頻編碼格式的 WebM 視頻格式，Google 的工程師意識到 WebM 格式非常適合壓縮關(guān)鍵幀，由此開發(fā)了 WebP 圖片格式。WebP 集合了多種圖片文件格式的特點(diǎn)，它像 JPEG 一樣適合壓縮照片和其他細(xì)節(jié)豐富的圖片，像 GIF 一樣可以顯示動態(tài)圖片，像 PNG 一樣支持透明圖像。根據(jù) Google 的測試，WebP 無損壓縮圖片比 PNG 圖片少了 45％ 的文件體積，即使這些 PNG 圖片在使用 pngcrush 和 PNGOUT 處理后，WebP 依舊可以減少 28％ 的文件體積。

WebP發(fā)布之后，最初用在Chrome Web Store。根據(jù)Google團(tuán)隊(duì)的介紹，在使用了WebP 后整個網(wǎng)站圖片的大小平均減少 30%，相當(dāng)于每天節(jié)省了數(shù) TB的帶寬，同時網(wǎng)頁加載速度提升了10%！隨后谷歌系的 Play Store 、YouTube等平臺開始大規(guī)模應(yīng)用 WebP 。有了谷歌系的成熟經(jīng)驗(yàn)，Netflix、Facebook、Tinder、Ebay等公司也紛紛轉(zhuǎn)向WebP，在國內(nèi)騰訊、淘寶、美團(tuán)等大流量平臺也選擇了WebP提升自身應(yīng)用的體驗(yàn)，騰訊還在WebP基礎(chǔ)之上做了優(yōu)化，開放出了sharpP格式，算是國內(nèi)技術(shù)團(tuán)隊(duì)的微創(chuàng)新吧。

WebP原理

WebP圖片格式支持支持靜態(tài)和動態(tài)圖片，同時提供有損壓縮和無損壓縮兩種方式。

WebP有損壓縮原理

有損 WebP 壓縮使用的圖像編碼方式與 VP8 視頻編解碼器中壓縮視頻關(guān)鍵幀的方法相同。利用圖像已編碼部分預(yù)測未編碼部分，將圖像細(xì)分來進(jìn)行預(yù)測處理，分塊越細(xì)預(yù)測越準(zhǔn)確。獲取編碼數(shù)值后將原圖像數(shù)據(jù)減去預(yù)測數(shù)據(jù)得到差值，僅對差值進(jìn)行編碼，以此控制大??；進(jìn)行有損壓縮時，WebP 會將圖片劃分為兩個 8x8 色度像素宏塊和一個 16x16 亮度像素宏塊。在每個宏塊內(nèi)，編碼器基于之前處理的宏塊來預(yù)測冗余動作和顏色信息。通過圖像關(guān)鍵幀運(yùn)算，使用宏塊中已解碼的像素來繪制圖像中未知部分，從而去除冗余數(shù)據(jù)，實(shí)現(xiàn)更高效的壓縮。

WebP 編碼器四種幀內(nèi)預(yù)測模式：

H_PRED（水平預(yù)測）：用宏塊左邊的列 L 的填充塊的每一列；
V_PRED（垂直預(yù)測）：用宏塊上邊的行 A 的填充宏塊的每一行；
DC_PRED（DC預(yù)測）：用行 A 和列 L 的像素的平均值作為宏塊唯一的值來填充宏塊；
TM_PRED（TrueMotion預(yù)測）：除了行 A 和列 L 之外，用宏塊上方和左側(cè)的像素P、A（從P開始）中像素塊之間的水平差異以列 L 為基準(zhǔn)拓展每一行。

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

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

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

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

WebP無損壓縮原理

WebP無損壓縮采用了預(yù)測變換、顏色變換、減去綠色變換、彩色緩存編碼、LZ77 反向參考等不同技術(shù)來處理圖像，之后對變換圖像數(shù)據(jù)和參數(shù)進(jìn)行熵編碼。

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

顏色變換 ：借助顏色變換去除每個像素的 R，G 和 B 值。彩色變換時保持綠色（G）值原樣，根據(jù)綠色（G）值變換紅色（R）值，再根據(jù)綠色值轉(zhuǎn)換藍(lán)色（B）值，最后根據(jù)紅色（R）值進(jìn)行轉(zhuǎn)換。如果與預(yù)測變換的情況一樣，就需要將圖像劃分為宏塊，并且對于宏塊中的所有像素使用相同的變換模式。變換模式分為 3 種：green_to_red，green_to_blue和red_to_blue。

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

彩色緩存編碼 ：無損 WebP 壓縮使用已經(jīng)看到的圖像片段來重構(gòu)新的像素。如果沒有找到對應(yīng)的匹配值，可以使用本地調(diào)色板，同時本地調(diào)色板也會不斷更新最近使用的顏色。

如何在項(xiàng)目中使用WebP

BS結(jié)構(gòu)應(yīng)用下使用WebP

caniuse.com提供的數(shù)據(jù)表明，截止2019年已經(jīng)有80.87%的瀏覽器版本支持WebP，具體支持情況如下：

為了可以讓所有的瀏覽器下都能正常顯示圖片，我們需要做一些兼容性處理：

方案一：前端LazyLoad方式

采用JavaScript能力檢測的方式來加載WebP圖片，通常的做法是通過圖片懶加載的方式來完成。主要流程如下：

頁面加載會很快，無需等待圖片加載。之后，javascript代碼會動態(tài)地更新圖片標(biāo)簽，根據(jù)瀏覽器支持WebP格式與否，動態(tài)生成WebP圖像或JPG圖像鏈接。

方案二：服務(wù)端PageSpeed自動轉(zhuǎn)換模塊

Google開發(fā)的PageSpeed模塊有一個功能，會自動將圖像轉(zhuǎn)換成WebP格式或者是瀏覽器所支持的其它格式。
以nginx為例，它的設(shè)置很簡單。
首先在http模塊開啟pagespeed屬性。

pagespeed on;
pagespeed FileCachePath “/var/cache/ngx_pagespeed/”;

然后在你的主機(jī)配置添加如下一行代碼，就能啟用這個特性。
pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;

CS結(jié)構(gòu)/APP下使用WebP

Google的Android平臺（包括基于Android開發(fā)的應(yīng)用）下完全支持WebP的使用，但在Windows、IOS下并沒有得到完全的支持，如果需要這兩個平臺下使用WebP必須下載必要的組件庫。

Windows，Google已開發(fā)了大量實(shí)用的命令行將圖像轉(zhuǎn)換為 WebP，每個人都可以從Google開發(fā)者網(wǎng)站下載使用，同時也可以使用WebP Codec for Windows在文件夾中查看WebP文件。

Mac OS，可以使用homebrew來安裝實(shí)用程序，通過使用 cwebp 將 JPEG 或 PNG 圖像轉(zhuǎn)換成 WebP 格式。

IOS，SDWebImage（支持 WebP）安裝內(nèi)置了libwebp源碼庫，并在UIImage+WebP.h中封裝了WebP格式的解碼功能。通過 SDWebImage的常規(guī)用法即可展示W(wǎng)ebP 格式的圖片。

Photoshop，Adobe也提供了WebP插件，方便讓用戶在Photoshop上打開、編輯修改、轉(zhuǎn)換WebP格式文件的工具，用戶無需再安裝其他WebP格式文件查看和轉(zhuǎn)換工具。

WebP的缺陷

WebP并沒有獲得所有系統(tǒng)平臺的支持，如果用戶需要下載圖片，在本地查看、編輯和打印圖片時，常常會面臨無法打開圖片的窘境。

另外，就WebP的原理上而言，相較編碼JPEG文件，WebP的編碼速度慢10倍，解碼速度慢1.5倍。這就意味著編碼同樣質(zhì)量的WebP文件需要占用更多的計(jì)算資源，從而增加服務(wù)器的負(fù)擔(dān)。