PNG vs WebP：新格式值得切换吗？深度比较指南

WebP 是 Google 在 2010 年推出的现代图片格式，设计目标就是在保持相同视觉品质的前提下，比 JPG 和 PNG 更小。如今各大浏览器的支援度已相当成熟，越来越多网站开始采用 WebP。但 PNG 长达三十年的地位并非没有道理——它有自己不可替代的优势。本文深入比较两者，帮助你判断是否值得切换。

WebP 的压缩优势

Google 的官方研究数据显示，WebP 的无损版本比同等 PNG 平均小 26%；有损版本则比 JPG 平均小 25–34%。这不是边际差距，而是相当可观的节省。

WebP 的压缩技术基于 VP8 视讯编码，采用更先进的预测编码和熵编码算法，能更有效率地描述图像资料。无论是照片还是图形，它都能做到比 PNG 更小的输出。

对于网站而言，图片通常占页面总资料量的 50–70%。全面切换到 WebP 可以让 LCP（最大内容绘制）时间显着下降，直接提升 Google Core Web Vitals 分数，进而改善 SEO 排名。

透明度支援

WebP 同样支援 Alpha 通道透明度，功能与 PNG 相当。你可以使用带有透明背景的 WebP 图片，并且在视觉效果上与 PNG 几乎没有差异——但档案更小。

这一点很重要，因为许多人误以为 WebP 只有 JPG 那样的有损版本。事实上，WebP 有两种模式：

• 无损 WebP：用于取代 PNG，支援透明度，无品质损失
• 有损 WebP：用于取代 JPG，不支援透明度，但压缩率极高

浏览器相容性现况

截至 2024 年，WebP 的全球浏览器支援率已超过 97%，涵盖：

• Chrome（2011 年起支援）
• Firefox（2019 年起支援）
• Safari（2020 年 iOS 14 / macOS Big Sur 起支援）
• Edge（2018 年起支援）

唯一需要注意的例外是 Internet Explorer——IE 完全不支援 WebP。但 Microsoft 已于 2022 年 6 月正式终止 IE 支援，如果你的目标用户不包含 IE 使用者（通常是企业内网系统），IE 相容性已不再是实际障碍。

何时坚持使用 PNG

尽管 WebP 在压缩方面占优，PNG 在某些场景下仍是更好的选择：

• 设计源档与素材库：设计工具（如 Photoshop、Figma）对 WebP 的原生支援仍不完整。储存可供日后编辑的素材时，PNG 仍是业界标准。
• 印刷与出版：印刷流程通常需要 PNG、TIFF 等无损格式，WebP 的接受度较低。
• 电子邮件图片：许多电子邮件客户端（如 Outlook）不支援 WebP。电子报或 HTML 邮件中的图片最好仍使用 PNG 或 JPG。
• 旧版系统整合：若你的系统或合作平台对图片格式有特定要求，需确认对方是否接受 WebP。
• 截图与萤幕录制：作业系统的截图工具预设输出 PNG，转换不一定必要。

实际效能测试比较

以几种常见情境为例的概略比较：

• 1200×800 产品照片：PNG 约 800 KB → 无损 WebP 约 580 KB（节省 27%）
• 透明背景 Logo（400×400）：PNG 约 45 KB → 无损 WebP 约 32 KB（节省 29%）
• 全彩插图：PNG 约 1.2 MB → 无损 WebP 约 880 KB（节省 27%）

对于大型网站来说，这种节省积累起来非常可观——假设每月有 10 万次图片请求，切换 WebP 可节省数十 GB 的频宽。

如何在网站上导入 WebP

最安全的做法是使用 HTML 的 <picture> 元素，提供 WebP 和 PNG 的回退方案：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="描述文字">
</picture>

支援 WebP 的浏览器会载入 WebP 版本；不支援的浏览器则自动回退到 PNG。这样既能享受现代浏览器的效能优势，又不必担心相容性问题。

WordPress 5.8 以上版本已原生支援 WebP 上传，许多图片优化外挂（如 ShortPixel、Smush、WebP Express）也能自动将现有图片转换并提供 WebP 版本。

转换工具与方法

• 线上转换工具：最简便的方式，无需安装软体，直接上传 PNG 即可下载 WebP。
• ImageMagick（命令列）：适合批次处理大量图片。
• Squoosh（Google）：免费线上工具，可即时预览不同格式和压缩设定的效果。
• Photoshop / Figma：较新版本已支援直接汇出 WebP。

总结：值得切换吗？

对于以下情况，答案是肯定的：

• 你在优化网站效能和 Core Web Vitals 分数
• 你的目标用户使用现代浏览器
• 你有大量图片需要提供给终端用户

但 PNG 仍有其不可替代的地位，特别是在设计工作流程和电子邮件应用中。最实际的策略是：网页展示用 WebP，设计素材和电子邮件保留 PNG。

在浏览器里直接完成，档案不会离开你的电脑：图片格式转换