JPG、PNG、WebP 还是 AVIF：图片格式怎么选，附实测体积

一句话

照片：JPEG 仍然够用，AVIF 小得多；WebP 夹在中间，而且它相对于编码得当的 JPEG 的优势，比宣传数字小。截图、logo、图表，以及任何有大片纯色或透明的图：PNG 或无损 WebP，绝不用 JPEG。下面是这些结论背后的数字，来自一次真实的编码测试，不是厂商图表。

“更小”必须指什么

把各格式都设成“质量 80”来比，没有意义：每种编码器的质量刻度都不一样。唯一公平的比法是：同样的观感，各多大？ 本文的做法是，每种格式从低质量往上编码，直到与原图的结构相似度达到同一个值（SSIM 0.98，按亮度通道算），记下那一刻的体积。两张测试照片：桌上的一杯浓缩咖啡（1200 × 800）和一张人像（1024 × 1024），都是公有领域的样例图。编码器：通过 Pillow 12 调用的 libjpeg-turbo、libwebp（method 6）和 libavif（speed 4）；本站工具用的是 MozJPEG，通常能在 JPEG 这一栏再省 5–10%。

格式	照片 1（1200×800）	照片 2（1024×1024）	达到的设置
JPEG	95 KB	86 KB	q68 / q66
WebP	104 KB	76 KB	q86 / q84
AVIF	59 KB	47 KB	q60 / q58
PNG（无损）	1 223 KB	1 034 KB	—
WebP 无损	860 KB	701 KB	—

两件事很明显。同等 SSIM 下 AVIF 比 JPEG 小 38–46%——这部分传言是真的。WebP 在这两张照片上和 JPEG 基本打平：一张大 9%，一张小 12%。常被引用的“比 JPEG 小 25–34%“来自 Google 2010 年的研究，对比对象是一个未经优化的 JPEG 编码器，而且是固定质量设置；面对现代编码器、按同等观感比，这个差距大部分消失了。有一点对 WebP 有利：低码率下它对细节和锐利边缘的处理比 JPEG 略好，而 SSIM 对此给分偏低。有一点对它不利：WebP 的色度只能 4:2:0 子采样，所以照片上饱和的红色文字会有轻微糊边，而 4:4:4 的 JPEG 不会。

对测试本身的一个说明：两张源图本来就是 JPEG，所以每个编码器都是在压缩“画面 + 上一次的压缩痕迹”。从 RAW 或 PNG 原件出发，三种有损格式都会再小一点，排名不变。

PNG 是给另一种图用的

表里 PNG 是 JPEG 的十二倍。这不是 PNG 差，是让 PNG 干了不该它干的活。PNG 是无损的——每个像素原样回来——而照片每个像素里都有噪点，噪点压不动。换第三张测试图，一张纯色块、透明背景的抠图插画（900 × 600），局面反过来：

格式	体积
PNG	66 KB
WebP 无损	55 KB
AVIF q80	54 KB
JPEG q90	76 KB，而且透明没了

纯色、文字、截图、图表、logo：PNG 或无损 WebP。截图存成 JPEG，每个字母周围都是振铃噪波，而且通常比 PNG 更大。照片存成 PNG，是一个以 MB 计的错误，会体现在网页加载时间和被退回的邮件上。

浏览器和软件支持，实话实说

• JPEG：一切，从 1992 年起。凡是要交出你控制范围的东西——冲印店、政府表单、老安卓手机、Word 文档——用它最稳。
• PNG：2005 年以后的一切。
• WebP：所有现行浏览器（Safari 从 14 起，2020 年）。Windows 照片能打开；旧版 Office、多数照片打印机和很多上传表单还不行。
• AVIF：Chrome 85+、Firefox 93+、Safari 16.4+（2023）、Edge 121+。浏览器之外支持很薄：Windows 要装 Store 扩展，macOS Ventura 以上原生支持，其它软件大多不行。到 2026 年，它是一个在网页上提供图片的格式，不是一个交给别人的格式。
• HEIC：实际上只有苹果设备——见 HEIC 是什么。

怎么选

• 把照片发给人或表单：JPEG，质量 80–85。90 以上体积翻倍，差别没人看得出。
• 自己网站上的照片：AVIF 加 JPEG 后备（<picture>）；图片流水线还出不了 AVIF 就用 WebP。
• 截图、logo、图表、任何带透明的：PNG；消费方是浏览器时用无损 WebP。
• 归档自己的照片：原件是什么就留什么，不要“转一下省空间”——每次有损重编码都在减分。

转格式在浏览器里在这四种格式间转换；压缩并排显示前后效果和将要产生的体积，你可以停在看起来真的一样的那一档，而不是滑块默认的那一档。