都说 WebP 厉害，究竟厉害在哪里？

时间 2020-09-10 标签都说 webp 厉害究竟哪里

以前在《 WebP 的前世此生》一文中，介绍了 WebP 图片格式是由 Google 基于 VP8 视频编码格式研发的，同时提供有损压缩和无损压缩两种格式，那么今天就来看看 WebP 有损压缩与无损压缩的具体技术细节。html

WebP 有损压缩

WebP 有损压缩使用的图像编码方式与 VP8 视频编解码器 WebM 格式压缩视频关键帧的方法相同，WebP 格式的图片本质就是 WebM 文件中被压缩的帧。git

进行有损压缩时，WebP 会将图片划分为两个 8x8 色度像素宏块和一个 16x16 亮度像素宏块。在每一个宏块内，编码器基于以前处理的宏块来预测冗余动做和颜色信息。经过图像关键帧运算，使用宏块中已解码的像素来绘制图像中未知部分，从而去除冗余数据，实现更高效的压缩。github

WebP 编码器四种帧内预测模式：web

H_PRED（水平预测）：用宏块左边的列 L 的填充块的每一列；
V_PRED（垂直预测）：用宏块上边的行 A 的填充宏块的每一行；
DC_PRED（DC预测）：用行 A 和列 L 的像素的平均值做为宏块惟一的值来填充宏块；
TM_PRED（TrueMotion预测）：除了行 A 和列 L 以外，用宏块上方和左侧的像素P、A（从P开始）中像素块之间的水平差别以列 L 为基准拓展每一行。

△ WebP 有损压缩预测模式算法

当图片处理到此处时，还剩下小的残差，经过 FDCT （正向离散余弦变换），让变换后的数据低频部分分布在数据块左上方，而高频部分集中于右下方实现更高效的压缩。浏览器

最后是将结果量化并进行熵编码。WebP 使用的是布尔算术编码做为熵编码方式，直接把输入的消息编码为一个知足(0.0 ≤ n < 1.0)的小数n。缓存

△ WebP有损压缩所涉及的步骤性能

△ JPG vs 有损 WebP优化

当 WebP 将 JPG 压缩到至关于原图 90% 质量时，图片体积减小了 50% 左右。当 WebP 将 JPG 压缩到至关于原图 80% 质量时，图片体积则减小了 60%~80%。网站

有损 WebP 压缩性能优于 JPG 的缘由主要是其预测编码技术先进，而且宏块自适应量化也带来了压缩效率的提高，而布尔算术编码与霍夫曼编码相比提高了 5%~10% 的压缩性能。

WebP 无损压缩采用了预测变换、颜色变换、减去绿色变换、彩色缓存编码、LZ77 反向参考等不一样技术来处理图像，以后对变换图像数据和参数进行熵编码。下文将对 WebP 的技术点进行一一解析：

预测空间变换经过利用相邻像素的数据相关性减小熵。在预测变换中，对已解码的像素预测当前像素值，而且仅对差值（实际预测）进行编码。预测变换有 13 种不一样的模式，使用较多的是左、上、左上以及右上的像素预测模式，其他为左、上、左上和右上组合的平均值预测模式。

借助颜色变换去除每一个像素的 R，G 和 B 值。彩色变换时保持绿色（G）值原样，根据绿色（G）值变换红色（R）值，再根据绿色值转换蓝色（B）值，最后根据红色（R）值进行转换。

若是与预测变换的状况同样，就须要将图像划分为宏块，而且对于宏块中的全部像素使用相同的变换模式。变换模式分为 3 种：green_to_red，green_to_blue和red_to_blue。

“减去绿色变换”从每一个像素的红色、蓝色值中减去绿色值。当此变换存在时，解码器须要将绿色值添加到红色和蓝色。

无损 WebP 压缩使用已经看到的图像片断来重构新的像素。若是没有找到对应的匹配值，可使用本地调色板，同时本地调色板也会不断更新最近使用的颜色。

△ 更新本地色彩缓存

△ PNG 原图、PNG 无损、 WebP 无损对比（资料来源：http://isparta.github.io/compare-webp/#12345）

上图是 PNG 原图与 WebP 无损的对比，WebP 无损对 PNG 图片的优化到达了 20%~40% 。

△ 各图片格式功能对比

目前 WebP 图片格式依托于其优异的图片压缩性能以及兼备无损和有损两种压缩算法，在各大网站和 App 获得普及，那么要如何在网站中开启 WebP 格式呢？

△ 又拍云控制台 WebP 自适应开启方式

又拍云目前已经支持 WebP 图片格式转换，并且还支持 WebP 自适应功能，在后台一键开启 WebP 自适应功能，便可经过 CDN 平台智能判断客户端浏览器是否支持 WebP 解码，若是支持则返回 WebP格式图片，若是不支持则会返回原图，在客户端以及源站无需任何改动。

参考文章：

WebP原理和Android支持现状介绍：https://zhuanlan.zhihu.com/p/23648251