深入了解图像压缩技术的工作原理：从JPEG、PNG到WebP的详细解析

Last updated: 2026年6月27日

图像压缩通过移除人眼难以察觉的信息来缩小文件。了解每种格式丢弃了哪些信息，就能明白为什么 JPEG 会模糊文本、为什么 PNG 文件仍然很大，以及为什么 WebP 和 AVIF 在照片处理上表现更出色。本文不是市场营销式的比较，而是对实际算法的专业实践解析。

快速答案：图像压缩如何工作？

每种网络图像格式都执行两项任务：首先是预测像素值，以便重复数据能够折叠；然后是高效地编码这些预测误差。有损格式 (JPEG, WebP lossy, AVIF) 还进行量化——它们会舍弃人类几乎无法察觉的高频细节。无损格式 (PNG, WebP lossless) 则跳过量化，保留每个像素。

实际决策：

如需了解格式决策，请阅读 AVIF vs WebP vs JPEG comparison；本文重点关注每个编码器内部发生了什么。

有损和无损有什么区别？

无损 (Lossless) 压缩可以逐像素地重建原始图像。它通过寻找冗余性来工作：相同颜色的连续区域、重复的图案、可预测的渐变。PNG、GIF 和 WebP-lossless 使用这种方法。其上限是图像的熵——随机噪声几乎无法被压缩。

有损 (Lossy) 压缩会永久丢弃信息。诀窍在于丢弃视觉系统最不注意的信息：精细的高频纹理和微妙的颜色差异。JPEG、WebP-lossy 和 AVIF 就是这样做的。回报是文件尺寸大大减小——对于照片来说，通常比无损格式小 5–10 倍。

这些格式使用了特定的技术：

JPEG 压缩实际如何工作？

JPEG 是经典的有损流程。它按顺序运行五个阶段：

为什么 JPEG 会模糊文本和锐利边缘：高频系数携带了边缘信息，而量化过程将它们清零了。如果把质量调得太低，就会看到 8×8 的块状伪影。

您可以在单个羽毛细节的裁剪图上看到量化的效果。同一块 500×280 的区域，在三个不同质量级别下进行编码，清楚地展示了质量滑块所牺牲的内容：

在 q95 时，羽毛的绒羽仍然清晰可辨。到 q75 时，精细的丝缕开始模糊在一起。到了 q50，8×8 的块状结构非常明显，纹理也变得模糊——文件变小了，但损失已经达到了观看者能够察觉的程度。

PNG 压缩如何工作？

PNG 是无损的，工作方式完全不同。它包含两个阶段：

1. 行滤波 (Row filtering)。 在压缩之前，每一扫描线都会经过滤波处理，使其更具可预测性。PNG 定义了五种滤波器（None, Sub, Up, Average, Paeth）；编码器会为每行选择最佳的滤波器。

2. DEFLATE 压缩。 经过滤波的字节流会通过 LZ77（查找重复序列，替换为反引用）加上 Huffman 编码（对常见值使用短代码）——与 ZIP 使用的算法相同。

实际有效的 PNG 优化技巧：

• 对于平面图形，使用 PNG-8 (索引色，≤256 色) 比 PNG-24 小得多。
• 删除不必要的块：EXIF、未使用的 ICC profile，如果图像是不透明的，则删除 alpha channel。
• 使用 optipng 或 pngquant 重新压缩（后者通过抖动算法将图片转换为 8 位，可为必须保持 PNG 的照片节省大量空间）。

WebP 为什么比两者都小？

WebP 有两种独立的模式：

• Lossy WebP 借鉴了 VP8 视频编解码器。它使用整个帧的块预测（而不仅仅像 JPEG 那样在 8×8 块内），采用 4×4 和 8×8 的变换，并使用了更好的算术熵编码。结果是，与匹配质量的 JPEG 相比，大约小 25–34%。
• Lossless WebP 使用了多达 13 种预测模式、一种用于去相关通道的颜色空间变换和一个 LZ77 变体。对于相同内容，它通常比 PNG 小 ~20–26%。

AVIF 更进一步，利用了 AV1 视频编解码器的帧内工具，比 WebP lossy 又节省了 20–30%。代价是编码速度——AVIF 生成较慢。如需输出 WebP 和 AVIF 的工具指南，请参阅 TinyPNG alternatives。

如何衡量压缩质量？

有两个指标占据主导地位。两者都不是完美的；最好都使用它们。

PSNR 易于计算但忽略了人眼能察觉的；SSIM 与感知相关性更强，但仍然低估了分散注意力的伪影（文本附近的振铃效应）。对于实际的产品决策，不要只相信一个数字，而应该在预期的显示尺寸下肉眼观察结果。

Mozilla 的 JPEG quality study 和 Google 的 WebP compression study 发布了方法论和样本图像，如果您想重现比较。

应该使用什么质量设置？

从这些默认值开始，然后根据您的内容进行调整。这些是指导方针，而非法律。

比数字更重要的两个规则：

• 比较时要匹配视觉质量，而不是匹配质量数值。 AVIF q60、WebP q75 和 JPEG q85 看起来大致相似。将所有三个都设置为“q80”进行比较是毫无意义的。
• 压缩前先调整尺寸。 一个 4000px 的相机原始图，如果以 JPEG q80 压缩，仍然是一个 4000px 的下载文件。应该先降到显示尺寸——这比任何质量微调都能节省更多的字节。

大小与质量曲线展示了为什么 75–85 区间通常是推荐的范围。在同一块羽毛细节裁剪图上，文件大小最初急剧下降，然后趋于平稳——而可见的质量下降在 q75 以下加速：

实际操作中如何良好地压缩图像？

1. 从正确的源文件开始。 使用 RAW 或高质量 JPEG 进行拍摄；压缩是累积的，所以要避免重新编码一个已经是有损的文件。
2. 先调整尺寸。 在进行任何其他步骤之前，使用 Image Resizer 将其匹配到页面上的盒子大小。
3. 根据内容选择格式。 照片 → WebP/AVIF lossy；文本/UI → PNG 或 WebP lossless。
4. 以合理的质量进行编码。 在 Image Compressor 中，照片从 75–80 开始。
5. 为公共网络剥离元数据 (保留 EXIF 用于存档)；Image Converter 可以一次性处理格式和元数据。
6. 在显示尺寸下检查，并提供 <picture> 回退机制，以确保旧客户端能收到 JPEG。

常见错误

• 重新压缩已压缩的 JPEG。 每次有损编码都会增加伪影。保留一个主文件。
• 忽略文本中的 Chroma subsampling。 4:2:0 对照片没问题，但会模糊彩色文本。对于文字密集型图形，使用 4:4:4 (或 PNG)。
• 相信跨格式的单个质量数字。 这个数字在 JPEG、WebP 和 AVIF 中代表不同的含义。
• 在调整尺寸之前进行优化。 一定要先调整尺寸——这是最大的字节节省点。
• 没有提供 JPEG 回退机制就直接使用 AVIF/WebP。 旧浏览器和电子邮件客户端将无法渲染任何内容。

相关指南

• AVIF vs WebP vs JPEG: Which Format Should You Use?
• Compress Images Without Losing Quality
• TinyPNG Alternatives Compared
• Image SEO Optimization Checklist
• Complete Image Optimization Checklist

常见问题解答 (FAQ)

图像压缩如何工作？

无损压缩 (PNG) 通过查找并编码重复的图案来工作，而不会改变像素。有损压缩 (JPEG, WebP) 则丢弃人眼最不注意的高频细节，然后编码剩下的部分。质量设置控制着有多少有损信息被丢弃。

有损和无损有什么区别？

无损完美保留了每个像素并可以完全恢复 (PNG, lossless WebP)。有损为了缩小文件会丢弃细节，无法逆转 (JPEG, lossy WebP)。对于照片，有损在尺寸上胜出；对于图形和主文件，无损在质量上胜出。

哪种格式压缩照片效果最好？

AVIF（最小、现代浏览器）、然后是 WebP，最后是 JPEG。PNG 对照片来说最大，因为它没有损失。对于网络传输，WebP 是安全的默认选择；如果可以编码且受众使用现代浏览器，则使用 AVIF。

压缩会降低画质吗？

有损格式会，但在质量 80–85 时，这种损失在观看尺寸下是不可见的。陷阱在于反复压缩有损文件（代际损失），这会累积伪影。应该从无损主文件进行一次性压缩。

图像鸣谢

• 封面 — Source code on a monitor，照片由 Leonid Altman 在 Pexels 提供（转换为 WebP）。
• JPEG 质量阶梯和大小与质量曲线 — 由作者根据一只金刚鹦鹉羽毛照片生成（Pexels #36720663，照片由 Kaca Skok 提供），展示了不同质量级别下实际测量的 JPEG 输出。