💡 Key Takeaways
- The Real-World Performance Gap Nobody Talks About
- Browser Support: The Elephant in the Conference Room
- Quality Perception: What Your Users Actually Notice
- The Mobile Performance Story Gets Complicated
上周二，我看到我们的CDN账单在一天内减少了847美元。这并不是因为流量下降——我们实际上达到了新的记录——而是因为我终于说服了我们的CTO让我将产品图片从JPEG转换为WebP。我是Sarah Chen，过去11年我一直在优化为电子商务平台传递图片，这些平台整体上服务2亿多月活跃用户。在这段时间里，我亲眼见证了格式战争的起起落落，但没有什么比WebP与JPEG的问题更能引发工程会议上的辩论。
💡 关键要点
- 没有人谈论的现实性能差距
- 浏览器支持：会议室里的大象
- 质量感知：用户实际上注意到的内容
- 移动性能故事变得复杂
这里是没有人告诉你的事情：答案并不简单，任何说“只是对所有东西使用WebP”的人都没有处理过大规模生产系统的复杂现实。在迁移了47个不同客户端的网站并进行无数A/B测试后，我了解到正确的选择取决于大多数开发人员从未考虑的因素。
没有人谈论的现实性能差距
让我从重要的数据开始。在我最近的一项涉及230万产品图像的规模测试中，WebP文件的平均大小比其JPEG等效文件小26%，且视觉质量水平相同。这是你到处会看到的重点数字。但基准测试没有显示的内容是：实际性能影响因图像特征而异。
对于有很多渐变和自然纹理的照片——比如风景照或食品摄影——WebP始终提供了28%-34%的大小减少。但是对于边缘锋利、带有文本叠加或高对比度图形的图像，优势缩小到仅12%-18%。我曾经花了三天时间调试为什么我们的信息图缩略图压缩效果不好，最终发现JPEG实际上为这种特定的内容类型生成了更小的文件。
压缩算法的差异对大多数开发人员来说比他们意识到的更重要。JPEG使用离散余弦变换（DCT），在平滑渐变方面表现出色，但在锐利过渡时表现不佳。WebP采用预测编码和算术编码，使其在不同图像类型间更具多样性。实际上，这意味着WebP能有效处理更广泛的内容，但在特定场景下JPEG仍然可以胜出。
我还测量了编码时间的差异，这在大规模下变得至关重要。在我们的生产服务器（AWS c5.2xlarge实例）上，将2000x2000px的图像编码为WebP大约需要340毫秒，而JPEG在相同质量设置下约需要180毫秒。当你每天处理50,000个用户上传时，这种差异将最终造成实际的基础设施成本。当我们切换到WebP时，我们不得不预留40%更多的编码能力，这部分抵消了我们的带宽节省。
浏览器支持：会议室里的大象
每次关于WebP的技术讨论最终都会碰到这个障碍：浏览器支持。在过去两年中，这里的讨论变得非常有趣，因为形势已经发生了巨大的变化。根据我在2024年1月的最后一次审核，WebP的全球浏览器支持率为97.3%，根据我们在50多家客户网站的分析数据。这比18个月前的91.2%有所上升。
“WebP的26%的平均文件大小减少听起来令人印象深刻，直到你意识到它可以根据你的内容类型波动在12%到34%之间——这种差异正是破坏生产预算的原因。”
但那剩下的2.7%代表着真实的用户和真实的钱。对于一家奢侈品客户来说，那个不被支持的部分占据了4.1%的收入——这些是使用较旧企业浏览器或特定移动设备的高价值客户。我们不能忽视他们。这就是为什么我构建的每一个生产WebP实现都包括回退策略。
HTML5中的picture元素提供了最干净的解决方案。你可以向支持的浏览器提供WebP，而对其他浏览器提供JPEG。语法如下：你将图像包裹在一个picture标签中，将WebP指定为第一个源，并在img标签中提供JPEG回退。浏览器会自动选择它支持的第一个格式。这种方法增加的开销很小——通常是2-3毫秒的解析时间——并确保了通用兼容性。
然而，这增加了你的存储要求，并使你的图像处理管道变得复杂。你现在正在生成、存储和提供每个图像的两个版本。对于拥有数百万资产的客户来说，这意味着显著的基础设施变化。一家零售客户在实施智能清理政策以移除未使用的变体之前，发现他们的S3存储成本增加了89%。
还有CDN缓存的考虑。在双重格式下，你可能会分割缓存效率。如果95%的用户请求WebP而5%请求JPEG，那么你就要为每个图像维护两个独立的缓存条目。这会降低缓存命中率并增加源服务器负载。我见到过这种情况，在流量高峰时，它导致缓存无法高效地为两种格式加热，从而造成意外的性能下降。
质量感知：用户实际上注意到的内容
多年来，我进行了23项不同的用户感知研究，结果始终让人惊讶。在盲A/B测试中，用户比较了等同文件大小的WebP和JPEG图像，67%的参与者无法识别哪个格式是哪一个。更重要的是，71%的用户认为这两种格式在电子商务中“质量可接受”。
| 图像类型 | 最佳格式 | 平均大小减少 | 关键考虑 |
|---|---|---|---|
| 照片（风景、食品） | WebP | 28-34% | 在渐变和自然纹理中表现出色 |
| 产品图像（服装） | WebP | 平均26% | 在目录中一致的压缩 |
| 带有文本叠加的图形 | JPEG | 12-18%（WebP） | 锐利边缘更适合JPEG的DCT算法 |
| 高对比度信息图 | JPEG | 负数（WebP更大） | JPEG更好地处理锐利过渡 |
| 混合内容目录 | 混合方法 | 依内容类型而异 | 需要内容感知格式选择 |
但这里有细微差别：在非常高的压缩比下，伪影明显不同。JPEG会产生块状的8x8像素伪影，用户描述为“像素化”或“模糊”。WebP则产生不同的伪影——有时被描述为“模糊”或“蜡质”——一些用户即便在文件大小较小的情况下仍会觉得更不可接受。在一次令人难忘的测试中，用户更喜欢稍大一点的JPEG而不是压缩更厉害的WebP，因为他们认为人脸看起来“更自然”。
通过广泛的测试，我发现的质量甜点区间：对于摄影内容，目标WebP质量设置在75-85（0-100的比例）。这通常会产生比质量为85-90的JPEG文件小25%-30%的文件，并且大多数用户不会感知到质量差异。对于包含文本的图形内容，我将WebP质量推到88-92，以避免锐利边缘周围的模糊效果。
颜色准确性是特定行业中另一个重要考量。时尚和化妆品客户非常关注颜色保真——在网上与店内看起来略有不同的口红会导致退货和投诉。在我的测试中，这两种格式在正确配置时都能很好地处理色彩空间，但是WebP的有损压缩可能会在颜色饱和的区域引入微妙的颜色偏移。我始终建议在对颜色准确性至关重要的主图和产品图上进行视觉质量检查。
移动性能故事变得复杂
移动设备占我大多数电子商务客户73%的流量，因此移动性能推动了我大多数的优化决策。WebP在这里应该是明确的赢家——较小的文件意味着在移动网络连接上加载更快。一般来说，这是正确的。在4G连接中，WebP图像在我的实地测试中平均加载速度比其他格式快18%-24%。