WebP vs JPG vs PNG：应该使用哪种格式？

简介

选择错误的图片格式会让你在质量或文件大小上付出代价。通常，团队默认对照片使用 JPG，对其他所有内容使用 PNG — 而不考虑这些选择是否仍然合理。

WebP 改变了这种权衡。它既能处理照片内容又能处理图形内容，支持透明度，通常比 JPG 或 PNG 生成更小的文件。但它并不总是最佳选择。

本指南提供一个简单的决策框架，然后解释详细信息，以便你能对任何图片做出自信的选择。

快速决策指南

使用此流程图作为起点：

1. 是照片吗？
   • 是 → JPG 或 WebP 有损（WebP 通常小 25-35%）
   • 否 → 继续
2. 需要透明度吗？
   • 是 → PNG 或 WebP（两者都测试）
   • 否 → 继续
3. 是徽标、图标或 UI 元素吗？
   • 是 → PNG 或无损 WebP
   • 否 → 可能是 JPG 或 WebP 有损
4. 还不确定？
   • 转换为 WebP，比较文件大小，保留更小的那个

准备测试？将图片转换为 WebP 看看区别。

照片：JPG vs WebP

对于照片和具有复杂颜色和渐变的图片，JPG 和 WebP 都使用有损压缩。区别在于效率。

JPG 已针对照片优化了数十年。它能很好地处理连续色调并产生合理的文件大小。它得到普遍支持 — 每个设备、浏览器和工具都可以处理 JPG。

WebP 使用更现代的压缩算法。在相同的视觉质量下，WebP 文件通常比等效的 JPG 小 25-35%。对于拥有许多照片的网站，这会累加为更快的加载时间和更低的带宽。

何时使用 JPG：

• 需要 JPG 的传统系统
• 电子邮件附件（通用兼容性）
• 当 WebP 不能产生有意义的大小节省时

何时使用 WebP：

• 性能重要的网页交付
• 当你可以提供 JPG 后备时
• 任何时候 WebP 更小且无质量损失

有关分步说明，请参阅我们的 JPG 转 WebP 教程。

透明度：PNG vs WebP

对于需要透明背景的图片 — 徽标、图标、UI 元素 — PNG 一直是默认选择。WebP 现在是一个强大的替代方案。

PNG 提供具有完整 alpha 通道支持的无损压缩。每个像素都被精确保留，包括半透明边缘。它得到普遍支持并在每种情况下都有效。

WebP 在有损和无损模式下都支持透明度。无损 WebP 像 PNG 一样保留边缘。有损 WebP 可以创建更小的文件，但可能在较低质量设置下引入边缘伪影。

何时使用 PNG：

• 需要最大兼容性
• 你的工作流程或工具不支持 WebP
• PNG 已经高度优化且 WebP 并不更小

何时使用 WebP：

• 文件大小重要的网页交付
• 你可以测试并验证边缘质量
• WebP 产生明显更小的文件

有关详细比较，请参阅 WebP vs PNG。有关转换步骤，请遵循我们的 PNG 转 WebP 教程。

徽标和 UI 元素

徽标、图标和 UI 图形通常具有：

• 颜色之间的锐利边缘
• 纯色（不是渐变）
• 透明度要求
• 无论格式如何文件大小都很小

对于这些图片，格式选择通常对文件大小影响不大 — 5KB 的 PNG 变成 4KB 的 WebP 并不具有变革性。关注：

1. 无损压缩以保留锐利边缘
2. 在多个背景上测试如果是透明的
3. 一致性贯穿你的资产库

使用 PNG 以获得最大兼容性，或使用无损 WebP 以获得稍小的文件。

兼容性和交付

JPG 和 PNG：通用支持。无需后备。

WebP：自 2020 年以来所有现代浏览器都支持（Chrome、Firefox、Safari、Edge）。对于罕见的旧浏览器，使用 <picture> 元素：

<picture>
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" />
</picture>

这会在支持的地方提供 WebP，否则回退到 JPG/PNG。

文件大小不是一切：如果提供 WebP 会增加构建管道的复杂性且大小节省微不足道，开销可能不值得。根据你的具体情况评估。

简单的测试工作流程

1. 确定图片类型：照片、图形、透明还是混合？
2. 转换为 WebP：使用 img2webp.com 并设置适当的设置（照片用有损，图形用无损）。
3. 比较文件大小：WebP 是否明显更小？
4. 视觉检查：在 100% 缩放和实际显示大小下查看两者。对于透明图片，在浅色和深色背景上检查。
5. 决定：使用在大小上获胜且不牺牲质量的格式。

总结

JPG 和 PNG 仍有其用武之地，但 WebP 是网页交付的强大默认选择：

• 照片：WebP 有损通常比 JPG 小 25-35%
• 透明度：WebP 能处理，通常文件比 PNG 小
• 图形：无损 WebP 或 PNG — 测试并比较
• 兼容性：对于罕见的旧浏览器使用 <picture> 后备

最好的方法是测试你的特定图片。几秒钟的比较可以节省带宽，改善加载时间，并确保你做出明智的格式选择。