PNG vs WebP vs AVIF｜图像格式选择和转换方法
分类：图像·性能
本文目前仅提供日文版本。我们正在进行翻译工作。
图像格式选择是影响网站加载速度的最关键因素之一。截至 2026 年，主要选择有 <strong>PNG / JPEG / WebP / AVIF</strong> 4 种。本文整理了各自的特点、用途和浏览器支持情况，并说明了如何选择最佳格式。
格式对比表
| 格式 | 压缩方法 | 透明度 | 动画 | 图像质量 | 文件大小 | 浏览器支持 |
|---|---|---|---|---|---|---|
| PNG | 无损 (lossless) | ✅ | APNG | 最高（无损） | 大 | 所有浏览器 |
| JPEG | 有损 (Lossy) | ❌ | ❌ | 可调整质量 | 小～中 | 所有浏览器 |
| WebP | 无损 / 有损 | ✅ | ✅ | 优于 JPEG | 比 JPEG 小 25-35% | 95%+ |
| AVIF | 有损 / 无损 | ✅ | ✅ | 优于 WebP | 比 WebP 小 20% | 92%+ |
应该选择哪种格式
何时选择 PNG
- <strong>徽标、图标、屏幕截图</strong>等不允许质量下降的情况
- 包含文本的图像（压缩模糊后难以阅读）
- 需要透明度且需要IE11支持时（几乎不必要）
何时选择 JPEG
- 当照片和包含大量渐变的图像需要 <strong>最大兼容性</strong> 时
- 用于电子邮件附件或向旧设备交付时
选择 WebP 的情况 (推荐)
- <strong>大多数网站图像</strong> — 比 JPEG 小 25~35%
- 透明度和压缩兼得（PNG的替代方案）
- 动画（GIF 替代品——小得多）
- 浏览器支持率为 95%+，所以几乎没有问题
选择 AVIF 的情况（最前沿）
- <strong>追求最小文件大小时</strong>——比 WebP 小 20%
- 当您想让高质量照片尽可能轻量时
- 浏览器支持率 92%+ (Safari 16+, Chrome 85+, Firefox 93+)
实现模式：使用 <code>picture</code> 元素进行切换
最可靠的方法是使用 <code><picture></code> 元素指定多种格式。浏览器选择它支持的第一个来源。
<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。
用工具转换
<a href="/ja/tools/image-convert/">DevLab 的图像格式转换工具</a>只需使用浏览器就可以进行 PNG ⇄ WebP ⇄ JPEG ⇄ AVIF 之间的转换。使用质量滑块在转换时平衡文件大小和图像质量。无需上传到服务器，您的隐私也得到保护。
相关：使用 <a href="/ja/tools/exif/">EXIF查看器</a> 检查照片元数据和删除位置信息，或使用 <a href="/ja/tools/image-base64/">图像转Base64</a> 生成内联Data URL。
总结
- 如果不确定，选择 <strong>WebP</strong> — 最佳平衡
- 如果想进一步减小，使用<strong>AVIF</strong>（通过picture进行回退）
- 如果需要无损，使用 <strong>PNG</strong>
- 如果需要最大兼容性，使用 <strong>JPEG</strong>