WebP 原理和 Android 支持現狀介紹

本文主要對WebP現狀與原理進行整理,并尤其研究其動圖格式在Android上的支持情況。

1.原理

WebP的壓縮主要分為有損壓縮、無損壓縮以及有損帶透明通道壓縮。

1.1 有損WebP

有損WebP基于VP8視頻編碼中的預測編碼方法來壓縮圖像數據,其基本步驟類似于JPEG壓縮,主要包含格式轉換、分割子塊、預測編碼、FDCT、量化、Z排列、熵編碼,流程如下圖所示,紅色代表與JPEG不同的部分。

1) 格式轉換

若壓縮前圖像數據為RGB格式,則需先進行格式轉換成YUV格式,Y表示亮度分量,UV表示色度分量。之所以轉換成YUV格式是因為人類視覺對亮度遠比色度敏感,所以可通過適當減少色度數據的存儲來節省數據占用的空間,但卻不會對視覺效果造成太大影響,如可每兩個或四個相鄰的像素點才保存一對UV值。

2) 分割宏塊

接下來將數據分割成一個個8x8或16x16的宏塊。

3) 預測編碼

預測編碼的原理是基于前面編碼好的宏塊,預測多余的動作顏色等信息,屬于幀內預測。對各宏塊可使用以下幾種幀內預測模式:

  • H_PRED(horizontal prediction).使用block左邊的一列L來填充block中的每一列

  • V_PRED(vertical prediction):使用block上邊的一行A來填充block中的每一行

  • DC_PRED(DC prediction):使用L和A中所有像素的平均值作為唯一的值填充block

  • TM_PRED(TrueMotion prediction):使用漸進的方式,記錄上面一行的漸進差,以同樣的差值,以L為基準拓展每一行。

4) FDCT

FDCT(Forward Discrete Cosine Transform,正向離散余弦變換)是將一組空間域的像素點轉變成頻域中的系數,對每個宏塊執行FDCT,使得變換后數據的低頻部分分布在數據塊的左上方,高頻部分集中在右下方,其中左上角第一個系數稱為直流系數,其他均為交流系數。

5) 量化

量化是壓縮中損失數據的主要步驟,它主要原理是把經過DCT變換后的宏塊中每個數值除以量化表中對應的系數并取整。其中量化表中高頻部分對應的系數比低頻部分系數要大得多,則在經過量化后,高頻部分的頻率系數被大大衰減甚至許多被清零,而低頻部分的頻率系數則較好地被保留。由于人眼對低頻部分更敏感,所以經過量化后再還原成圖像對視覺效果影響較小,但數據得到有效的壓縮。量化的最終目的是減少低頻部分非零系數的幅值并增加高頻部分零值系數的數量。

6) Z排列

為更便于后續的編碼,需在編碼前對數據塊進行重新的排列,使得低頻部分的數據排在前面,高頻部分的數據排在后面,以增加數組中連續零值的數量,所以采用一種Z字型的排列方式。

7) DPCM

可用DPCM(Differential Pulse Code Modulation,差分脈沖編碼調制)對直流系數進行編碼。由于直流系數的數值較大,且相鄰數據塊的直流系數相差不大,所以可使用DPCM對相鄰數據塊間量化后的直流系數差值進行編碼,從而提高壓縮比。

8) 行程編碼

行程編碼是一種根據相同數據重復多次的情況簡化表示的算法,例如1111222222333按照行程編碼表示為(1,4)(2,6)(3,3)。由于量化后的交流系數中包含較多連續零值系數,因此可用行程編碼對它們進行編碼來有效壓縮數據長度。

9) 熵編碼

熵編碼是一種無損數據壓縮編碼方式,WebP中采用布爾算術編碼作為熵編碼方式。和其它熵編碼方法不同的地方在于,其他的熵編碼方法通常是把輸入的消息分割為符號,然后對每個符號進行編碼,而算術編碼是直接把整個輸入的消息編碼為一個數,一個滿足(0.0 ≤ n < 1.0)的小數n。消息越長,編碼表示它的間隔就越小,表示這一間隔所需的二進制位就越多。

10) 其他

WebP還有一些細節上的步驟,比如自適應分塊(對不同區域的宏塊分配不同的壓縮參數)、環路濾波等。

為什么有損WebP會比JPEG好?

  • 主要原因是預測編碼。

  • 自適應分塊也提供了較好表現。

  • 環路濾波在中、低比特率的情況下有較大幫助。

  • 算數編碼相比霍夫曼增強了5%~10%的壓縮能力。

1.2 無損WebP

無損WebP基于使用不同的技術對圖像數據進行轉換,包括:預測空間變換、色彩空間轉換、使用調色板、多像素打包成一個像素、alpha值替換等技術。對于熵編碼,則采用改進的LZ77-Huffman編碼來緊湊稀疏值,它是一種對距離值的2D編碼技術。

1.3 有損WebP(支持透明)

區別于有損WebP和無損WebP,這種編碼允許對RGB頻道的有損編碼同時可對透明度頻道進行無損編碼。由于這種形式目前其他的格式還未能提供,所以目前需要使用透明度的話都會使用無損的PNG,導致大小膨脹。對于這類圖片,WebP提供了較好的壓縮效果。相比有損的WebP,添加透明通道只增加22%的大小。

因此,將支持透明的PNG換成無損+支持透明的WEBP可以平均節省60%-70%大小,這個已經被一些含較多Icon的移動網站證明。

(如:https://github.com/EverythingMe/webp-test#readme

1.4 動態WebP

動態WebP的原理與GIF和APNG原理類似,每一幀記錄變化區域的坐標、長寬、播放延時等用于還原并播放。

2.文件結構

码报开奖结果本期 www.iwqgw.icu 一個WebP文件表示一個靜態圖片或動畫,并可選的包含透明度、色彩

配置文件和元數據等。

2.1 WebP文件首部



RIFF:ASCII字符RIFF。

File Size:文件大小,以字節為單位。

WEBP:ASCII字符WEBP,標識這是WebP文件

2.2 有損WebP簡要文件格式

這種文件格式支持有損編碼,但不包含透明度以及其他拓展特性,可以被許多舊版本軟件支持。



VP8 chunk:



Chunk Header:VP8塊首部,定義了VP8比特流數據的大小,以及該幀VP8數據的長寬等信息。

VP8 data:VP8比特流數據。

VP8比特流格式的定義可參考rfc6386,主要定義了如何將圖像數據轉換成YUV格式。https://tools.ietf.org/html/rfc6386

2.3無損WebP簡要文件格式

這種格式用在無損WebP編碼(可選透明)并且不要求拓展特性時。需要注意的是,較舊的WebP軟件可能不支持該格式。



VP8L chunk:



屬性意義類似于有損WebP的簡要格式,其中VP8L的定義可參考文檔:

https://chromium.googlesource.com/webm/libwebp/+/master/doc/webp-lossless-bitstream-spec.txt

2.4 拓展格式

拓展格式包括:

  • VP8X用于指明使用的特性

  • 可選的‘ICCP’用于色彩配置

  • 可選的‘ANIM’用于動畫控制

  • 可選的‘EXIF’用于EXIF元數據

  • 可選的‘XMP’用于XMP元數據

對于靜態圖像,圖像數據包含一幀數據,由以下組成:

  • 一個可選的透明度子chunk

  • 1個比特流子chunk

對于動態圖像,圖像數據則包含多幀數據。

拓展頭部格式:



ICC profile(I):置位時表示包含ICC配置文件。

Alpha(L):當圖像包含透明數據時置位。

EXIF metadata(E)當包含EXIF元數據時置位。

XMP metadata(X):當包含XMP元數據時置位。

Animation(A):動態WebP置位,此時ANIM和ANMF數據塊中的數據將會被使用來控制動畫。

Canvas Width Minus One:畫布的真實寬度是該數值+1。

Canvas Height Minus One:畫布的真實高度是該數值+1。

動畫

WebP動畫被ANIM和ANMF塊所控制。

ANIM Chunk:

對于一個動圖,該塊數據定義了動畫的全局參數。

Background Color: 定義畫布的背景顏色,以BGRA的順序存儲。這個顏色會被填充到每幀數據沒用到的區域。

LoopCount:循環次數,0表示無限循環。

當動畫標識被置位時,該數據塊必須出現。當動畫標識位沒出現時,該數據塊會被忽略。

ANMF chunk:

對于動圖,該數據塊包含了一幀圖像的數據。

Frame X:該幀數據左上角X坐標為該值*2。

Frame Y:該幀數據左上角Y坐標為該值*2。

Frame Duration: 播放該幀后的延時時間,以ms為單位。

Blending method (B):標識如何混用前面畫布的相應透明像素點。置0時,處理完前面一幀圖像后,使用透明混合。置1時,不混合,渲染時直接覆蓋矩形區域。

Disposal method (D):標識該幀數據在被顯示后如何處理畫布。置0時不處理;置1時將畫布矩形區域轉換成ANIM定義的背景顏色。

Frame Data:以2字節為單位,包含圖像比特流數據以及可選的透明度數據。

Alpha



Pre-processing (P): 標識壓縮中使用了預處理。

Filtering method (F): 濾波方法。0-無過濾;1-橫向過濾;2-垂直過濾;3-梯度過濾。

Compression method (C): 0-無壓縮;1-使用WebP無損格式壓縮。

Alpha bitstream:編碼的透明度比特流數據

顏色配置文件、元數據數據的文件格式類似,主要是頭部ASCII碼不同。







2.5 文件布局示例

帶透明有損WebP文件形如:



無損WebP形如:



無損WebP包含ICC配置文件和XMP元數據形如:



動態WebP包含EXIF元數據形如:



3.與其他格式比較

有損WebP vs JPEG:

谷歌使用Lenna、Kodak、Tecnick還有Image_crawl四個圖像來源來做實驗,在相同或稍高的SSIM基礎上,WebP相比JPEG體積降低25% ~ 34%。詳見:

https://developers.google.com/speed/webp/docs/webp_study



無損WebP 、有損帶透明WebP vs PNG

下圖是選取了1000張網絡中的PNG,對其進行壓縮后,與對應的無損WebP以及有損帶透明WebP比較??杉蟛糠滯計街諻ebP壓縮后均比PNG要小。



WebP的編碼時間較長,是PNG的5倍以上,但解碼速度與PNG差不多,甚至很多時候比PNG快。而WebP在編碼時占用內存比PNG高25%,解碼時比PNG低30%。

詳見:https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study

4.支持情況

在瀏覽器上的支持:



在終端上的支持:

對于在App中使用WebP,除了Android 4.0以上提供了靜態WebP原生支持外,其他版本和IOS都可以直接使用官方提供的解析庫來支持靜態WebP

Android:https://github.com/alexey-pelykh/webp-android-backport

iOS:https://github.com/carsonmcdonald/WebP-iOS-example

然而,對于動態WebP,目前只能找到facebook的開源庫Fresco對其支持,不過Fresco最低僅支持API 9,且引用的相關庫較多。

來源:CSDN


上一篇: [干貨]讓你徹底搞懂Context到底是什么,如果沒弄明白,還怎么做Android開發?

下一篇: Android 混淆從入門到精通

分享到: 更多
万人炸金花手机旧版 北京pk10怎样看号技巧 女篮亚洲杯决赛录像回放 时时彩怎么玩 21点手机游戏 星罗欢乐斗地主捕鱼版 广东快乐十分除3技巧 福建时时网上购买 三公棋牌app下载 快三有没有18期的长龙 胆拖中奖计算器十一选五复式投注表 赛车pk拾开奖走势图 北京pk10最稳定玩法 福建时时彩 球探比分即时足球比分 重庆老时时彩开奖查询