PNG vs JPG vs WebP: Image Format Comparison

上个月，我看到我们电子商务客户的转化率在一夜之间下降了23%。罪魁祸首？一位好心的开发者将所有产品图像“优化”为60%质量的JPG格式。原本应当清晰、详细的产品照片，现在看起来就像是透过脏窗户拍摄的。三天后，我们花费了47,000美元的损失，恢复了一切，并学到了一堂关于图像格式的昂贵课程。

我叫陈莎莎，过去十二年一直担任性能工程师，专注于高流量网站的媒体优化。我分析了超过2,000个网站，优化了数百万张图像，并为客户节省了超过800万美元的带宽费用。但大多数人不知道的是：选择错误的图像格式不仅仅关乎文件大小或质量——还关乎理解可能影响用户体验的基本权衡。

图像格式的辩论自我进入这个领域以来发生了巨大的变化。在2012年，这一切都很简单：照片用JPG，带透明度的图形用PNG，动画用GIF。如今，随着WebP获得广泛支持，AVIF也在不断涌现，决策树变得复杂得多。然而，我仍然看到开发者们犯同样的错误，通常是因为他们在错误的指标上进行优化。

技术基础：这些格式的实际工作原理

在我们深入比较之前，你需要了解底层实际发生的事情。每种格式在压缩方面采用根本不同的方法，而这些差异解释了它们的优缺点。

JPG（或JPEG，它们是一样的）使用基于离散余弦变换的有损压缩。这在实际中意味着什么呢：JPG将图像分成8x8像素的块，分析每个块中色彩变化的频率。然后，它丢弃人眼不太可能注意到的信息。这就是为什么JPG在照片上表现出色的原因——自然场景有渐变色彩，可以很好地压缩。但这也是为什么JPG在锐利边缘、文本或纯色上表现不佳的原因。这些8x8块在高对比度边界周围产生可见的伪影。

在我的测试中，典型照片在JPG质量85下保留了约95%的视觉质量，同时达到了10:1的压缩比。降到质量75，你就达到了15:1的压缩比，而视觉质量为90%。但这里有一个关键的洞察：这种关系并不是线性的。从质量85跃升到质量95，可能只会提高3%的视觉质量，但文件大小却翻倍。

PNG采用完全不同的方法，通过DEFLATE算法使用无损压缩。每一个像素都被完全保留。PNG分析图像数据中的模式，并用更短的引用替换重复的序列。这就是为什么PNG在图形、徽标和截屏上表现优异的原因——大型纯色区域的图像压缩效果非常好。一个有三种颜色的徽标在PNG中可能压缩到未压缩大小的5%，而相同的徽标作为JPG则会更大并由于压缩伪影而看起来更糟。

PNG还支持每个像素256级的不透明度透明度。这似乎是一个小功能，但对于网页设计来说是革命性的。在PNG出现之前，创建平滑的阴影或发光效果需要复杂的变通方法。PNG使其变得简单，这也是它成为用户界面元素和叠加层标准的原因。

WebP是谷歌试图结合两者优点的尝试。它支持有损和无损压缩，以及alpha透明度。有损模式使用预测编码——它分析相邻像素以预测下一个像素应是什么，然后仅存储差异。这种方法通常在等效质量水平下比JPG实现25%-35%的更好压缩。无损模式使用与PNG类似的技术，但采用更复杂的预测算法，平均文件大小减少26%。

我进行了广泛的测试，比较不同图像类型的这些格式。对于典型的产品照片（2000x2000像素，中等细节），我发现：JPG在质量85下生成了245KB的文件。PNG生成了1.8MB的文件。等效质量下的WebP有损压缩生成了180KB的文件——比JPG小26%。WebP无损压缩生成了1.4MB的文件——比PNG小22%。这些不是理论数据，而是来自实际电子商务图像的数据。

性能影响：超越文件大小

大多数文章在这里犯了错误：它们仅关注文件大小，而忽略解码时间、渲染性能和现实网络条件。我见过开发者因为使用较小的WebP文件而选择WebP，然后纳闷为什么他们的移动用户体验到卡顿的滚动。

“仅根据文件大小选择图像格式就像仅根据颜色购买汽车——你忽略了所有实际上影响性能的因素。”

解码时间比你想象的更重要。当浏览器下载图像时，它必须将其解压到原始像素数据中才能进行渲染。JPG解码经过高度优化——现代浏览器可以在中档设备上以每秒超过100百万像素的速度解码JPG图像。PNG解码稍微慢一些，但仍然较快，约每秒80百万像素。尽管WebP较新，但现在在大多数浏览器中的解码性能实际上与JPG相当，尽管早期实现时的速度显著较慢。

但这里有个淬火：解码时间与图像维度相关，而不是与文件大小相关。一个4000x4000像素的500KB JPG解码比一个2000x2000像素的800KB JPG耗时更长。这就是为什么我总是建议提供适当大小的图像，而不是仅仅依赖于压缩。如果你仍需解码一个4K图像来在400像素容器中显示，30%的文件大小减少是没有意义的。

我对50个电子商务网站进行了一个研究，测量不同图像格式的实际页面加载性能。结果甚至让我感到惊讶。使用WebP的网站平均在最大内容绘制（LCP）方面比JPG提高了18%的时间，但前提是图像被正确大小处理。提供超大WebP图像的网站实际上表现比适当大小的JPG差7%，因为解码开销超过了在快速连接上节省的带宽。

内存使用是另一个隐藏的成本。解码的图像占用宽度 × 高度 × 4字节的RAM（RGBA每个像素4字节）。不论其压缩格式如何，2000x2000像素的图像都需要16MB的RAM。在内存有限的移动设备上，拥有过多大图像——即使它们经过高效压缩——也可能导致浏览器崩溃或强制进行激进的垃圾回收，从而影响UI流畅度。

网络条件带来了另一层复杂性。在快速连接（50+ Mbps）上，200KB的JPG和150KB的WebP之间的差异可以忽略——两者的下载时间都不到50毫秒。但是在3G连接（有效吞吐量750 Kbps）上，50KB的差异会转化为533毫秒的额外加载时间。在3G依然普遍的市场中，格式选择对用户体验有显著影响。

何时JPG仍然是最佳选择

尽管在此比较中是最古老的格式，JPG在许多场景中依然是最佳选择。理解何时使用它需要超越简单的文件大小比较。

自然场景的照片是JPG的强项。该格式的设计宗旨就是用于这种用例，几十年的优化使其表现出色。在我对500张专业照片的测试中，JPG在质量82下生成的文件平均为340KB，视觉质量极佳。等效质量下的WebP有损压缩平均为255KB——减少了25%。但这里有个问题：JPG的浏览器支持为99.8%，而WebP的支持为95.2%（截至我的最后审计）。那4.8%的用户将会收到替代图像，这会增加交付流程的复杂性。

对于以内容为主的网站，如新闻出版物或博客，JPG的通用支持消除了一个完整类别的潜在问题。我曾与一家大型新闻网站合作，实验WebP。他们看到带宽节省了22%，但由于旧设备和浏览器的图像加载问题，支持工单增加了31%。解决问题所耗费的工程时间超过了带来的好处。