WebP vs JPG vs PNG vs AVIF — 何时该用哪一个（2026）
Tomoda Hinata工具作者与维护者发布于 2026年4月26日约 4 分钟阅读
随时寄出的照片用 JPG；需要透明或硬边缘时用 PNG；当下 Web 的默认是 WebP（Safari 14 以来所有浏览器原生支持）；愿意放弃 Outlook 兼容来再省 30% 时选 AVIF。本文从体积、浏览器支持、用途适配三个维度交叉比较，并给出可在浏览器对比工具里自行验证的数据。
本指南使用的工具
四种格式速览
JPG（1992）有损、无透明、万能。PNG（1996）无损含 alpha，适合 Logo 与截图，但同质量照片体积约是 JPG 的 5 倍。WebP（2010，Google）兼具有损/无损/alpha，同画质比 JPG 小 25–35%。AVIF（2019，AV1 编码）是最新一代，比 WebP 再小 20–30%，压缩最强但旧端兼容性最弱。
什么时候选 JPG？
目的地比「现代 Web」古老，或万能兼容比再省 30% 重要时：邮件附件（Outlook 桌面不支持 WebP）、印刷交付、Word/PowerPoint 嵌入、给非技术用户。照片质量 78 是甜蜜点，文本截图选质量 90。
PNG 何时真的占优？
JPG 做不到的三件事：透明（彩底 Logo）、像素级边缘（UI 截图、细线图）、无损（之后还要再编辑）。给照片用 PNG 浪费 —— 1080p 照片改用 PNG 大约是同质 JPG 的 5 倍而看不出差。Logo / 复杂透明用 PNG-24+α；简单图标 PNG-8。
为什么 WebP 是当下 Web 默认？
所有现代浏览器原生解码（Chrome 32+/Firefox 65+/Safari 14+/Edge —— 2022 年起全球流量 >98%）。WebP 照片同画质比 JPG 小 25–35%，无损 WebP 比 PNG 小约 25%。唯一短板是 Outlook 桌面邮件渲染。
AVIF 什么时候值得？
AVIF（AV1 帧内压缩）比 WebP 再小 20–30%，对大首屏图片的内容站点很有意义。代价是 Outlook 桌面、部分微软应用和较旧移动浏览器不支持。配 `<picture>` 给 WebP 兜底，或等到分析数据中老旧流量低于 2% 再切。
决策树
目的地是 Outlook / 邮件 / 印刷？→ JPG（照片）或 PNG（透明图形）。给现代受众的 Web 资源？→ WebP 质量 82；截图用无损 WebP。98% 以上是现代浏览器且要把 LCP 压到极致？→ `<picture>` 里 AVIF + WebP 兜底。Web 上需要透明？→ WebP 或 AVIF（更小）；新项目不要再用 PNG。
| 格式 | 照片 (1920×1280) | UI 截图 (1920×1080) | Logo + 透明 | 浏览器支持 |
|---|---|---|---|---|
| JPG 质量 82 | 245 KB | （不支持透明） | （不支持透明） | 100% |
| PNG | 1.65 MB | 92 KB | 11 KB | 100% |
| WebP 质量 82 | 165 KB | 55 KB（无损） | 8 KB | 98% |
| AVIF 质量 60 | 115 KB | 48 KB | 6 KB | 92% |
常见问题
哪个格式兼容性最好？
JPG/PNG 100%，WebP 约 98%，AVIF 约 92%。
WebP 比 AVIF 更小吗？
不是。AVIF 同画质下比 WebP 小 20–30%。WebP 是兼容更广的默认，AVIF 是带兜底的「更小」选项。
为什么不比较 HEIC？
HEIC 是 iPhone 内部存储格式，不是 Web 格式。浏览器不原生解码，邮件不内联显示。Web 用先转 JPG/WebP/AVIF。
WebP 选无损还是有损？
照片选有损（质量 82）。截图、Logo、含文字图形选无损 WebP — 无损同时比 PNG 还小约 25%。
TIFF 呢？
TIFF 是桌面/印刷/归档用，不是 Web 格式。
可以只用一种格式吗？
如果只能选一个：照片 JPG，透明图形 PNG。WebP/AVIF 是优化层。
立即试用
Encode one image in all five modern formats in parallel — size + time side by side
Modern Image Format Comparator (PNG / JPEG / WebP / AVIF / JXL)本文包含 AI 翻译，如发现错误欢迎告知。