PNG、WebP 还是 AVIF：网页图像格式到底怎么选

随便打开一个网页，上面的图像十有八九是 PNG、WebP 或 AVIF。老的「JPEG 还是 PNG」之争已经悄悄变成三选一,而正确答案从来不是画质教条,而是「这张图是什么、要发到哪里」。下面是实用版结论——也是我们自己发图时用的决策规则。

30 秒历史课

• PNG（1996）——无损主力。每个像素原样保留,8-bit 透明通道完美,这个世纪的所有设备和软件都认识它。短板:照片这类”噪点多的内容”无损压缩后体积很大。
• WebP（Google,2010）——为缩小网页图像而生。有损/无损两种模式都支持透明。Safari 拖到 2020 年的 14 版才支持,这是最后一块兼容性短板;今天可以放心用。
• AVIF(AOM 联盟,2019)——AV1 视频编码的静态图版本。压缩率前所未有,支持 10/12-bit 色深和 HDR,2023 年起浏览器覆盖到位(Chrome、Firefox、Edge、Safari 16.4)。代价是编码慢、生态还不成熟。

关键维度对比

	PNG	WebP	AVIF
压缩	仅无损	有损 + 无损	有损 + 无损
透明通道	支持(alpha)	支持(两种模式)	支持
照片体积 vs JPEG	大 2–3 倍	小 25–34%	小 40–50%
色深	8-bit(24-bit RGB)	8-bit	8/10/12-bit、HDR
编码速度	快	快	慢(常为 PNG 的 5–10 倍)
浏览器支持	全部	2020 年起全部	Chrome/Firefox/Edge/Safari 16.4+
浏览器之外的生态	全部	良好、持续改善	参差不齐
动图	不行(那是 APNG)	支持	支持

「照片体积」那行是重点:同一张 JPEG 照片,转成 WebP 大约缩小四分之一,转成 AVIF 大约缩小一半,画质不变。对一张图是小事,对一个网站是带宽账单和加载速度。

我们用的选型规则

1. 截图、logo、线条图、一切硬边内容 → PNG 或无损 WebP。 有损格式会糊掉界面图形的纯色和锐边——你肯定见过发虚的截图。PNG 让文字像素级锐利。如果目标平台接受 WebP,无损 WebP 还能比 PNG 再小 20–30%,画质完全一致。

2. 发到网上的照片 → WebP,能控制发布管线就用 AVIF。 照片用 PNG 发网页基本是错误:同等画质下常常是 WebP 的 5–10 倍大。WebP 是安全默认;AVIF 压得更狠、渐变(日落、肤色)伪更少,但编码慢意味着适合「发布时转一次」,不适合实时转。

3. 要编辑或归档的照片 → PNG(或保留原格式)。 PNG 是编辑安全格式:无损意味着反复打开重存不损失。永远不要把母版存成有损格式。

4. 邮件附件、上传表单、老软件 → JPEG 或 PNG。 面对不可知的接收方,兼容性大于效率。AVIF 今天被上传表单拒之门外,就像十年前的 WebP。

兼容性这块,说实话

浏览器支持不等于生态支持。WebP 各系统的看图软件都能开;AVIF 在浏览器之外就参差了:Windows 要装商店里的解码器(新版本自带),macOS Sequoia+ 的预览和快速查看能开,大量第三方应用和 CMS 插件仍然解不了。这剧本和 HEIC 的历史一模一样:新软件没问题,老软件闹脾气。

所以务实的工作流是:**母版存 PNG(或原格式),发布时生成 WebP/AVIF 副本。**转换很便宜而且是本地完成——我们的 PNG 转 WebP 和 PNG 转 AVIF 都在浏览器里跑编码器,原始文件不出你的电脑,一次生成两种副本。需要往回转(某个工具不认 AVIF、或要编辑 WebP)时,WebP 转 PNG 给你无损工作副本,PNG 的格式指南里有完整规格说明。

那 JPEG XL 呢?

偶尔有人提 JPEG XL(JXL)是”全能接班人”:无损比 PNG 强、有损比 AVIF 强,还有 JPEG 比特级转码这个杀手锏。技术确实好。但 Chrome 和 Safari 都没进,对网页发布来说它现在属于归档师、不属于上线页面。好奇的话看 JXL 格式指南,诚实的总结是”观望,别上头”。

FAQ

WebP 画质不如 JPEG 吗?

不是——同体积下 WebP 比 JPEG 清楚,同画质下比 JPEG 小。早年 WebP 的差口碑来自激进的编码参数,现在的编码器很成熟,只有把质量拉到很低才会出现伪影。

我的 PNG 怎么这么大?

因为 PNG 无损,而照片全是噪点。一张 1200 万像素照片有几百万个微妙不同的像素,无损压缩必须逐一精确描述——很贵。纯色应用窗口截图压 PNG 效果极好,森林照片就不行。照片该转 WebP。

AVIF 能当唯一的网页图像格式吗?

今天不行。浏览器到位了,上传管线、邮件客户端、工具链没有。用 <picture> 标签让 AVIF 搭配 WebP(或 JPEG)回退。如果你的受众 95% 是新 Chrome(某些内部系统确实如此),纯 AVIF 也能辩护。

PNG 转 WebP 会掉画质吗?

无损 WebP 模式不会——解码出的像素完全一致。有损模式会,方式同 JPEG。多数”PNG 转 WebP”工具默认有损;我们的让你选,带文字或透明通道的图建议无损。