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 博客