有损与无损 WebP：您应该选择哪种？

简介

两个 WebP 文件看起来可能完全相同，但文件大小却可能相差悬殊。这种差异通常取决于一个选择：有损或无损压缩。

人们转换为 WebP 是为了获得更小的文件，但错误的模式或设置可能会导致质量下降或文件大小没有改善。了解 什么是 WebP 是第一步；选择正确的压缩模式是下一步。

本指南用实用的术语解释有损与无损 WebP，为常见图像类型提供决策规则，并提供测试您的选择的快速工作流程。

有损与无损：通俗定义

有损压缩通过丢弃一些图像数据来减小文件大小。编码器分析图像并删除人眼不太容易察觉的信息。结果是更小的文件，但您无法恢复原始数据——压缩是单向的。

无损压缩在不丢弃任何数据的情况下减小文件大小。编码器找到更有效的方式来表示相同的信息，因此输出中的每个像素都与原始图像完全匹配。文件通常比有损压缩大，但没有质量损失。

两种模式都支持透明度（Alpha 通道）。然而，有损压缩可能会在透明边缘周围引入伪影，特别是在较低质量设置下。无损压缩可以完美保留边缘。

何时选择无损 WebP

无损 WebP 最适合标志、UI 元素、截图以及具有尖锐边缘和纯色的图形。这些图像类型在颜色之间有硬过渡，有损压缩往往会模糊这些过渡。

为什么无损压缩适用于图形：

• 纯色和硬边缘使用无损算法可以有效压缩
• 文本或细线周围没有伪影风险
• 像素完美的输出与原始图像完全匹配

无损压缩可能无效的情况：

• 复杂图像（如照片）无损压缩效果不佳——文件可能比原始 PNG 更大
• 如果您的“图形”实际上是带有一些文本的照片，高质量有损压缩可能更好

常见的工作流程：首先尝试无损压缩，将文件大小与高质量有损导出进行比较，然后在满足质量需求的同时保留较小的那个。

对于具有透明度的图像，请参阅我们的 PNG 到 WebP 教程，其中详细介绍了边缘处理。

快速测试工作流程

以下是为任何图像找到最佳设置的简单工作流程：

1. 从基线开始：使用您期望的模式（照片使用有损，图形使用无损）将图像转换为 WebP。
2. 比较文件大小：记录 WebP 大小与原始大小。如果无损压缩比原始 PNG 更大，请尝试高质量有损压缩。
3. 视觉检查：以 100% 缩放打开两个文件。对于透明图像，将它们放在浅色和深色背景上。
4. 调整并重复：如果可见伪影，提高质量或切换模式。如果文件太大，小心降低质量。
5. 保留优胜者：保存满足您的大小和质量要求的版本。

使用 img2webp.com，您可以在几秒钟内尝试有损和无损导出并直接比较。

常见错误

选择 WebP 设置时避免这些陷阱：

• 对带文本的截图使用有损压缩：文本边缘容易模糊。使用无损压缩或质量 95+。
• 过度优化小图标：一个 2KB 图标变成 1KB 并不重要，如果 HTTP 头添加了 500 字节。首先关注大图像。
• 假设 WebP 总是优于 PNG/JPG：测试您的特定图像。一些高度优化的 PNG 很难超越，一些 JPG 已经接近最优。
• 忽略尺寸：一个质量 80 的 4000px 图像仍然很大。首先调整到实际使用尺寸。

有关何时保留原始格式的更多指导，请参阅我们的 WebP 与 PNG 比较。

总结

正确的 WebP 模式取决于您的图像内容：

• 照片和渐变：使用有损压缩，从质量 80 左右开始。
• 图形、标志和文本：使用无损压缩，或者如果无损太大则使用 90+ 有损压缩。
• 透明图像：仔细测试边缘；无损可避免光晕。

最佳方法是在您的实际图像上测试两种模式并进行比较。几分钟的测试可以节省以后数小时的返工。