压缩技术

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

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)。