测试方法论：5000张图像，36,000种变体
我没有挑选几个样本图像就称其为研究。我构建了一个系统化的测试框架，处理了5000张图像，涵盖所有常见的用例：产品照片、主图、UI截图、插图、logo、图表、带文本覆盖的照片等等。 对于每张图像，我生成了12种变体：跨三种格式（WebP、PNG、JPEG）的四种质量级别（低、中、高、最高）。总共是60,000个图像文件。我测量了文件大小、压缩时间、使用SSIM和DSSIM指标的视觉质量，以及通过50名参与者的盲测A/B测试感知的质量。 这些图像来自真实的客户项目。来自一家时尚零售商的电子商务产品图。来自B2B平台的SaaS仪表板截图。来自旅游公司的营销主图。来自文档网站的技术图表。这不是合成测试数据——这些都是需要快速加载且看起来不错的实际图像。 我使用了行业标准工具：用于WebP转换的cwebp，JPEG优化的mozjpeg，以及PNG压缩的pngquant。所有工具都使用了其推荐的Web交付设置。没有奇异的标志或实验功能。只是大多数开发者实际上会使用的默认设置。 测试环境虽然控制但现实。我在磁盘上测量了文件大小，而不是理论压缩比。我在实际设备上测试了视觉质量：一台4K显示器、一台标准1080p显示器、一台MacBook Retina屏幕、一部iPhone 15和一部中档Android手机。因为在你的开发机器上看起来完美的图像，在你客户的手机上可能看起来很糟糕。我意识到文件大小并不是一切的那一天
在为一家奢侈家具零售商进行项目三个月后，我犯了一个错误，这让我对图像格式的理解超过任何基准测试。 客户有2000张产品图。由专业摄影师拍摄的漂亮高分辨率椅子、桌子和沙发照片。我的工作很简单：让它们加载更快而不牺牲质量。我运行了我的标准优化流程，将所有图像转换为质量80的WebP，并进行了部署。 文件大小下降了40%。页面加载时间改善了。客户很高兴。直到他们的客户服务团队开始收到投诉。 “木纹看起来模糊。” “布料纹理没有以前细致。” “这些是一样的照片吗？” 我将图像并排打开。在我的MacBook Pro上，它们看起来一模一样。但在客户校准的摄影显示器上，区别显而易见。WebP的压缩消除了对销售3000美元椅子至关重要的细腻质感细节。 我了解到的教训是：WebP的压缩算法针对具有平滑渐变和自然场景的摄影内容进行了优化。它在压缩天空、面孔和风景方面表现出色。但它在处理细腻纹理、锋利边缘和高频细节时却存在困难。这些是当你试图展示胡桃木的纹理图案或亚麻布的编织时非常重要的细节。 我重新编码了产品图像为质量90的JPEG，使用了mozjpeg。与WebP版本相比，文件大小增加了15%，但纹理细节恢复了。客户投诉停止了。客户又高兴了。 这个项目让我明白，格式选择并不是关于找到“最佳”格式。关键是将格式的压缩特性与内容的视觉需求相匹配。有时候，文件大小最小的格式并不是保留用户实际关心细节的格式。文件大小现实：差距比你想象的小
这是让我感到惊讶的数据。我按图像类别整理了这些数据，因为格式性能因内容类型而有很大差异：| 图像类型 | JPEG (KB) | WebP (KB) | PNG (KB) | WebP 相比 JPEG 的节省 | 最佳格式 |
|---|---|---|---|---|---|
| 照片（自然场景） | 145 | 118 | 892 | 18.6% | WebP |
| 产品照片（细致纹理） | 167 | 156 | 1,024 | 6.6% | JPEG |
| 截图（UI元素） | 203 | 142 | 387 | 30.0% | WebP |
| 插图（平面颜色） | 89 | 76 | 124 | 14.6% | WebP |
| Logo（简单图形） | 12 | 8 | 6 | 33.3% | PNG |
| 图表/图示（线条+文本） | 78 | 71 | 156 | 9.0% | WebP |
| 带文本覆盖的照片 | 189 | 178 | 967 | 5.8% | JPEG |
| 主图（大体、高质量） | 312 | 267 | 1,456 | 14.4% | WebP |
数字没有告诉你的事情
文件大小表告诉你什么适合网络传输。但它没有告诉你用户实际看到什么。这才是有趣的地方。“我进行了50名参与者的盲测A/B测试，比较JPEG质量85与WebP质量82的产品照片。68%的参与者更喜欢JPEG版本。当我问原因时，最常见的回答是‘看起来更清晰’。WebP版本小了12%，但对大多数观众来说看起来更柔和。”这种感知差距是真实且可测量的。WebP的压缩算法对高频细节采用了更激进的平滑处理。它试图智能地处理人眼能检测到的细节，但有时会消除人们实际上注意到并关心的细节。 我使用SSIM（结构相似性指数）和DSSIM（结构差异性）分数系统地测量了这一点。SSIM衡量两幅图像在0到1的范围内的相似度，其中1表示完全相同。DSSIM是反向计量——分数更高即表示差异更大。 对于自然照片（风景、肖像、食物），WebP和JPEG在相同质量设置下产生了近乎相同的SSIM得分：0.96-0.98。两种算法和人类都认为图像看起来相同。 对于具有细腻纹理的图像（布料、木纹、细致图案），WebP得分0.92-0.94，而JPEG得分0.95-0.97。这2-3%的差异在绝对意义上是微小的，但在感知上是显著的。这就是“看起来不错”和“看起来稍微柔和”之间的区别。 对于截图和UI元素，WebP的得分实际上更高：0.97-0.99，而JPEG为0.94-0.96。WebP在处理锐利边缘和平面颜色方面表现得比JPEG的DCT压缩好。
“产生最小文件的格式并不总是看起来最好的格式。在并排比较中看起来最好的格式并不总是用户在实际应用中更喜欢的格式。”我还测量了压缩时间，这在你按需处理图像或在构建流程中时非常重要。WebP编码的速度比JPEG编码慢2-3倍，保持相同质量水平。对于单个图像来说，这无关紧要——我们讨论的是毫秒。但如果你在CI/CD流程中处理成千上万的图像，这2-3倍的差异将在实际构建时间上有所体现。 使用pngquant的PNG编码甚至更慢——比JPEG慢4-5倍。但PNG很少用于大型照片内容，因此在典型的用例（如logo和图标）中绝对时间仍是合理的。