JPEG、WebP、AVIF 的区别与选用指南 - 图像压缩格式对比
JPEG、WebP、AVIF 的原理与擅长领域
在选择图像压缩格式时，最容易让人犹豫的是 JPEG、WebP 和 AVIF 这三种。它们的主要用途都是有损压缩，即在几乎不改变观感的前提下缩小文件，但由于诞生的年代和内部机制不同，各自擅长的图像类型和可用的功能也有差别。
JPEG 历史悠久，几乎在所有环境中都能打开。MDN 的图像文件格式指南 (2026 年 8 月更新) 仍将其定位为静态图像有损压缩中目前最普及的选择，并列出 Chrome、Edge、Firefox、Opera、Safari 的全部版本都支持它。它把图像切成 8x8 像素的块并转换为频率分量，再以较低精度记录人眼不易察觉的高频成分来节省空间。它适合色调连续的照片，但无法保存透明度 (Alpha 通道)，压缩过强时块边界的噪点和文字周围的模糊会变得明显。
WebP 由 Google 开发，把视频编码器 VP8 的关键帧编码应用到了静态图像上。它使用预测编码，即根据周围像素推测内容、只记录差值，因此在相同画质下往往比 JPEG 更小，并且同时支持有损与无损两种模式，以及透明度和动画。Google 的 WebP 官方文档 (2025 年 8 月更新) 说明，无损 WebP 比 PNG 小 26%，有损 WebP 在同等画质下比 JPEG 小 25-34%。另一方面，WebP 图像的单边尺寸上限为 16383 像素 (同一 FAQ、2026 年 2 月更新)。
AVIF 是 AV1 Image File Format 的缩写，由开放媒体联盟 (Alliance for Open Media，AOMedia) 制定，把视频编码器 AV1 的静态图像编码装入 HEIF 系列的容器中 (AVIF 规范 v1.2.0、2025 年 10 月)。它使用比 JPEG 的 8x8 更大的可变尺寸块和更高级的预测，因此在平坦色块和大尺寸图像上效率较高，并支持 8 / 10 / 12 位色深、透明度、HDR 以及图像序列 (动画) (MDN、2026 年 8 月更新)。免版税这一点，也被认为是它在 Web 上得到采用的原因之一。
概括来说：最看重兼容性时选 JPEG，想在兼容性和压缩率之间取得平衡时选 WebP，最看重压缩率和功能时选 AVIF。下面依次说明这些差异如何体现在画质、体积、浏览器支持和用途上。
画质与体积的取舍 - 影响压缩率的因素
“AVIF 比 JPEG 小多少百分比”这样的单一数字，实际上会随条件大幅变化。即使是同一种格式，压缩率也会因画质设置、图像内容、分辨率、编码器实现及其参数而上下波动，因此看到数字时务必确认背后的比较条件。
画质设置：有损压缩中，画质参数越低文件越小，但超过某个点之后劣化就会肉眼可见。不同格式的画质参数含义不同，给 JPEG 和 WebP 指定相同的画质数值，得到的画质并不相同。要公平比较，需要先用 SSIM 这类画质指标或目视把画质对齐，再比较体积。
图像内容：天空的渐变、皮肤这类平滑区域容易预测，在任何格式下都压得很好。相反，布料、木纹、砂石这类细密纹理不易预测，压缩率会下降，压缩过强时细节还可能被抹平，呈现出涂抹感。在包含文字和锐利线条的截图中，JPEG 容易在轮廓周围产生称为振铃的模糊，要保持同样的观感就需要较高的画质设置。
分辨率：AVIF 使用的大尺寸可变块能一次表示大片平坦区域，因此在大图上往往更占优势。在小缩略图上，格式之间的差距有时会缩小，值得按尺寸分别确认。
编码器与速度设置：同一格式下，编码器的实现和速度 (effort) 设置也会改变结果。一般来说，搜索时间越长压缩率越高，优先速度则压缩率下降。AVIF 的编码往往比 JPEG 和 WebP 更耗时，适合在构建阶段批量转换，而在上传后立即转换的场景下，可能需要调整速度设置或把处理放到后台。解码 (显示) 的开销也因格式而异，图片较多的页面可以同时使用 decoding="async" 和延迟加载。
结论是，把压缩率数字当作“该条件下的一个例子”来看，并用自己的图片验证才可靠。具体步骤见后文“用自己的图片比较”。
浏览器支持现状与回退方案
压缩率再高，如果访问者的浏览器无法显示也没有意义。根据 caniuse 的数据 (2026 年 8 月更新)，按全球使用份额计算的支持率，WebP 约为 96%。AVIF 也达到了约 95%，Chrome、Edge、Firefox、Safari 的当前版本都能显示这两种格式。
不过，支持普及的时间点有差异。同一数据显示，Safari 从 16.0 版起完整支持 WebP (14.0-15.6 版仅限 macOS 11 及以上)，从 16.4 版起完整支持 AVIF，使用更早版本 Safari 的访问者需要回退方案。AVIF 的动画 (图像序列) 支持晚于静态图像，该数据为 Safari 16.1-16.3 和 Firefox 93-112 标注了“仅支持静态图像” (Safari 16.0 及更早版本则完全不支持 AVIF)。
实际可行的做法是用 picture 元素，从最新的格式开始依次列出候选，最后放 JPEG 或 PNG。浏览器会选择自己能显示的第一个 source，因此不需要编写检测支持情况再分支的代码。
<picture>
<source type="image/avif" srcset="photo.avif">
<source type="image/webp" srcset="photo.webp">
<img src="photo.jpg" alt="照片说明">
</picture>部分 CDN 和图像转换服务会读取请求的 Accept 头，在服务端返回最合适的格式。这种方式无需修改 HTML 即可迁移，但缓存会按 Accept 头拆分，设计时需要考虑这一点。
按用途选择 - 照片、插画、透明图、动画
格式的适合与否取决于图像的类型。下面按用途整理思路。
- 照片：有损压缩效果良好的典型领域。基本形是三级结构，AVIF 为首选，WebP 为次选，JPEG 为最终回退。纹理丰富的照片如果把 AVIF 画质压得过低，细节可能被抹平，因此画质设置从保守值开始，再目视微调。
- 插画与扁平设计：均匀色块较多，WebP 和 AVIF 的预测编码很有效。如果不允许线条模糊，就不用有损而选无损模式，使用无损 WebP (通常比 PNG 更小) 或 PNG。
- 截图与含文字的图像：保持文字轮廓是首要目标。若采用有损压缩，应避开 JPEG，用较高画质的 WebP 或 AVIF；否则选择 PNG 或无损 WebP。
- 透明图 (图标、抠图商品照)：JPEG 无法保存透明度，以往 PNG 是默认选择。WebP 和 AVIF 都支持带 Alpha 通道的有损压缩，从 PNG 迁移过来常常能大幅缩小体积，电商网站的商品图等值得优先着手。
- 动画：替代 GIF 的常见选择是 WebP 动画，MDN 的指南也建议动画用途考虑 WebP、AVIF 或 APNG。AVIF 的图像序列在规范层面是支持的，但如前一节所述，各浏览器的支持时间有差异，较长的动画也可以考虑用
video元素配合 MP4 或 WebM 来替代。 - HDR 与高位深：MDN 的指南 (2026 年 8 月更新) 中列出 8 / 10 / 12 位色深和 HDR 支持的是 AVIF，WebP 为 8 位。在摄影作品发布等重视色彩层次的用途中，这是选择 AVIF 的一个理由。
迁移的优先级按效果大小和工作量来定。对许多网站来说，按 (1) 透明图 (替换 PNG)、(2) 主视觉和 LCP 图像、(3) 数量众多的照片、(4) 把已经是 WebP 的插画和截图改为 AVIF 的顺序推进比较高效。
用自己的图片比较 - Squoosh、cwebp、avifenc
格式之间的差异因图片和设置而异，因此在引入之前，从自己网站实际发布的图片中挑几张来试验是可靠的做法。下面按上手难度从低到高介绍两种手段，以及公平比较结果的原则。
在浏览器中试 (Squoosh)：Squoosh (squoosh.app) 可以在浏览器中压缩图像，并在切换编码器和画质的同时与原图对照。文件大小会即时显示，适合寻找观感可以接受的最低画质。无需安装。
在命令行中试 (cwebp / avifenc)：libwebp 附带的 cwebp 用 -q 指定 0-100 的画质 (默认值 75、cwebp 文档 2025 年 8 月更新)，加上 -lossless 则切换为无损模式。libavif 附带的 avifenc 同样用 -q 指定画质 (libavif README)。把同一张图按几个不同画质分别导出，将体积和观感列成表，适合自己图片的设置就会浮现出来。
cwebp -q 75 input.png -o output.webp
avifenc -q 75 input.png output.avif对齐画质再比较：要公平比较，先决定是固定文件大小比观感，还是固定观感比大小。也可以使用 SSIM 这类画质指标，但最终在实际显示尺寸下目视确认才可靠。文字、皮肤、天空渐变、细密纹理这四处最容易暴露劣化，要重点查看。
这一阶段得到的数字，只适用于自己的图片和当时的设置。与其他网站公布的比较值不一致并不奇怪，把判断依据放在自己的测量上才稳妥。
总结 - 拿不准时的判断步骤
最后整理一下判断的流程。
- 最看重兼容性、不想多花精力时，保持 JPEG (照片) 和 PNG (透明、文字) 不变，只重新审视画质设置。
- 想要明显减小体积、同时运维保持简单时，迁移到 WebP，并用
picture元素保留 JPEG / PNG 作为回退。 - 想进一步缩小，或需要 HDR、高位深时，以 AVIF 为首选，搭配 WebP 和 JPEG 组成三级回退，编码时间的增加由构建阶段的批处理吸收。
- 动画以 WebP 动画为基本选择，较长的内容用视频元素替代。
无论处于哪个阶段，在引入前用自己的图片确认画质和体积，并通过 picture 元素的回退不抛弃旧环境，是迁移不出问题的要点。格式支持情况和编码器仍在持续更新，建议定期查看 caniuse 和各官方文档的最新版本。