AVIF和WebP图片格式介绍

概述

• WebP：由 Google 基于 VP8 视频编码派生（libwebp），支持有损（基于预测+变换+熵编码）与无损（基于局部字典/预测）压缩、RGBA alpha、动画。设计目标：在保持视觉质量的同时比 JPEG/PNG 更小。图片转WEBP
• AVIF：基于 AV1 视频编码（AOMedia Video 1）的一种静态/动画图像容器（通常使用 libavif / libaom / dav1d 等实现）。支持更高位深（8/10/12-bit）、HDR 元数据、YUV 色度采样、先进的变换/滤波与更高效熵编码，追求在更低比特率下更好视觉质量。图片转AVIF

核心原理（简要）

• 共同点（视频编码派生技术）
  • 颜色空间：多数现代编码先将 RGB 转换为 YUV（亮度 + 色度），并通常对色度做下采样（如 4:2:0）以降低数据量（对视觉影响较小）。
  • 块/预测：对图像分块，使用空间预测（基于已编码邻块像素）减少冗余。
  • 变换：将预测残差做频域变换（DCT 或类似）以聚合能量到少数系数。
  • 量化：削减小系数以实现有损压缩（影响视觉细节）。
  • 熵编码：使用更高效的熵编码（如 CABAC/ANSC）把量化系数编码成比特流。
• WebP（基于 VP8 keyframe）
  • 有损：预测 + 4x4 或 16x16 变换 + 量化 + Huffman-like 熵编码。
  • 无损：基于局部像素字典、色彩缓存、LZ77 风格的匹配和霍夫曼式编码。
  • 支持 alpha（无损或有损 alpha）。
  • 算法较老但编码/解码实现成熟，速度较快。
• AVIF（基于 AV1）
  • 更复杂的帧内（intra）预测模式、可变大小的变换、更多的滤波（环路滤波、CDEF、CLPF）、更先进的熵编码（基于上下文的符号编码）。
  • 原生支持高位深和 HDR（可以携带 HDR10 元数据 /色调映射信息）。
  • 在低码率下通常显著优于 WebP 和 JPEG（主观视觉质量更好）。
  • 编码器实现（例如 libaom、rav1e、SVT-AV1）在速度/效率上差异大，通常比 WebP 慢很多。

与传统格式的差异

• JPEG（有损）：
  • 使用 8x8 DCT、简单量化表、较原始的熵编码（Huffman）。
  • 缺点：色块效应、对高压缩比视觉退化明显、无 alpha、8-bit RGB。
  • AVIF/WebP 在相同视觉质量下通常体积更小；AVIF 的优势明显。
• PNG（无损光栅图，适合图形/文字/透明）：
  • 基于滤波 + DEFLATE（LZ77+哈夫曼），对摄影图像压缩效率差。
  • WebP/AVIF 的无损模式在摄影或有透明需求时通常能提供更小的文件（但 PNG 在某些图形场景仍优）。
• GIF：
  • 只支持 256 色、简单 LZW 压缩、动画但色彩受限。
  • WebP/AVIF 支持全色深动画且压缩更好、文件更小并支持 alpha。
• BMP/TIFF：
  • 通常无压缩或无损大文件，适合中间格式或专业用途。AVIF/WebP 目标是 web 分发而非替代高精度无损档案。

性能、兼容性与实践建议

• 兼容性：
  • WebP 浏览器支持广泛（Chrome、Firefox、Edge、Safari 从 14 开始部分支持，但早期 Safari 有限制）。
  • AVIF 浏览器支持在近几年快速增长（Chrome、Firefox、Safari 逐步支持），但旧环境需回退。
• 编码复杂度：
  • WebP 编码速度快，工具成熟（cwebp、libwebp）。
  • AVIF 编码慢且对资源密集（尤其用高质量设置），但效果更好；解码有多实现（dav1d 快速解码器）。
• 色彩与位深：
  • AVIF 支持 10/12-bit 和 HDR，适合对色彩保真要求高的应用（摄影、视觉媒体）。
  • WebP 一般以 8-bit 为主（虽然有扩展），适合大多数 web 场景。
• 动画与 alpha：
  • 两者都支持动画与 alpha，且比 GIF 更高效。
• 大小 vs 质量度量：
  • 使用 PSNR/SSIM/VMAF 评估，AVIF 常在低比特率下优于 WebP；WebP 在速度/兼容性权衡上仍优秀。

示例命令
使用 libwebp：

cwebp -q80input.jpg -o output.webp# 无损cwebp -lossless input.png -o output_lossless.webp

使用 libavif / avifenc（或参考 rav1e+libavif）：

avifenc -c aom -q35input.png output.avif# 更高质量（慢）avifenc -c aom -q20--min0--max63--speed1input.jpg output_high.avif

选型建议（简短）

• 兼容性优先且需要快速编码：WebP。
• 最大压缩效率与高/HDR 位深保真：AVIF（接受更慢的编码）。
• 图形/透明小色彩索引图像：PNG 或有时 WebP 无损。
• 动画替代 GIF：WebP 或 AVIF（视兼容与文件大小需求）。

常见坑

• 色彩偏差：RGB ↔ YUV 与下采样会导致色彩/边缘差异，测试需在目标设备/浏览器上验证。
• 编码时间：AVIF 高质量设置非常慢，需评估离线编码 vs 实时生成。
• 回退策略：在 production 使用 或 content-negotiation 提供 AVIF → WebP → JPEG/PNG 回退。

参考实现与工具

• WebP: libwebp, cwebp/dwebp
• AVIF: libavif, avifenc/avifdec, rav1e, libaom, daala/dav1d（解码）

结语
AVIF 和 WebP 代表了基于视频编码技术的下一代图像压缩方向：在相同视觉质量下显著减小文件体积、支持 alpha 与动画，并在 AVIF 上进一步支持高位深与 HDR。实践中结合目标客户浏览器/设备兼容性、编码资源与质量需求做选择，并采用合适的回退策略。