压缩技术

Google 一直在设法提高网页加载速度。 一种方法是缩小网页图片。在大多数网页上，图片所占空间最高可达 60%-65% ，且网页大小是决定总呈现时间的主要因素。网页大小对移动设备尤为重要，因为较小的图片既能节省带宽，又能延长电池续航时间。

WebP 是 Google 开发的一种新的图片格式，可在 Chrome、Opera 和 Android 中加以支持，经过优化，可通过 Web 呈现更快、更小的图片。WebP 图片的大小与具有同等视觉质量的 PNG 和 JPEG 图片相比大约小 30% 。此外，WebP 图片格式的功能与其他格式的功能相当。支持：

• 有损压缩：有损压缩基于 VP8 关键帧编码。VP8 是 On2 Technologies 创建的一种视频压缩格式，是 VP6 和 VP7 格式的后续版本。
• 无损压缩：无损压缩格式由 WebP 团队开发。
• 透明度：8 位 Alpha 通道适用于图形图像。Alpha 通道可与有损 RGB 搭配使用，而有损 RGB 是目前无法以任何其他格式使用的。
• 动画：支持彩色动画图片。
• 元数据：它可以包含 EXIF 和 XMP 元数据（例如，供相机使用）。
• 颜色配置文件：可能包含嵌入式 ICC 配置文件。

由于可以更好地压缩图片，并且支持所有这些功能，因此 WebP 可以很好地替代大多数图片格式：PNG、JPEG 或 GIF。更棒的是，您知道 WebP 能带来新的图片优化机会吗？比如支持有透明度的有损图片。有！WebP 是瑞士军刀中的图片格式。

那么，这个魔法是如何做到的呢？让我们身体力行，一探究竟。

有损 WebP

WebP' 有损压缩使用与 VP8 相同的方法来预测（视频）帧。VP8 基于块预测，与所有基于块的编解码器一样，VP8 将帧分为多个称为“块”的较小段。

在每个宏块中，编码器可以根据之前处理的块预测冗余动作和颜色信息。图片帧是“键”，也就是说，它仅使用每个宏块的近空间邻近区域中已解码的像素，并尝试填充它们的未知部分。这称为预测性编码（请参阅 VP8 视频的帧内编码）。

然后可以从块中减去冗余数据，从而实现更高效的压缩。我们只留下了微小差异（称为“残差”），用于以压缩形式进行传输。

残差经过数学上的反转转换（著名的 DCT，代表离散余弦转换）后，残差通常包含多个零值，可以更有效地进行压缩。然后对结果进行量化和熵编码。有趣的是，量化步骤是唯一丢失有损的位数（在下面的图表中搜索除以 QPj 的情况）。所有其他步骤都是不可逆的无损步骤！

下图显示了 WebP 有损压缩所涉及的步骤。与 JPEG 相比，区分特征的特征则以红色圆圈标示。

WebP 使用块量化，并在不同的图像段之间自动分配位：对于低熵段，减少位；对于高熵段，采用高位。WebP 使用算术熵编码，与 JPEG 中使用的霍夫曼编码相比，可实现更好的压缩效果。

VP8 预测模式

VP8 预测模式与以下三种类型的宏块一起使用：

• 4x4 亮度
• 16x16 亮度
• 8x8 色度

以下宏块共享四种常见的预测内模式：

• H_PRED（水平预测）。在每个块中填充左列 L 的副本。
• V_PRED（垂直预测）。使用上一行的副本 A 填充块的每一行。
• DC_PRED（DC 预测）。使用 A 上方一行中像素和 L 左边一列的像素平均值来填充块。
• TM_PRED（TrueMotion 预测）。该模式以由 On2 Technologies 开发的压缩技术的名称命名。除了 A 行和 L 列之外，TM_PRED 还会在代码块的上方和左侧使用像素 P。系统会从 A 的像素（从 P 开始）传播像素，并使用 L 的像素来传播每一行。

下图说明了 WebP 有损压缩中使用的不同预测模式。

对于 4x4 亮度块，还有 6 个与 V_PRED 和 H_PRED 类似的其他帧内模式，但对应于预测不同方向的像素。如需详细了解这些模式，请参阅 VP8 比特流指南。

自适应块量化

为了改善图片质量，系统会将图片细分为具有明显相似特征的区域。对于每个片段，压缩参数（量化步骤、过滤强度等）是单独调整的。这会将位重新分发到最有用的位置，从而产生高效的压缩。VP8 最多允许四个片段（VP8 比特流的限制）。

为什么 WebP（有损）比 JPEG 更好

预测编码是 WebP 胜过 JPEG 的主要原因。块自适应量化也会产生很大的影响。过滤在中等/低比特率方面非常有用。与霍夫曼编码相比，布尔算术编码可提供 5%-10% 的压缩增益。

无损 WebP

WebP 无损编码基于使用多种不同技术转换图像的方法。然后，对转换参数和转换后的图片数据进行熵编码。应用于图像的转换包括像素空间预测、颜色空间转换、使用本地新兴调色板、将多个像素打包到一个像素以及 Alpha 替换。对于熵编码，我们使用 LZ77-Huffman 编码的变体，该变体使用距离值和紧凑稀疏值的 2D 编码。

预测器（空间）转换

空间预测通过利用相邻像素通常是相关联的这一事实来减少熵。在预测器转换中，当前像素值是根据已解码的像素（扫描行顺序）预测的，并且只有残差值（实际值 - 预测值）经过编码。预测模式决定了要使用的预测类型。图片会被分成多个方形区域，一个方形中的所有像素都使用相同的预测模式。

有 13 种不同的预测模式。常用元素包括 左侧像素、顶部像素、左上角像素和右上角像素其余值是左侧、顶部、左上角和右上角的组合（平均值）。

颜色（去关联）转换

颜色转换的目标是装饰每个像素的 R、G 和 B 值。颜色转换会按原样保留绿色 (G) 值，根据绿色转换红色 (R)，并根据绿色转换蓝色 (B)，然后根据红色转换。

与预测器转换的情况一样，首先，图片会被分成多块，各个块中的所有像素会使用相同的转换模式。对于每个代码块，有三种颜色转换元素：green_to_red、green_to_blue 和 red_to_blue。

减 Green 转换

“减去绿色转换”会从每个像素的红色和蓝色值中减去绿色值。如果存在此转换，解码器需要将绿色值同时添加到红色和蓝色。这是上述常规颜色装饰关系转换的一个特例，其出现频率足以保证其被切断。

颜色索引（调色板）转换

如果唯一像素值不多，那么创建颜色索引数组并将像素值替换为数组索引可能会更高效。颜色索引转换可以实现此目的。颜色索引转换会检查图像中的唯一 ARGB 值的数量。如果该数字低于阈值 (256)，它会创建一个包含这些 ARGB 值的数组，然后使用该数组值将像素值替换为相应的索引。

颜色缓存编码

无损 WebP 压缩使用已见的图像片段来重建新像素。如果找不到感兴趣的匹配项，该方法还可以使用本地调色板。此调色板会不断更新，以重复使用近期的颜色。在下图中，您可以看到本地颜色缓存的实际运作方式，随着扫描过程的下降，系统使用 32 种最近使用的颜色逐步更新。

LZ77 后向参考

向后引用是长度和距离代码的元组。长度是指要复制的扫描行顺序中的像素数。距离代码是一个数字，表示之前已见过的像素的位置，即要从中复制像素的位置。长度和距离值使用 LZ77 前缀编码进行存储。

LZ77 前缀编码将大整数值分成两部分：前缀代码和额外的位。前缀代码以熵代码的形式存储，而多余位则按原样存储（不含熵代码）。

下图展示了具有字词匹配功能（而非像素）的 LZ77（2D 变体）。

有损 WebP（Alpha 版）

除了有损 WebP（RGB 颜色）和无损 WebP（具有 alpha 的无损 RGB）之外，还有另一种允许 RGB 通道和有损编码（Alpha 通道）的 WebP 模式。目前，任何现有的图片格式都无法使用这种可能性（有损 RGB 和无损 Alpha）。目前，需要提高透明度的网站站长必须使用 PNG 对图片进行无损编码，这会导致图片大幅膨胀。WebP Alpha 值以每像素低位编码图片，提供了一种有效缩减此类图片大小的方式。Alpha 通道的无损压缩比有损（质量为 90）WebP 编码只增加了 22% 字节。

总体而言，用有损+Alpha 版 WebP 取代透明 PNG 文件后，平均大小可降低 60-70%。这已被证实对包含大量图标的移动网站来说是个很有吸引力的功能（例如 everything.me）。