现代图像格式:WebP、AVIF 与 BPG
JPEG 和 PNG 统治了互联网图像格式二十多年。但随着 Web 2.0 和移动互联网的兴起,对更高压缩比、更丰富功能(透明度、动画、HDR)的需求推动了新一代图像格式的诞生。
一个有趣的技术趋势是:视频编码技术正在反哺图像压缩。WebP 借鉴了 VP8 视频的帧内预测,AVIF 直接使用 AV1 视频的帧内编码工具,BPG 则基于 HEVC 的帧内编码。这些新格式从视频编码几十年的积累中汲取了大量成熟的压缩工具,实现了远超 JPEG 的压缩效率。
本篇将系统讲解 WebP、AVIF 和 BPG 三种现代图像格式的核心算法。
WebP 由 Google 于 2010 年发布,目标是在视觉质量相当的情况下,比 JPEG 缩小约 30% 的文件大小。它同时支持有损和无损压缩,以及透明度和动画。
WebP 的有损压缩基于 VP8 视频编码器的帧内编码(Intra-frame Coding),使用 RIFF(Resource Interchange File Format)作为容器格式。
编码流程输入图像 → 宏块划分 → 帧内预测 → 残差计算 → DCT 变换 → 量化 → 算术熵编码 → WebP 文件
与 JPEG 的关键区别用红色标注:
1. 帧内预测(JPEG 没有这一步)
2. 自适应块量化(JPEG 使用固定量化表)
3. 算术编码(JPEG 使用 Huffman 编码)
VP8 帧内预测模式VP8 将图像分成 16×16 的宏块,每个宏块可以根据已解码的邻居像素进行预测。有以下预测模式:
4 种基本模式(适用于 4×4 亮度块、16×16 亮度块、8×8 色度块):
| 模式 | 名称 | 预测方法 |
|---|---|---|
| DC_PRED | DC 预测 | 用上方和左侧像素的平均值填充整个块 |
| V_PRED | 垂直预测 | 用上方行的像素复制填充每一行 |
| H_PRED | 水平预测 | 用左侧列的像素复制填充每一列 |
| TM_PRED | TrueMotion 预测 | 利用上方和左侧像素的线性组合预测 |
TM_PRED 的数学表达:
其中 $L(y)$ 是左侧第 $y$ 行的像素值,$A(x)$ 是上方第 $x$ 列的像素值,$PA$ 是左上方的像素值。这个预测器假设图像存在平滑的亮度梯度。
6 种额外方向模式(仅适用于 4×4 亮度块):
| 模式 | 名称 | 预测方向 |
|---|---|---|
| 4 | Diagonal_Down_Left | 左下对角线 |
| 5 | Diagonal_Down_Right | 右下对角线 |
| 6 | Vertical_Right | 右偏垂直 |
| 7 | Horizontal_Down | 下偏水平 |
| 8 | Vertical_Left | 左偏垂直 |
| 9 | Horizontal_Up | 上偏水平 |
这 6 种模式在约 45° 到 135° 的范围内进行像素预测,用于捕获图像中的边缘和纹理方向。
与 JPEG 帧内编码的本质区别JPEG 不进行帧内预测。它直接对原始像素做 DCT 变换,然后量化。这意味着 JPEG 只能利用块内的频率特性,无法利用块间的空间相关性。
WebP 的帧内预测先估计当前块的"背景值"(预测),然后只编码预测残差。残差的能量通常远小于原始像素值,因此可以用更少的比特达到相同的质量。
自适应块量化VP8 允许将图像分成最多 4 个片段(segment),每个片段可以独立设置量化参数、环路滤波强度等编码参数。这种自适应量化使得:
- 高细节区域(人脸、纹理)分配更多比特
- 低细节区域(天空、背景)分配更少比特
- 整体比特分配更合理
WebP 使用布尔算术编码(Boolean Arithmetic Coding)代替 JPEG 的 Huffman 编码。算术编码的优势:
- 可以分配非整数比特,更接近熵的理论极限
- 自适应模型可以在编码过程中动态调整概率估计
- 比 Huffman 编码节省约 5%–10% 的比特
WebP 的无损压缩融合了多种技术:
1. 空间预测:13 种预测模式(类似 PNG 的过滤器,但更丰富)
2. 颜色去相关:Green-to-Red、Green-to-Blue、Red-to-Blue 变换
3. 颜色索引:当唯一颜色数 < 256 时,使用调色板
4. LZ77 向后引用:2D 变体的 LZ77,使用像素块匹配
5. 颜色缓存:维护最近使用的 32 种颜色的本地缓存
6. Huffman 编码:对所有变换参数和残差数据进行 Huffman 编码
WebP 无损压缩比 PNG 高约 25%–34%,主要得益于更丰富的预测模式和颜色去相关变换。
WebP 独特的功能:支持有损 RGB + 无损 Alpha 的组合。这意味着可以用有损压缩减小 RGB 通道的大小,同时保留精确的透明度信息。与 PNG 的无损 Alpha 相比,这种组合可以将文件大小减少 60%–70%。
AVIF(AV1 Image File Format)由 Alliance for Open Media(AOM)于 2019 年发布。它本质上是 AV1 视频的单帧关键帧格式,直接复用了 AV1 的全部帧内编码工具。
AV1 的帧内编码比 VP8 复杂得多,提供了远更丰富的预测和变换工具:
超级块(Superblock)与四叉树划分AV1 使用 128×128 的超级块作为基本编码单元,支持递归的四叉树划分:
- 128×128 → 64×64 → 32×32 → 16×16 → 8×8 → 4×4
- 还支持水平/垂直二叉划分(非对称划分)
这种灵活的划分使得编码器可以在平坦区域使用大块(减少开销),在细节区域使用小块(提高精度)。
帧内预测模式AV1 提供了61 种帧内预测模式(5 种非方向模式 + 56 种方向模式):
- 非方向模式(5 种):DC、Vertical、Horizontal、Smooth H、Smooth V(TrueMotion)
- 方向模式(56 种):8 个主方向 × 7 个角度插值 = 56 种,覆盖从约 -90° 到 +90° 的方向范围
相比 VP8 的 10 种模式和 H.264 的 9 种模式,AV1 的 61 种模式可以更精确地捕获各种方向的边缘和纹理。
变换工具AV1 支持多种变换类型:
| 变换 | 块大小 | 特点 |
|---|---|---|
| DCT | 4×4 到 64×64 | 标准余弦变换 |
| ADST(非对称离散正弦变换) | 4×4 到 32×32 | 更适合边缘信号 |
| Identity 变换 | 4×4 到 64×64 | 不做变换(直接量化) |
| 旋转 DCT (flip DCT) | 4×4 到 32×32 | DCT 的旋转版本 |
AV1 允许在同一块的不同方向(水平/垂直/对角线)使用不同的变换类型(称为 变换集选择),这是其他编码器不具备的灵活性。
Film Grain 合成AV1 引入了一个独特工具:Film Grain 合成(Film Grain Synthesis)。
传统编码器试图忠实编码胶片颗粒(noise/grain),这非常消耗比特。AV1 的做法是:
1. 编码器分析原始图像中的颗粒特征(幅度、空间频率、自相关)
2. 编码颗粒的参数模型(只需少量比特)
3. 解码器根据参数在解码后的干净图像上合成颗粒
这使得编码器可以专注于编码图像的结构信息,而将随机性很强的颗粒交给参数化模型处理。Netflix 报告称,Film Grain 合成可以为胶片质感的内容节省 20%–40% 的比特。
- 压缩比:比 JPEG 小 50%,比 WebP 小 20%–30%
- 功能丰富:支持 HDR(10bit/12bit)、宽色域(BT.2020)、透明度、动画、多帧(burst)
- 开源免版税:基于 AV1 的免版税许可
- 浏览器支持:Chrome 85+、Firefox 93+、Safari 16.4+、Edge 105+
- 编码速度慢:AV1 编码复杂度是 JPEG 的 10–100 倍
- 硬件支持尚在完善:虽然解码器已广泛支持,但硬件编码器仅在高端 GPU 上可用
- 与 JPEG 的兼容性:许多老系统和软件仍不支持 AVIF
BPG(Better Portable Graphics)由 Fabrice Bellard(FFmpeg 的作者)于 2014 年发布,基于 HEVC/H.265 的帧内编码。
BPG 直接使用 HEVC 的 Intra 配置:
- CTU 大小:最大 64×64(比 JPEG 的 8×8 大 64 倍)
- 预测模式:35 种帧内预测模式(DC + 33 种角度 + Planar)
- 变换:4×4 到 32×32 的整数 DCT/DST
- 熵编码:CABAC(上下文自适应二进制算术编码)
- 环路滤波:去块滤波 + SAO(Sample Adaptive Offset)
| 维度 | JPEG | BPG |
|---|---|---|
| 压缩比 | 基准 | 比 JPEG 小 50% |
| 色深 | 8bit | 最高 14bit |
| 色域 | sRGB | BT.601/709/2020 |
| HDR | 不支持 | 支持(HDR10、HLG) |
| 透明度 | 不支持 | 支持(Alpha 通道) |
| 浏览器支持 | 全部 | 无原生支持 |
| 许可 | 无 | HEVC 专利许可 |
BPG 的技术优势明显,但 HEVC 的专利许可问题严重阻碍了其普及。与 AVIF 相比,BPG 在功能上接近,但在免版税和生态支持上处于劣势。
| 维度 | JPEG | PNG | WebP | AVIF | BPG |
|---|---|---|---|---|---|
| 压缩类型 | 有损 | 无损 | 有损/无损 | 有损/无损 | 有损/无损 |
| 压缩比(vs JPEG) | 1× | 0.2–0.5× | 1.3× | 2× | 2× |
| 透明度 | 否 | 是 | 是 | 是 | 是 |
| 动画 | MJPEG | APNG | 是 | 是 | 否 |
| HDR | 否 | 否 | 有限 | 是 | 是 |
| 浏览器支持 | 100% | 98% | 97% | 92% | 0% |
| 编码速度 | 极快 | 快 | 中等 | 慢 | 慢 |
| 版税 | 无 | 无 | 无 | 无 | 有 |
- 照片类 Web 图片:优先 AVIF,回退 WebP,最后 JPEG
- 截图/图标/UI 元素:优先 AVIF/WebP 无损,或 PNG
- 需要透明度的照片:AVIF 有损+Alpha 或 WebP 有损+Alpha
- 动画图片:WebP 动画或 APNG
- 需要兼容所有环境:JPEG(永远是最安全的回退)
- 专业摄影/HDR:AVIF(10bit/12bit,宽色域)
参考来源
- Google (2010). "WebP: A New Image Format for the Web". https://developers.google.com/speed/webp
- Sosnoski, D. (2023). "WebP Image Format - RFC 9649". IETF.
- AOM (2019). "AV1 Image File Format (AVIF) v1.2.0". https://aomediacodec.github.io/av1-avif/
- Bellard, F. (2014). "BPG: Better Portable Graphics". https://bellard.org/bpg/
- Netflix Technology Blog (2024). "AVIF for Next-Generation Image Coding".
- Xiph.org (2018). "A Technical Overview of AV1". arXiv:2008.06091.
- Google Developers (2023). "Compression Techniques | WebP".
本篇是系列的第四篇。下一篇将进入视频压缩领域,讲解从 MPEG-1 到 H.264 的视频压缩基础,包括帧间预测、运动估计、GOP 结构等视频编码的核心概念。
- 上一篇:小波变换与 JPEG2000
- 下一篇:视频压缩基础 — 从 MPEG-1 到 H.264