WebP vs PNG：透明度、大小和质量比较
两种格式都支持透明度。这是如何在它们之间做出选择。
将 PNG 转换为 WebP简介
如果你需要透明度，PNG 是传统选择。几十年来，它一直是徽标、图标和 UI 元素的首选格式。但 PNG 并不总是最佳选择 — 特别是当文件大小很重要时。
WebP 也支持透明度，通常具有更小的文件大小。问题不是 WebP 能否替代 PNG，而是对于你的特定用例应该替代吗。
本指南比较 WebP 和 PNG 的透明度处理、文件大小、质量和实际工作流程考虑因素。到最后，你会知道对于不同类型的图像使用哪种格式。
快速答案：你应该使用哪一个？
这是简短版本：
- 对于大小重要的网页交付：WebP 在相当质量下通常更小。
- 对于严格的无损工作流程：PNG 仍然常见且得到普遍支持。
- 对于最大兼容性：PNG 在任何地方都有效；WebP 在极少数情况下需要后备。
- 当不确定时：测试两者并比较文件大小。
准备测试？将 PNG 转换为 WebP 并比较结果。
透明度：两者都支持，但边缘很重要
PNG 和 WebP 都支持完整的 alpha 通道透明度。你可以有完全不透明的像素、完全透明的像素，以及介于两者之间的所有内容（用于平滑边缘的半透明）。
区别在于压缩如何影响透明边缘：
PNG 透明度是无损的。每个像素都按设计精确保留。边缘保持锐利，透明区域周围没有压缩伪影。
WebP 透明度可以是有损或无损的。无损 WebP 像 PNG 一样完美保留边缘。有损 WebP 可能引入细微的伪影 — 最常见的是透明像素与不透明像素相接的边缘周围的“光晕”或“边缘”。
对于具有锐利边缘的徽标和 UI 元素，这很重要。在较低质量设置下，有损 WebP 可能使边缘看起来模糊或显示可见轮廓。解决方法是使用无损 WebP 或将质量提高到 90+。
了解更多关于 什么是 WebP 及其压缩如何工作。
文件大小和质量权衡
在大多数情况下，WebP 在相同视觉质量下比 PNG 生成更小的文件。但“更小”取决于图像内容：
| 图像类型 | PNG 大小 | WebP 大小 | 建议 |
|---|---|---|---|
| 简单徽标（几种颜色） | 小 | 通常相似 | 测试两者；PNG 可能没问题 |
| 复杂图标（渐变） | 中等 | 更小 | WebP 无损或高质量有损 |
| UI 截图 | 大 | 小得多 | WebP 无损 |
| 带透明度的照片 | 非常大 | 小得多 | WebP 有损 80-85 |
PNG 有时获胜的地方：颜色很少且边缘坚硬的非常简单的图像可以高效地压缩为 PNG。一些高度优化的 PNG（使用 pngquant 等工具处理）很难被击败。
WebP 获胜的地方：复杂图像、照片、渐变和任何有许多颜色的东西。图像越复杂，WebP 的大小优势越大。
要深入了解质量设置，请参阅 有损 vs 无损 WebP。
兼容性和工具
PNG 兼容性：通用。每个浏览器、图像查看器、设计工具、CMS 和操作系统都支持 PNG。没有需要担心的后备。
WebP 兼容性：自 2020 年以来所有现代浏览器都支持（Chrome、Firefox、Safari、Edge）。旧浏览器和一些旧工具可能不支持它。使用 <picture> 元素和 PNG 后备以获得最大兼容性：
<picture>
<source srcset="logo.webp" type="image/webp" />
<img src="logo.png" alt="Logo" />
</picture>工具：大多数现代设计工具（Figma、Sketch、Adobe）直接导出 WebP。一些旧工具或 CI/CD 管道可能需要 PNG。如果你的工作流程依赖于特定工具，在承诺之前检查它们的 WebP 支持。
决策指南：何时使用每种格式
| 用例 | 推荐格式 | 设置 | 为什么 |
|---|---|---|---|
| 徽标（网页交付） | WebP | 无损 | 文件更小，边缘完美 |
| 徽标（最大兼容性） | PNG | — | 在任何地方都有效 |
| 图标集 | WebP | 无损 | 批量转换，总大小更小 |
| UI 截图 | WebP | 无损 | 比 PNG 小得多 |
| 带透明度的照片 | WebP | 有损 80-85 | 显著的大小节省 |
| 打印/存档 | PNG | — | 通用，无质量损失 |
如何转换和测试
按照此工作流程决定对特定图像使用 PNG 还是 WebP：
- 在 img2webp.com 上转换：上传你的 PNG 并导出为 WebP（图形用无损，照片用有损 85+）。
- 比较文件大小：WebP 是否明显更小？如果相同或更大，保留 PNG。
- 视觉检查：以 100% 缩放检查两个文件。对于透明图像，在浅色和深色背景上测试。
- 决定：如果 WebP 更小且看起来相同，使用 WebP 并提供 PNG 后备。如果不是，保留 PNG。
尝试 WebP 导出并亲自看看区别。
相关资源
有关分步转换说明，请遵循我们的 PNG 到 WebP 教程。
要了解更广泛的格式格局，请参阅 WebP 用于更快的网站。
总结
PNG 非常适合无损透明度和通用兼容性。WebP 通常以更小的文件提供相同的视觉效果 — 有时显著更小。
对于性能重要的网页交付，WebP 通常是更好的选择。对于存档、打印或需要 PNG 的工作流程，坚持使用 PNG。
最安全的方法：转换、比较，让文件大小指导你的决定。