WebP 中的无损和透明度编码

Jyrki Alakuijala, Ph.D., Google, Inc.
Vincent Rabaud, Ph.D., Google, Inc.
上次更新时间：2017 年 8 月 1 日

摘要：我们将 WebP 编码器/解码器的资源用量与 PNG 在无损和有损模式下的资源用量进行了比较。我们使用了从网络上随机选择的 12,000 张半透明 PNG 图片，并采用了更简单的测量方法来展示性能差异。我们重新压缩了语料库中的 PNG 文件，以便将 WebP 图片与经过优化大小的 PNG 文件进行比较。我们的结果表明，无论是在大小还是处理速度方面，WebP 都非常适合在 Web 上取代 PNG。

简介

WebP 支持无损和半透明图片，是 PNG 格式的替代方案。WebP 还支持 PNG 压缩中使用的许多基本技术，例如字典编码、霍夫曼编码和颜色索引转换，因此在最糟糕的情况下，速度和压缩密度也相差无几。同时，一些新功能（例如针对不同颜色通道的单独熵编码、向后引用距离的 2D 局部性，以及最近用过颜色的颜色缓存）可提高大多数图片的压缩密度。

在本工作中，我们将 WebP 的性能与使用 pngcrush 和 ZopfliPNG 高度压缩的 PNG 进行了比较。我们使用最佳实践重新压缩了网络图片的参考语料库，并将无损和有损 WebP 压缩与此语料库进行了比较。除了参考语料库之外，我们还选择了两张较大的图片（一张是照片，另一张是图形图片），以便对速度和内存用量进行基准测试。

已证明其解码速度比 PNG 更快，压缩率比目前的 PNG 格式高出 23%。我们得出结论，WebP 是当今 PNG 图片格式的更高效替代方案。此外，支持无损 Alpha 的有损图片压缩功能为加快网站速度提供了更多可能性。

方法

命令行工具

我们使用以下命令行工具来衡量性能：

1. cwebp 和 dwebp。这些工具是 libwebp 库的一部分（从头编译）。

2. 转换。这是 ImageMagick 软件 (6.7.7-10 2017-07-21) 的一部分，属于命令行工具。

3. pngcrush 1.8.12（2017 年 7 月 30 日）

4. ZopfliPNG（2017 年 7 月 17 日）

我们将命令行工具与相应的控制标志搭配使用。例如，如果我们提及 cwebp -q 1 -m 0，则表示使用 -q 1 和 -m 0 标志调用了 cwebp 工具。

图片语料库

我们选择了以下三个语料库：

1. 单张摄影图片（图 1），

2. 一个具有半透明度的单个图形图片（图 2），以及

3. 网络语料库：12,000 张从互联网抓取的随机选择的 PNG 图片，其中既有半透明图片，也有非半透明图片。这些 PNG 图片是通过 convert、pngcrush、ZopfliPNG 进行优化的，并且在研究中考虑的是每张图片的最小版本。

图 1. 摄影图片，1024 x 752 像素。喷火表演“Jaipur Maharaja Brass Band”，比利时 Chassepierre，作者：Luc Viatour，照片已获 Creative Commons 署名-相同方式共享 3.0 未移植版许可。作者网站位于此处。

图 2. 图形图片，1024 x 752 像素。使用 Google 图表工具拼接图片

为了衡量现有格式 PNG 的全部功能，我们使用了多种方法重新压缩了所有这些原始 PNG 图片：

1. 将每个组件限制为 8 位：convert input.png -depth 8 output.png

2. 不使用预测器的 ImageMagick(1)：convert input.png -quality 90 output-candidate.png

3. 使用自适应预测器的 ImageMagick：convert input.png -quality 95 output-candidate.png

4. Pngcrush(2)：pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem alla -rem text input.png output-candidate.png

5. ZopfliPNG(3)：zopflipng --lossy_transparent input.png output-candidate.png

6. 使用所有过滤器的 ZopfliPNG：zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent input.png output-candidate.png

结果

我们计算了 Web 语料库中每张图片的压缩密度（相对于三种方法的优化 PNG 图片大小）：

1. WebP 无损（默认设置）

2. 大小最小的 WebP 无损图片（-m 6 -q 100）

3. 结合使用 WebP 无损和 WebP 有损（默认设置），可获得最佳效果。

我们对这些压缩因子进行了排序，并在图 3 中绘制了它们。

图 3. PNG 压缩密度用作参考，设为 1.0。使用无损和有损方法压缩同一张图片。对于每张图片，系统都会计算与压缩后的 PNG 的大小比率，并对大小比率进行排序，同时显示无损压缩和有损压缩的大小比率。对于有损压缩曲线，如果无损压缩可以生成较小的 WebP 图片，则会选择无损压缩。

与 libpng 在最高质量（转换）和 ZopfliPNG（表 1）下的 PNG 压缩密度相比，WebP 的压缩密度更高，编码（表 2）和解码（表 3）速度与 PNG 大致相当。

表 1. 使用不同压缩方法对三个语料库的每像素平均比特数。

图片集	convert -quality 95	ZopfliPNG	WebP 无损 -q 0 -m 1	WebP 无损（默认设置）	WebP 无损 -m 6 -q 100	WebP 有损压缩（带有 alpha 值）
照片	12.3	12.2	10.5	10.1	9.83	0.81
血腥 : 露骨	1.36	1.05	0.88	0.71	0.70	0.51
网络	6.85	5.05	4.42	4.04	3.96	1.92

表 2. 压缩语料库和不同压缩方法的平均编码时间。

图片集	convert -quality 95	ZopfliPNG	WebP 无损 -q 0 -m 1	WebP 无损（默认设置）	WebP 无损 -m 6 -q 100	WebP 有损压缩（带有 alpha 值）
照片	0.500 秒	8.7 秒	0.293 秒	0.780 秒	8.440 秒	0.111 秒
血腥 : 露骨	0.179 秒	14.0 秒	0.065 秒	0.140 秒	3.510 秒	0.184 秒
网络	0.040 秒	1.55 秒	0.017 秒	0.072 秒	2.454 秒	0.020 秒

表 3. 使用不同方法和设置压缩的图片文件的三个语料库的平均解码时间。

图片集	convert -quality 95	ZopfliPNG	WebP 无损 -q 0 -m 1	WebP 无损（默认设置）	WebP 无损 -m 6 -q 100	WebP 有损压缩（带有 alpha 值）
照片	0.027 秒	0.026 秒	0.027 秒	0.026 秒	0.027	0.012 秒
图形	0.049 秒	0.015 秒	0.005 秒	0.005 秒	0.003	0.010 秒
网络	0.007 秒	0.005 秒	0.003 秒	0.003 秒	0.003	0.003 秒

内存性能分析

对于内存性能分析，我们记录了 /usr/bin/time -v 报告的最大常驻内存大小

对于网络语料库，仅最大图片的大小就决定了内存用量的上限。为了更好地定义内存测量，我们使用一张摄影图片（图 1）来概要介绍内存用量。图形图片也会产生类似的结果。

我们测量了 libpng 和 ZopfliPNG 分别为 10 到 19 MiB，WebP 无损编码分别为 25 MiB 和 32 MiB，设置分别为 -q 0 -m 1 和 -q 95（默认值为 -m）。

在解码实验中，convert -resize 1x1 会为 libpng 和 ZopfliPNG 生成的 PNG 文件使用 10 MiB。使用 cwebp 时，WebP 无损解码会使用 7 MiB，有损解码会使用 3 MiB。

总结

我们已经证明，编码和解码速度与 PNG 的速度在同一领域。在编码阶段，内存用量会增加，但在解码阶段，内存用量会显著减少，至少在将 cwebp 的行为与 ImageMagick 的 convert 的行为进行比较时是这样。

超过 99% 的网页图片的压缩密度更高，这表明可以相对轻松地从 PNG 改为 WebP。

使用默认设置运行 WebP 时，其压缩率比 libpng 高 42%，比 ZopfliPNG 高 23%。这表明，WebP 有望加快包含大量图片的网站的加载速度。

参考

1. ImageMagick

2. Pngcrush

3. ZopfliPNG

外部关联

以下是 Google 未赞助的独立研究，Google 不一定认可其所有内容的正确性。

1. Yoav Weiss 博客