1. 首页
2. 图片格式

图片格式对比：JPEG、PNG、WebP 与 AVIF

现代网页上绝大多数图片可归入这四种格式。它们在压缩、透明、动图与浏览器支持之间取舍不同。下面是一份面向实际选型的指南。

并排概览

先快速对照，各格式详解见下文。

JPEG — 通用基线

原理

JPEG（联合图像专家组）于 1992 年标准化，是四种格式中最古老的一种。它对 8×8 像素块做有损离散余弦变换，再经量化与熵编码。质量由 1–100 的单一数值控制。现代编码器如 MozJPEG 在不改变比特流兼容性的前提下，可再挤出约 10–20% 体积。

适合

层次平滑、细节丰富的摄影内容 — 人像、风景、商品图、全宽首图等。

优点

• 几乎所有图像查看器都支持。
• 多数平台具备硬件加速解码。
• 优化工具生态成熟（MozJPEG、jpegli 等）。

缺点

• 无 Alpha — 背景需预先合成。
• 文字、线稿与锐利边缘易出现块状伪影。
• 每通道仅 8 位。

PNG — 无损与透明

原理

PNG（便携式网络图形）诞生于 1990 年代中期，作为无专利风险的 GIF 替代。它严格 无损：在逐行滤波之上使用 DEFLATE。像 oxipng（optipng 的 Rust 移植）这样的优化器会尝试多种滤波/压缩组合，在不改变任何像素的前提下寻找更小文件。

适合

界面图形、图标、截图、示意图、线稿 Logo，以及需要真正 Alpha 通道的内容。

优点

• 无损 — 往返编解码像素完全一致。
• 完整 8 位 Alpha，最高每通道 16 位。
• 浏览器普遍支持。

缺点

• 照片体积往往远大于 JPEG/WebP/AVIF。
• 原始规范不含动图（APNG 为后续扩展）。

WebP — Google 的网页优先格式

原理

WebP 由 Google 于 2010 年发布，基于 VP8 视频编码，后增加独立的无损模式。同一容器内可有损或无损，并可选 Alpha 与动图。有损模式下，在相近观感下通常比 JPEG 小 25–35%；无损模式下常比 PNG 小 20–30%。

适合

在 AVIF 尚未稳妥覆盖时的通用网页分发 — 照片、带透明的 UI 雪碧图、GIF 动图替代，以及作为 AVIF 之下的回退层。

优点

• 一种格式覆盖照片、图形、透明与动图。
• 在相近质量下明显小于 JPEG 与 PNG。
• 支持面广：2020 年后的主流浏览器均已覆盖。

缺点

• 每通道 8 位 — 不适合 HDR 主流程。
• 在部分低端设备上解码慢于 JPEG。

AVIF — 当前压缩效率的领先者

原理

AVIF（AV1 图像文件格式）是 AV1 视频编码的静帧配置，2019 年由开放媒体联盟发布。支持最高 12 位色、完整 Alpha、HDR、广色域与胶片颗粒合成。参考编码器（libavif 使用的 aom-av1）编码较慢，但对真实世界照片常能给出当今最优的体积。

适合

首图、相册与任何「带宽比 CPU 时间更贵」的场景。适合作为 <picture> 中的最高优先级源。

优点

• 同类最优压缩 — 常见地比 JPEG 小 40–60%。
• 支持 Alpha、动图、HDR、广色域与 10/12 位。
• 免版税且开放。

缺点

• 编码慢 — 适合构建时或异步流水线。
• Safari 直至 16 版（2022）才支持。
• 对合成图形/矢量栅格化的表现有时不如 WebP 无损或 PNG。

应该选哪种格式？

• 照片、全宽首图：以 AVIF 为主，通过 <picture> 提供 WebP 与 JPEG 回退。
• 需要透明的 UI（图标、Logo）：兼容优先用 PNG；体积优先用 WebP 无损。
• 线稿、截图、示意图：PNG（或 WebP 无损）— JPEG/AVIF 在锐利边缘上易产生伪影。
• 替代 GIF 动图：WebP 或 AVIF — 二者体积远小于 GIF，并支持真透明。
• 必须兼容所有浏览器：照片用 JPEG，图形用 PNG — 不一定最小，但兼容性成本为零。

实践中不必只选一种。在 <picture> 中先提供 AVIF，其次 WebP，最后 JPEG 或 PNG — 每个浏览器都会拿到它能解码的最小版本。