WebP是什么格式？

在看(kan)圖(tu)為王(wang)的(de)(de)(de)互(hu)(hu)聯網世界里，圖(tu)片(pian)(pian)的(de)(de)(de)壓(ya)縮(suo)算(suan)法(fa)極大提升了用戶的(de)(de)(de)體(ti)驗(yan)，優(you)(you)秀的(de)(de)(de)壓(ya)縮(suo)算(suan)法(fa)可以(yi)(yi)用更(geng)(geng)(geng)小的(de)(de)(de)文(wen)件(jian)尺(chi)寸存儲高質量的(de)(de)(de)圖(tu)片(pian)(pian)信息(xi)，讓用戶可以(yi)(yi)秒開圖(tu)片(pian)(pian)；對于服務商(shang)而(er)言，更(geng)(geng)(geng)小的(de)(de)(de)文(wen)件(jian)尺(chi)寸可以(yi)(yi)節(jie)省更(geng)(geng)(geng)多的(de)(de)(de)帶寬成本，為自己(ji)創造(zao)更(geng)(geng)(geng)大的(de)(de)(de)利潤。所以(yi)(yi)改進圖(tu)片(pian)(pian)壓(ya)縮(suo)算(suan)法(fa)一直都是互(hu)(hu)聯網巨頭技術團隊的(de)(de)(de)努力的(de)(de)(de)方向(xiang)。當前jpeg、gif、png三(san)大圖(tu)片(pian)(pian)格(ge)式(shi)(shi)占據(ju)了絕(jue)大多數的(de)(de)(de)網絡流量，也被各大平臺廣泛(fan)接受，但這(zhe)三(san)種格(ge)式(shi)(shi)的(de)(de)(de)確(que)立已經有些年頭，本身可以(yi)(yi)優(you)(you)化的(de)(de)(de)空間已經不大，互(hu)(hu)聯網需要一種更(geng)(geng)(geng)好(hao)的(de)(de)(de)格(ge)式(shi)(shi)。

WebP緣來及發展過程

WebP （發音weppy)的(de)誕(dan)生(sheng)是因為最(zui)初 Google 開(kai)發了(le)一(yi)種基于 VP8 視頻編碼(ma)格(ge)式(shi)的(de) WebM 視頻格(ge)式(shi)，Google 的(de)工程師意(yi)識到 WebM 格(ge)式(shi)非常(chang)適(shi)合(he)壓(ya)縮(suo)(suo)(suo)關鍵幀，由此開(kai)發了(le) WebP 圖(tu)片(pian)(pian)格(ge)式(shi)。WebP 集合(he)了(le)多(duo)種圖(tu)片(pian)(pian)文件(jian)(jian)(jian)格(ge)式(shi)的(de)特點，它像(xiang) JPEG 一(yi)樣適(shi)合(he)壓(ya)縮(suo)(suo)(suo)照片(pian)(pian)和(he)其(qi)他細(xi)節(jie)豐富的(de)圖(tu)片(pian)(pian)，像(xiang) GIF 一(yi)樣可(ke)以顯示動態圖(tu)片(pian)(pian)，像(xiang) PNG 一(yi)樣支持透明(ming)圖(tu)像(xiang)。根據 Google 的(de)測試，WebP 無(wu)損(sun)壓(ya)縮(suo)(suo)(suo)圖(tu)片(pian)(pian)比 PNG 圖(tu)片(pian)(pian)少(shao)(shao)了(le) 45％ 的(de)文件(jian)(jian)(jian)體積，即使這些(xie) PNG 圖(tu)片(pian)(pian)在使用 pngcrush 和(he) PNGOUT 處理(li)后，WebP 依(yi)舊可(ke)以減少(shao)(shao) 28％ 的(de)文件(jian)(jian)(jian)體積。

WebP發布之(zhi)后，最初用在(zai)Chrome Web Store。根(gen)據Google團隊的(de)介紹(shao)，在(zai)使用了(le)(le)WebP 后整個(ge)網站圖片的(de)大小平均減少 30%，相當于每天節省了(le)(le)數 TB的(de)帶寬(kuan)，同(tong)時網頁加載速度提升了(le)(le)10%！隨后谷歌(ge)系的(de) Play Store 、YouTube等(deng)平臺(tai)開(kai)始大規模應用 WebP 。有了(le)(le)谷歌(ge)系的(de)成(cheng)熟經驗(yan)，Netflix、Facebook、Tinder、Ebay等(deng)公司也紛(fen)紛(fen)轉向WebP，在(zai)國(guo)(guo)內(nei)(nei)騰訊、淘(tao)寶、美(mei)團等(deng)大流(liu)量平臺(tai)也選擇了(le)(le)WebP提升自身應用的(de)體驗(yan)，騰訊還在(zai)WebP基礎之(zhi)上做了(le)(le)優化，開(kai)放出了(le)(le)sharpP格式，算是國(guo)(guo)內(nei)(nei)技(ji)術團隊的(de)微創新(xin)吧(ba)。

WebP原理

WebP圖片(pian)格式(shi)支持(chi)支持(chi)靜態和動態圖片(pian)，同時(shi)提供有損(sun)壓縮和無損(sun)壓縮兩(liang)種方式(shi)。

WebP有損壓縮原理

有(you)損(sun) WebP 壓(ya)縮(suo)(suo)使(shi)用的(de)(de)圖(tu)(tu)(tu)(tu)像(xiang)編(bian)碼(ma)(ma)(ma)(ma)方式與 VP8 視頻編(bian)解(jie)碼(ma)(ma)(ma)(ma)器中壓(ya)縮(suo)(suo)視頻關(guan)鍵幀的(de)(de)方法相同。利(li)用圖(tu)(tu)(tu)(tu)像(xiang)已編(bian)碼(ma)(ma)(ma)(ma)部分(fen)(fen)(fen)預(yu)測未(wei)(wei)編(bian)碼(ma)(ma)(ma)(ma)部分(fen)(fen)(fen)，將圖(tu)(tu)(tu)(tu)像(xiang)細分(fen)(fen)(fen)來(lai)進行預(yu)測處(chu)理，分(fen)(fen)(fen)塊(kuai)(kuai)越(yue)細預(yu)測越(yue)準確。獲取編(bian)碼(ma)(ma)(ma)(ma)數值(zhi)后(hou)將原圖(tu)(tu)(tu)(tu)像(xiang)數據減去(qu)(qu)預(yu)測數據得到差值(zhi)，僅對差值(zhi)進行編(bian)碼(ma)(ma)(ma)(ma)，以此控制大小；進行有(you)損(sun)壓(ya)縮(suo)(suo)時，WebP 會將圖(tu)(tu)(tu)(tu)片劃分(fen)(fen)(fen)為兩個(ge) 8x8 色度像(xiang)素宏(hong)塊(kuai)(kuai)和(he)一個(ge) 16x16 亮度像(xiang)素宏(hong)塊(kuai)(kuai)。在每個(ge)宏(hong)塊(kuai)(kuai)內，編(bian)碼(ma)(ma)(ma)(ma)器基于之前(qian)處(chu)理的(de)(de)宏(hong)塊(kuai)(kuai)來(lai)預(yu)測冗余(yu)動(dong)作和(he)顏色信息(xi)。通(tong)過(guo)圖(tu)(tu)(tu)(tu)像(xiang)關(guan)鍵幀運算，使(shi)用宏(hong)塊(kuai)(kuai)中已解(jie)碼(ma)(ma)(ma)(ma)的(de)(de)像(xiang)素來(lai)繪制圖(tu)(tu)(tu)(tu)像(xiang)中未(wei)(wei)知部分(fen)(fen)(fen)，從(cong)而去(qu)(qu)除冗余(yu)數據，實現更(geng)高(gao)效的(de)(de)壓(ya)縮(suo)(suo)。

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

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

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

最后是(shi)將結(jie)果量(liang)化并進行熵(shang)編(bian)碼(ma)。WebP 使用的(de)是(shi)布爾算術編(bian)碼(ma)作(zuo)為(wei)(wei)熵(shang)編(bian)碼(ma)方式，直接把輸(shu)入的(de)消息編(bian)碼(ma)為(wei)(wei)一(yi)個(ge)滿(man)足(zu)(0.0 ≤ n < 1.0)的(de)小數n。

當(dang) WebP 將(jiang) JPG 壓縮(suo)(suo)到(dao)(dao)相(xiang)當(dang)于原圖(tu) 90% 質(zhi)(zhi)量 時(shi)，圖(tu)片體積(ji)減少了 50% 左右。當(dang) WebP 將(jiang) JPG 壓縮(suo)(suo)到(dao)(dao)相(xiang)當(dang)于原圖(tu) 80% 質(zhi)(zhi)量時(shi)，圖(tu)片體積(ji)則減少了 60%~80%。

有(you)損(sun) WebP 壓(ya)縮性能優(you)于(yu) JPG 的(de)原因主要是(shi)其(qi)預測編碼(ma)技術先(xian)進，并且宏塊(kuai)自適應量化也(ye)帶(dai)來了壓(ya)縮效(xiao)率(lv)的(de)提升，而布(bu)爾算術編碼(ma)與霍夫曼編碼(ma)相比提升了 5%~10% 的(de)壓(ya)縮性能。

WebP無損壓縮原理

WebP無損壓縮采用了預測(ce)變(bian)(bian)換、顏(yan)色(se)變(bian)(bian)換、減去(qu)綠色(se)變(bian)(bian)換、彩色(se)緩(huan)存編碼、LZ77 反(fan)向(xiang)參考等不同(tong)技術來處理圖像(xiang)，之后對變(bian)(bian)換圖像(xiang)數據和(he)參數進行(xing)熵編碼。

預測變換 ：預測(ce)空間變(bian)換通過利用相鄰像素的數(shu)據相關(guan)性減(jian)少熵(shang)。在預測(ce)變(bian)換中，對已(yi)解(jie)碼(ma)的像素預測(ce)當前像素值(zhi)，并(bing)且僅(jin)對差值(zhi)（實際預測(ce)）進(jin)行編碼(ma)。預測(ce)變(bian)換有 13 種(zhong)不同的模(mo)式(shi)(shi)，使用較(jiao)多的是左(zuo)(zuo)、上、左(zuo)(zuo)上以及右上的像素預測(ce)模(mo)式(shi)(shi)，其余為左(zuo)(zuo)、上、左(zuo)(zuo)上和右上組合(he)的平均(jun)值(zhi)預測(ce)模(mo)式(shi)(shi)。

顏色變換 ：借助(zhu)顏色(se)變(bian)換(huan)(huan)去除每個像(xiang)(xiang)素(su)的 R，G 和(he) B 值(zhi)(zhi)(zhi)。彩色(se)變(bian)換(huan)(huan)時保持綠(lv)色(se)（G）值(zhi)(zhi)(zhi)原樣，根(gen)(gen)據(ju)綠(lv)色(se)（G）值(zhi)(zhi)(zhi)變(bian)換(huan)(huan)紅(hong)色(se)（R）值(zhi)(zhi)(zhi)，再根(gen)(gen)據(ju)綠(lv)色(se)值(zhi)(zhi)(zhi)轉換(huan)(huan)藍(lan)色(se)（B）值(zhi)(zhi)(zhi)，最后根(gen)(gen)據(ju)紅(hong)色(se)（R）值(zhi)(zhi)(zhi)進行轉換(huan)(huan)。如果與預測變(bian)換(huan)(huan)的情(qing)況(kuang)一(yi)樣，就需要(yao)將(jiang)圖像(xiang)(xiang)劃分(fen)為宏塊(kuai)，并且對于宏塊(kuai)中的所有像(xiang)(xiang)素(su)使用相同的變(bian)換(huan)(huan)模式。變(bian)換(huan)(huan)模式分(fen)為 3 種：green_to_red，green_to_blue和(he)red_to_blue。

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

彩色緩存編碼 ：無損 WebP 壓縮使(shi)用已經看到的(de)圖像(xiang)片段(duan)來重構新(xin)的(de)像(xiang)素。如果沒有找到對應(ying)的(de)匹(pi)配值，可以使(shi)用本地調色(se)(se)板(ban)，同時本地調色(se)(se)板(ban)也會不斷更新(xin)最近(jin)使(shi)用的(de)顏色(se)(se)。

如何在項目中使用WebP

BS結構應用下使用WebP

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

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

方案(an)一(yi)：前(qian)端LazyLoad方式

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

頁(ye)面加載(zai)會(hui)很快，無需等待圖(tu)(tu)片(pian)加載(zai)。之后(hou)，javascript代(dai)碼會(hui)動態地更新圖(tu)(tu)片(pian)標簽，根(gen)據瀏覽器支持WebP格式與否，動態生成WebP圖(tu)(tu)像或JPG圖(tu)(tu)像鏈接。

方案(an)二：服務端(duan)PageSpeed自(zi)動(dong)轉換模(mo)塊

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

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

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

CS結構/APP下使用WebP

Google的(de)Android平臺（包括基(ji)于Android開發的(de)應用(yong)(yong)）下完(wan)全支(zhi)持WebP的(de)使(shi)用(yong)(yong)，但在(zai)Windows、IOS下并沒有得到(dao)完(wan)全的(de)支(zhi)持，如果需要這兩(liang)個平臺下使(shi)用(yong)(yong)WebP必須下載必要的(de)組件庫。

Windows，Google已開發了大量(liang)實用的(de)命令(ling)行將圖像轉換(huan)為 WebP，每個(ge)人(ren)都可以從(cong)Google開發者網站下載使用，同時也可以使用WebP Codec for Windows在文(wen)件(jian)夾中查看WebP文(wen)件(jian)。

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

IOS，SDWebImage（支持 WebP）安裝內置(zhi)了(le)(le)libwebp源碼(ma)庫，并在UIImage+WebP.h中封裝了(le)(le)WebP格式(shi)(shi)的(de)解碼(ma)功能。通過(guo) SDWebImage的(de)常規用法即(ji)可(ke)展示WebP 格式(shi)(shi)的(de)圖片。

Photoshop，Adobe也提供(gong)了(le)WebP插(cha)件，方(fang)便讓用(yong)戶在Photoshop上打(da)開、編輯修改、轉(zhuan)換(huan)(huan)WebP格式文(wen)件的工具，用(yong)戶無需(xu)再安裝其他WebP格式文(wen)件查看(kan)和轉(zhuan)換(huan)(huan)工具。

WebP的缺陷

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

另外(wai)，就WebP的(de)(de)原理(li)上(shang)而言(yan)，相較(jiao)編碼(ma)(ma)JPEG文件，WebP的(de)(de)編碼(ma)(ma)速度慢(man)10倍，解碼(ma)(ma)速度慢(man)1.5倍。這就意味著編碼(ma)(ma)同(tong)樣質量的(de)(de)WebP文件需要占用更多的(de)(de)計算資源，從而增加服(fu)務器的(de)(de)負擔(dan)。