PNG vs WebP vs AVIF｜图像格式选择和转换方法
分类：图像·性能
图像格式选择是影响网站加载速度的最关键因素之一。截至 2026 年，主要选择有 PNG / JPEG / WebP / AVIF 4 种。本文整理了各自的特点、用途和浏览器支持情况，并说明了如何选择最佳格式。
格式对比表
| 格式 | 压缩方法 | 透明度 | 动画 | 图像质量 | 文件大小 | 浏览器支持 |
|---|---|---|---|---|---|---|
| PNG | 无损 (lossless) | ✅ | APNG | 最高（无损） | 大 | 所有浏览器 |
| JPEG | 有损 (Lossy) | ❌ | ❌ | 可调整质量 | 小～中 | 所有浏览器 |
| WebP | 无损 / 有损 | ✅ | ✅ | 优于 JPEG | 比 JPEG 小 25-35% | 95%+ |
| AVIF | 有损 / 无损 | ✅ | ✅ | 优于 WebP | 比 WebP 小 20% | 92%+ |
应该选择哪种格式
何时选择 PNG
- 徽标、图标、屏幕截图等不允许质量下降的情况
- 包含文本的图像（压缩模糊后难以阅读）
- 需要透明度且需要IE11支持时（几乎不必要）
何时选择 JPEG
- 当照片和包含大量渐变的图像需要 最大兼容性 时
- 用于电子邮件附件或向旧设备交付时
选择 WebP 的情况 (推荐)
- 大多数网站图像 — 比 JPEG 小 25~35%
- 透明度和压缩兼得（PNG的替代方案）
- 动画（GIF 替代品——小得多）
- 浏览器支持率为 95%+，所以几乎没有问题
选择 AVIF 的情况（最前沿）
- 追求最小文件大小时——比 WebP 小 20%
- 当您想让高质量照片尽可能轻量时
- 浏览器支持率 92%+ (Safari 16+, Chrome 85+, Firefox 93+)
实现模式：使用 picture 元素进行切换
最可靠的方法是使用 <picture> 元素指定多种格式。浏览器选择它支持的第一个来源。
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>使用这种方法，支持AVIF的浏览器会加载AVIF，仅支持WebP的浏览器会加载WebP，都不支持的浏览器会加载JPEG。
用工具转换
DevLab 的图像格式转换工具只需使用浏览器就可以进行 PNG ⇄ WebP ⇄ JPEG ⇄ AVIF 之间的转换。使用质量滑块在转换时平衡文件大小和图像质量。无需上传到服务器，您的隐私也得到保护。
相关：使用 EXIF查看器 检查照片元数据和删除位置信息，或使用 图像转Base64 生成内联Data URL。
总结
- 如果不确定，选择 WebP — 最佳平衡
- 如果想进一步减小，使用AVIF（通过picture进行回退）
- 如果需要无损，使用 PNG
- 如果需要最大兼容性，使用 JPEG
❓ 常见问题
现在全面切换到 AVIF 可以吗？
主流浏览器均已支持，但比起直接替换，用 picture 元素并列 AVIF、WebP 与 JPEG 更稳妥。AVIF 编码开销大，小图上有时反而不如 WebP。先同时测量构建时间与传输体积，再只对确实划算的图片启用 AVIF。
Logo 和图标应该用哪种格式？
首选 SVG。它是矢量，放大不失真，简单图形比 PNG 更小，还能用 CSS 改色。只有含照片级渐变的 Logo，或不接受 SVG 的投放渠道，才退回位图；那时因为需要透明，请选 PNG 或 WebP。
转成 WebP 后文件反而变大了。
很可能你用了无损模式。对照片使用无损 WebP，其行为接近 PNG，结果会比原 JPEG 更大。请按输入性质切换：照片用有损（质量 75〜85 左右），带透明的图形用无损。对已被强压缩的 JPEG 再编码同样可能变大。