JPG、PNG、WebP、AVIF 区别对比——不同场景该用哪种图片格式
用表格对比 JPG、PNG、WebP、AVIF 的压缩方式、透明度、色深、文件大小与 2026 年浏览器支持情况，并按上传报名照片、博客、Logo、截图等用途逐一说明该选哪种格式。
选择图片格式，归根结底看三点：内容是什么（照片，还是文字、线条较多的图形）、是否需要透明背景、接收方能否打开这种格式。本文先说明四种主流格式在结构上的差异，最后整理出按场景选择的对照表。浏览器支持数据是在基准日（2026-09-23）根据 Can I use 数据确认的数值。
一张表看懂对比
| 项目 | JPG(JPEG) | PNG | WebP | AVIF |
|---|---|---|---|---|
| 问世 | 1992 年 ITU-T T.81 | 1996 年 W3C 推荐标准 | 2010 年 Google 发布 | 2019 年 AOMedia v1.0.0 |
| 压缩 | 有损 | 无损 | 有损、无损均可 | 有损、无损均可 |
| 透明度 | 不支持 | 支持（Alpha 通道） | 支持 | 支持 |
| 动画 | 不支持 | 通过 APNG 支持 | 支持 | 支持 |
| 色深 | 每通道 8 位 | 最高 16 位 | 8 位 | 8、10、12 位（可支持 HDR） |
| 浏览器支持（按全球用户） | 几乎 100% | 几乎 100% | 约 96% | 约 95% |
支持比例以 Can I use 统计的全球浏览器使用份额为准。如果还要兼顾老旧浏览器或公司内部专用的查看器，JPG 和 PNG 依然最保险。
JPG——为照片而生的 30 年标准
JPG 把图像分成 8×8 像素的块，用离散余弦变换（DCT） 转换成频率分量，再对人眼不太敏感的高频分量做粗略的量化并丢弃。颜色信息也常常以低于亮度的分辨率保存（色度抽样）。因此，在天空、皮肤这类颜色平滑过渡的照片上，质量 80 左右就很难看出差别；但在文字、线条、纯色边界较多的图像上，边缘周围会出现晕染的污迹（振铃、块状噪点）。
- 优点：几乎所有设备、软件和上传入口都接受。可以用质量值在很大范围内调节体积。
- 局限：不支持透明度，而且每保存一次就会再累积一次损失，不适合作为编辑过程中的中间文件。
PNG——文字、Logo、截图的默认之选
PNG 是原样保留像素值的无损格式。它先对每一行应用计算与相邻像素差值的滤波器，再用 Deflate（与 zip 同一系列）压缩。在大面积同色的屏幕截图、图表、Logo 上，它比 JPG 更小也更清晰；但对于每个像素值都略有不同的照片，压缩效果不佳，体积有时是 JPG 的好几倍。
2025 年 6 月 W3C 发布的 PNG 第三版，把动画 PNG（APNG）、HDR 色彩信息和 EXIF 数据块正式纳入标准，同时保持与现有 PNG 文件的兼容。
WebP——把 JPG 和 PNG 合二为一
WebP 在一种格式里同时具备有损模式（基于 VP8 视频编解码器）和无损模式，两种模式都支持透明度和动画。Google 公布，在相同的 SSIM 画质指标下，有损 WebP 比 JPG 小 25~34%，无损 WebP 比 PNG 小 26%。这些数字是 Google 自己的测试结果，实际节省幅度会因图像内容和编码器设置而不同。
2024 年 11 月，WebP 的规范和媒体类型（image/webp）以 IETF RFC 9649 正式登记。Safari 从 14 版（macOS 需 Big Sur 及以上）才开始支持，所以如果用户中有很多人还在用 2020 年以前的苹果设备，最好同时准备替代图片。
AVIF——体积最小但编码较慢的新格式
AVIF 是把用免版税视频编解码器 AV1 压缩的图像装进 HEIF 系列容器的格式，开放媒体联盟（AOMedia）于 2019 年 2 月发布了 1.0.0 规范。它能容纳每通道 10、12 位的色彩和 HDR，在相同画质下往往比 WebP 更小。不过编码运算量大，批量转换大照片会很费时间；而且据 MDN 介绍，它不支持渐进式（progressive）显示。
主流浏览器开始支持的版本分别是 Chrome 85、Firefox 93、Safari 16.4（16.1 起部分支持）、Edge 121。Edge 加入得最晚（2024 年初），所以如果公司电脑上的 Edge 被固定在旧版本，可能无法显示。
画质下降时的样子也各不相同
同样是“低质量”，每种格式画质崩坏的样子都不一样。知道检查结果时该看哪里，就更容易确定质量值。
- JPG：8×8 块的边界像网格一样显现，文字和线条周围出现波纹般的晕染（振铃）。天空这类平缓区域会出现带状的色阶断层。
- WebP（有损）：块状痕迹比 JPG 轻，但细节会糊掉、颜色显得晕开。细的红色、蓝色线条尤其容易变模糊。
- AVIF：即使质量很低也几乎没有块状痕迹，但皮肤纹理、草地、头发之类的质感会被抹得很光滑，看起来像“水彩画”。
- PNG：无损，所以没有画质下降。不过如果通过减少颜色数来缩小体积，渐变处会出现色带。
查看结果时，与其看整体画面，不如把脸部、文字、天空放大到 100% 以上与原图对比。
JPEG XL 和 HEIC 处在什么位置
- JPEG XL：优点很多的新一代格式，比如能把现有 JPG 无损地重新封装得更小；但截至基准日，按 Can I use 数据只有 Safari 17 及以上部分支持，Chrome 和 Firefox 在默认设置下不显示。直接用于网页还为时过早。
- HEIC：iPhone 照片的默认格式，但在网页浏览器中只有 Safari 17 及以上能显示。提交或分享前一般先转成 JPG（HEIC 指南）。
按场景选择的流程
- 提交方（政府机关、学校、购物平台）规定了允许的格式吗？→ 按那个列表来，大多是 JPG。
- 需要透明背景吗？→ 网页用选 WebP，编辑、印刷用选 PNG。
- 是照片还是图形？→ 照片选 JPG（兼容性）或 WebP、AVIF（体积）；文字、线条、图表选 PNG 或无损 WebP。
- 想放到网站上提升加载速度？→ 使用 AVIF 或 WebP，同时为老旧浏览器备一份 JPG。
| 用途 | 首选 | 备选 | 避免 |
|---|---|---|---|
| 报名表、证件照上传 | JPG | 提交方允许时用 PNG | WebP、AVIF、HEIC |
| 博客、网站照片 | WebP、AVIF | JPG | 把照片存成 PNG |
| Logo、图标（透明） | PNG、WebP | SVG（矢量） | JPG |
| 屏幕截图、图表 | PNG | 无损 WebP | 低质量 JPG |
| 短动图 | WebP、AVIF 动画 | GIF（兼容性） | — |
| 交给印刷厂 | 印刷厂要求的格式 | 高质量 JPG、PNG | 反复重压缩过的 JPG |
转换时需要知道的事
- 有损 → 有损的转换会累积损失。 把 JPG 转成 WebP，会在 JPG 已经丢掉的信息之上再叠加 WebP 的损失。如果有原图，请只从原图转换一次。
- 透明 → 不透明的转换（PNG、WebP → JPG）时，透明部分必须用白色等背景色填充。
- 色深和 HDR 在转成 JPG 的那一刻就会降到 8 位。
- 如果光换格式体积降不下来，同时缩小分辨率效果最明显。原理详见照片压缩原理。
格式之间的转换可以用图片格式转换工具，全程只在浏览器内处理；各格式的详细规格整理在格式词典中。
常见问题
把照片存成 PNG，画质会比 JPG 更好吗？
把已经存成 JPG 的照片转成 PNG，只是从此不再产生新的损失，已经丢掉的信息并不会回来。而文件通常会大好几倍，所以除非有特殊理由（比如需要反复多次编辑），不建议把照片转成 PNG。
有没有不能上传 WebP 或 AVIF 的地方？
大多数网页浏览器都能显示这两种格式，但政府机关、学校、企业的上传入口常常只接受 JPG 或 PNG。如果对方写明了允许的扩展名，照着那个列表来最稳妥。
需要透明背景、文件又要小，该用什么格式？
如果是用于网页，同时支持透明度和有损压缩的 WebP 或 AVIF 会比 PNG 小得多。若接收方的程序打不开这两种格式，就用 PNG，并通过减少颜色数来降低体积。
参考来源
- MDN — Image file type and format guide
- Google for Developers — An image format for the Web (WebP)
- ITU-T Recommendation T.81 (09/92) — JPEG 规范
- W3C — PNG Specification (Third Edition)
- AOMedia — AV1 Image File Format (AVIF)
- Can I use — WebP image format
- Can I use — AVIF image format
- Can I use — HEIF/HEIC image format
- Can I use — JPEG XL image format