来聊聊WebP的原理

前言

前端常用的图片格式：JPG、PNG、GIF、WEBP、APNG等等。

主要图片格式背景以及信息

JPEG（Joint Photographic Experts Group）联合图像专家组

成立于1986年，该标准于1992年正式通过，在JPEG中主要包含4中模式：

• 无损压缩编码模式

• 基于DCT的顺序编码模式

• 基于DCT的累进编码模式

• 基于DCT的分层编码模式。

针对JPEG的大火，应用领域越来越广，为了增加压缩比，有出现了JPEG2000标准，此标准完全抛弃了DCT（离散余弦变换），而采用了离散小波变换。

离散余弦变换：是以区块编码为主的方式，将图片压缩成8x8的小块存储到文件中，所以图片在加载时，会一行一行的刷新。

离散小波变换：是以多解析编码方式，主要将影响频率成分抽取出来，将图片作为整体变换和编码，所以图片在加载时，会直接展示模糊的图片轮廓，然后逐渐变清晰。

GIF（Graphics Interchange Format）图形交换格式

1987年由Compu Serve公司发展起来，为了填补跨平台图像格式。GIF是一种位图，即每个像素填充一种颜色，最多支持256种颜色。GIF采用的是LZW（Lempel-Zev-Welch）压缩算法，比较适合色彩较少的场景，对于一些复杂颜色的场景GIF的表现力就比较有限。GIF通常会自带一个调色板，存放需要使用的颜色，所以压缩时，我们要减少图像使用的颜色。

GIF包含2个版本：GIF87a和GIF89a

• GIF87a: 1987年推出，允许存储一个图像，严格不支持透明像素，，采用LZW压缩算法，保证图像质量的前提下，能压缩20%-25%
• GIF89a：1989年推出，允许一个文件存储多个图像，可实现动画功能，允许某些像素透明（我们常见的gif图）

PNG（Portable Network Graphics）

1995年，因GIF的LZW数据压缩算法的软件专利开始收费，为避免影响，诞生了PNG，1999年unisys公司进一步中止了GIF的专利免费许可，让PNG才开始获得更多关注，所以业内浏览器很晚才开始支持PNG，IE在7.0才正式支持PNG格式的。（开发过IE6的同学一定很痛苦）

• 无损压缩：采用了LZ77算法的派生算法进行压缩，他利用特殊编码方式标记重复出现的数据，因此对图像颜色没有影响。

• 索引彩色模式： PNG-8格式与GIF图像类似，同样采用8位调色板将RGB彩色图像转换为索引彩色图像，图像中保存的不再是各个像素的彩色信息，而是从图像中挑选出来的具有代表性的颜色标号， 没一个标号对应一种颜色，图像数据量也因此减少。

• 更优化的网络传输：PNG图像采用流式浏览，所以在图片下载前，可以提供给浏览者一个基本图像内容，然后慢慢清晰起来。

• 支持透明效果：PNG可以为原图像定义256个透明层次，使得彩色图像边缘能与任何背景平滑融合，从而消除锯齿边缘。

WebP (WebM文件里单个被压缩的帧)

WebP的文件格式来源于Google的VP8视频编解码（WebM），VP8编解码最大特性是帧内预测压缩，也就是视频的每一帧都被压缩，后续帧与帧之间也会被压缩。

WebP的名称由来：WebM文件里单个被压缩的帧。

自从2011年发布以来，webP作为一个独特文件类型做了很多升级与改变，例如支持透明度、无损模式、动画支持等。

2013年支持了动态WebP。

接下来我们来深入了解一下为什么有损WebP（lossy WebP）的压缩能力如此之强吧。

WebP的压缩的原理

第一步：宏块

与JPG相同的时，WebP也采用宏块进行压缩，典型的宏块由一个 16×16 的亮度像素(luma pixel)块和两个 8×8 的色度像素(chroma pixel)块组成。分块越小，预测越准，需要记录的信息也越多，一版来说，细节月丰富的地方，分块越细。相对不丰富的地方使用16x16分块。

image.png

第二步：预测

WebP最大的不同之处在于每个4x4的宏块中都有一个预测模型。（又名：过滤），PNG过滤用的比较多，它对每一行做同样的事，WebP过滤是针对每一个块。

VP8帧内预测常用的三种宏块：

• 4x4 亮度像素块

• 16x16 亮度像素块

• 8x8 色度像素块

编码器会将它们放在一个4x4的测试像素块填满，并确定哪一个生成了最接近原始块的值。这些用不同方法填满的块叫做”预测块”。

主要使用的预测方式有以下4种：

• H_PRED（Horiz prediction-水平预测)——像素块中每一列使用左边一列（col L）的数据填充

• V_PRED (vertical prediction-垂直预测)——像素块中每一行使用其上边一行（row A）的数据填充

• DC_PRED (DC prediction - DC 预测)——像素块中每个单元使用 row A 和 col L 的所有像素的平均值填充。

• True Motion (TrueMotion 预测)——一种超级先进的模式，我没找到原理，暂时还不懂。

image.png

对于4x4的亮度块，会有6种额外预测模式，类似于垂直预测与水平预测方式，他们可以从不同的方向去填充剩余色块。

第三步：DCT（离散余弦变换）

将预测部分的原图数据减去预测出来的数据，得到差值矩阵，最后对差值进行DCT。此步骤会生成一个频率系数矩阵，坐上的系数幅度最大，右下的最小，幅度值越小，频率越高。大部分图片信息都在左上区域，这一步的作用就是朱熬出图片的高频区域和低频区域。

第四步：量化

人眼对高频部分不敏感，这一步会将高频部分舍去。对上一步的频率系数表和量化表进行计算，将频率系数表和量化表按位相除，并四舍五入整数位，最终生成一个量化矩阵。

第五步：算法编码

WebP不同于JPEG，也可以说由于JPEG压缩的地方在于，WebP采用了算法编码压缩（Arithmetic encoding），JPEG采用的是霍夫曼编码（Huffman encoding），算法编码提供了优于霍夫曼编码5%-10%的压缩率。

总结

WebP的压缩优于其他图片，主要得益于起继承自VP8的帧内预测技术，相比于JPEG对图像原值进行编码来说，WebP编码的是预测值和原值的差值，这也是WebP体积更小的主要原因，最后，WebP使用了更优秀的算法编码。

这个WebP的压缩过程用，一张图可以囊括表述：

image.png

当然以上主要是针对WebP的有损压缩（lossy WebP）来进行的原理讲解，无损压缩的逻辑与其完全不同，不过我们提高性能，主要也是采用的有损WebP。

希望以上内容，对大家了解WebP的原理有一定的帮助，能让大家更好的去使用WebP。

相关资料

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