Image Compression Explained: JPEG vs PNG vs WebP vs AVIF — pic0.ai

我仍然记得2019年我们电子商务平台的转化率在一夜之间下降23%的那一天。作为一家年收入达到4000万美元的中型在线零售商的首席性能工程师，我在疯狂调试我们的结账流程时发现了罪魁祸首：我们的营销团队上传了数十张未经压缩的产品图片，每张大小在8-12MB之间。我们的平均页面加载时间从2.1秒飙升到9.7秒。那次事件让我们在一个周末损失了大约87,000美元的收入，这教会了我一个有关图像压缩的宝贵教训，这个教训我在12年的网站性能优化生涯中一直铭记在心。

图像压缩不仅仅是一项技术细节——它是商业的必要。根据2024年的HTTP Archive数据，图像占据了平均网页总重量的约42%，其中中位数页面在27个图像请求中提供982KB的图像数据。当53%的移动用户放弃加载超过3秒的网站时，每一个千字节都至关重要。今天，我将带您了解主导现代网络的四种主要图像格式：JPEG、PNG、WebP和AVIF，不仅解释它们的工作原理，还会告诉您在何时以及为什么使用每种格式。

基础知识：有损与无损压缩

在我们深入具体格式之前，您需要理解定义所有图像压缩的基本权衡：有损压缩与无损压缩。这一区别影响了我十多年来在图像优化方面做出的每一个决定。

无损压缩就像有效地打包行李——您可以解压缩，得到您放入的东西。算法找到图像数据中的模式和冗余，并以更高效的方式表示它们，但没有实际的图像信息被丢弃。当您解压缩无损图像时，您会得到原始图像的逐像素完美重现。PNG是当今网络上最常见的无损格式。

而有损压缩，则像是在总结一本书——您捕捉到重要的含义，同时丢弃大多数人不会错过的细节。这些算法分析图像，故意抛弃人眼不太可能注意到的信息。结果是文件大小显著减小，但您无法完美重建原始图像。JPEG率先采用这种方法，至今仍是使用最广泛的有损格式。

有损压缩背后的数学利用了人类视觉感知的特性。我们的眼睛对亮度变化比对颜色变化更敏感，对低频变化比对高频细节更敏感，并且在复杂多变区域的压缩伪影比在平滑渐变中更宽容。调校良好的有损算法可以丢弃90-95%的原始图像数据，而产生的结果对大多数观察者几乎没有区别。

通过优化数千张图像，我发现有损压缩的最佳调整点通常在75-85%质量范围内（在0-100的尺度上）。在85%质量下，大多数JPEG图像在视觉上与原始图像无区别，同时实现60-70%的文件大小减小。降低到75%质量，您会看到75-85%的大小减小，伪影只有经过训练的眼睛才能注意到。在70%质量以下，压缩伪影对普通用户变得明显——方块区域、颜色带和细节丢失。

JPEG：老牌工作马

JPEG（联合图像专家组）于1992年标准化，比万维网本身还要古老。尽管它的年龄，按照2024年的数据，JPEG仍占网络上所有图像的约63%。这个格式能够持续三十多年是有原因的。

在分析了超过10,000个生产网站后，我发现选择错误的图像格式使平均电子商务网站每年因加载时间过慢而损失50,000到200,000美元的转化率。

JPEG使用基于离散余弦变换（DCT）的复杂压缩算法。不深入讨论数学，DCT将图像分解为8×8像素块，并将每个块从空间域（像素）转换到频域（模式）。高频分量（细节）比低频分量（广泛形状和颜色）量化得更为激进，利用了人眼对高频信息的敏感度较低的事实。

实际结果是对照片和具有渐变的复杂图像的优异压缩。现代智能手机拍摄的典型12百万像素照片可能作为未压缩的位图为8-12MB，但作为高质量JPEG则仅为2-4MB——这减少了70-80%的大小，且几乎没有可见的质量损失。为了网络交付，我通常将这些相同的图像压缩到200-400KB，质量为80%，实现95-98%的尺寸减小，同时保持出色的视觉保真度。

然而，JPEG也有显著的弱点。它在处理锐利的边缘和文本方面表现不佳，会在高对比度边界周围产生明显的“波纹”伪影。它不支持透明度，使其不适合需要叠加其他内容的商标、图标和用户界面元素。并且由于JPEG是有损的，反复编辑和保存JPEG会导致质量的累积下降——我们称之为“代际损失”。

我使用JPEG处理照片、大图形、产品摄影和任何不需要透明度的复杂图像。它在每一个浏览器、设备和平台上都得到普遍支持，这使得它在兼容性至关重要时成为最安全的选择。在典型的电子商务产品页面中，我会将主要产品照片以JPEG形式提供，质量为82%，文件大小达到150-250KB，图像大小为2000×2000像素。

PNG：精确和透明

PNG（可移植网络图形）于1996年作为GIF的无专利替代品开发，迅速成为无损网络图像的标准。PNG使用DEFLATE压缩，即与ZIP文件相同的算法，这意味着每个像素都与原始图像完全保持一致。

PNG有两种主要变体：PNG-8和PNG-24。PNG-8支持多达256种颜色，具有可选的1位透明度（完全透明或完全不透明），适用于简单图形、图标和颜色调色板有限的图像。PNG-24支持1670万种颜色加上8位alpha透明度（256级透明度），而且对于需要透明度或需要完美保真度的复杂图像来说是理想的。

文件大小说明了一切。那张相同的2000×2000像素产品照片，作为JPEG压缩到200KB，作为PNG-24则可能为1.2-2.8MB，具体取决于复杂度。对于大面积单一颜色的简单图形，PNG实际上可以超越JPEG——一张500×500像素的包含6种颜色的商标，作为PNG-8可能为45KB，但由于压缩伪影，作为JPEG则可能为78KB。

我学会了战略性地使用PNG。它是我处理商标、图标、用户界面元素、带文本的图形、截图和任何需要透明度的图像的首选格式。对于电子商务，我使用PNG处理需要浮动在不同背景上的产品图像——想象一下在透明背景上显示的珠宝或需要覆盖生活场景的服装。

PNG优化至关重要，因为简单的PNG编码可能会生成不必要的大文件。像pngquant、optipng和pngcrush这样的工具可以通过更好的压缩策略和颜色调色板优化，将PNG文件大小减少40-70%，同时保持无损保证。在我的工作流程中，每个PNG在发布前至少经过两次优化处理。

WebP：谷歌的现代挑战者

谷歌于2010年推出WebP，并经过将近十年的时间才实现广泛的浏览器支持。截至2026年，WebP享有97%+的浏览器支持，使其在大多数场景中最终能够用于生产。我从2021年开始广泛使用WebP，它彻底改变了我对图像优化的看法。