PNG vs WebP vs AVIF 深度对比 — 2026年最优的图像格式是？

在网站性能优化中，图像格式的选择至关重要。在2026年的现在，除了传统的 PNG 外，Google 开发的 WebP 和下一代格式 AVIF 已逐步普及，那么应该选择哪种格式呢？本文从文件大小、图像质量、浏览器支持和工具支持等方面对这三种格式进行了全面比较。

各种格式的特点

PNG（Portable Network Graphics）

PNG 是 1996 年推出的无损压缩图像格式。它支持透明度（alpha 通道），广泛用于截图、徽标和图标。虽然其压缩率相比其他格式较低，但具有零图像质量损失的优点。

• 压缩方法：无损压缩
• 透明度支持：有（alpha通道）
• 动画：支持 APNG
• 浏览器支持：所有浏览器均支持

WebP

WebP 是 Google 在 2010 年开发的图像格式。同时支持无损压缩和有损压缩，与 PNG 相比可减少约 26% 的无损压缩文件大小，与 JPEG 相比可减少约 25~34% 的有损压缩文件大小。截至 2026 年，所有主要浏览器都支持该格式，实际上不存在兼容性问题。

• 压缩方法：同时支持无损和有损
• 透明度支持：有
• 动画：是
• 浏览器支持：Chrome、Firefox、Safari、Edge 均支持

AVIF（AV1 Image File Format）

AVIF 是基于 AV1 视频编码器技术的图像格式，从 2020 年左右开始普及。它实现了比 WebP 更高的压缩率，在相同画质下可将文件大小减少到 WebP 的约 50%、PNG 的约 70% 以上。不过，编码速度较慢是其缺点。

• 压缩方法：同时支持无损和有损
• 透明度支持：有
• 动画：是
• 浏览器支持：Chrome 85+、Firefox 93+、Safari 16.4+、Edge 121+

文件大小比较

显示以各种格式保存同一图像时的文件大小参考值（有损压缩，质量 80）。

从这个比较可以看出，AVIF对于照片和截图最有效。不过要注意，PNG的数值是无损压缩的，不是严格的画质比较。

应该选择哪种格式

2026年目前的建议是根据用途进行选择。

• <strong>徽标、图标、透明图像</strong>——PNG 或 SVG。如果需要无损质量，只选择 PNG
• <strong>照片、缩略图</strong>——首选 AVIF，WebP 作为备选
• <strong>CMS·博客文章</strong> — WebP 是安全的选择，在几乎所有环境中都能正确显示
• <strong>性能优先</strong> — 使用 <code>&lt;picture&gt;</code> 元素按 AVIF → WebP → PNG 的顺序回退

<picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.png" alt="説明文" loading="lazy">
</picture>

转换工具和方法

这里介绍命令行中的转换方法。

# PNG → WebP（cwebp を使用）
cwebp -q 80 input.png -o output.webp

# PNG → AVIF（avifenc を使用）
avifenc --min 20 --max 30 input.png output.avif

# ImageMagick での一括変換
magick mogrify -format webp -quality 80 *.png

测试图像文件

对于各种格式的操作验证和上传测试，请使用 DevLab 的测试图像文件。

• <a href="/ja/files/images/png/">PNG 测试文件</a> — 10KB 到 100MB 各种尺寸
• <a href="/ja/files/images/webp/">WebP 测试文件</a> — 用于 WebP 支持验证
• <a href="/ja/files/images/">图像测试文件列表</a> — 在列表中查看所有格式

总结

截至2026年，WebP已是稳定的选择，AVIF也正在获得主流浏览器的支持。对于新项目，建议使用<code>&lt;picture&gt;</code>元素实现渐进式回退，并积极采用AVIF。不过，在需要无损压缩和图像编辑工作流的场景中，PNG仍然扮演着重要角色。