图像压缩如何工作：JPEG、PNG、WebP 和 AVIF 详解

实用结论

图像压缩不是一场“谁次次都赢”的比赛，而是一组权衡：可以丢掉哪些细节、哪些细节必须一模一样、你能花多少 CPU 时间、导出之后这份文件还要在哪些环境下工作。

把下面这份当作实操起点：

• 当照片需要最大程度的兼容性时用 JPEG——尤其是邮件、下载、老应用、印刷门户和严格的上传表单。
• 当像素必须保持准确时用 PNG——截图、界面截屏、示意图、Logo、透明图形。
• 当你希望在广泛浏览器支持下拿到比 JPEG 或 PNG 更小的文件时，把 WebP 当作日常的现代网页默认格式。
• 当图像大且访问量高、且你的站点能提供 WebP 或 JPEG 回退并且能接受更慢的编码时用 AVIF。

听起来很简单，但细节很关键。一张产品图、一张护照照片、一张软件截图和一张透明水印都叫“图像”，可它们并不会按同一套方式被压缩。

按用途选，而不是按扩展名选

在讨论编解码器之前，先想清楚这张图要干什么：

这也解释了为什么关于格式的建议看起来常常互相矛盾。“用 AVIF，它更小”在静态站点构建里的主视觉上可能是好建议；同一句话放到必须被政府表单、邮件客户端或老 CMS 接收的用户上传图片上，就可能是坏建议。

两大压缩家族

本指南里的每种图像格式，要么用无损压缩、要么用有损压缩，要么两者都能用。

无损压缩 只去掉数学上的冗余，解码时能重建出完全相同的像素。如果一张截图有白色背景、大量重复的界面颜色和重复的直线边缘，无损格式就能非常紧凑地描述这些模式。PNG 是经典的无损网页格式，WebP 也有无损模式。

有损压缩 为了让文件更小，会永久丢弃图像信息。诀窍在于丢掉的是人在最终显示尺寸下不太可能察觉的信息。JPEG 是有损格式。WebP 和 AVIF 既能有损也能无损，但网页交付里对照片大多用的是它们的有损模式。

要避免的误区是把“有损”自动看作“不专业”，把“无损”自动看作“更专业”。对一张 1600 px 的博客照片，经过认真调教的有损 WebP 在页面上几乎看不出差别，却能省下大量带宽。而对带小号菜单文字的软件截图，即便文件大小看着很漂亮，有损导出也可能让文字发糊。

四种格式速览

规律不是“越新越赢”。更新的格式能做更多分析、把数据打得更紧，但代价是编码时间、QA 时间和回退方案的复杂度。

为什么同一个“质量值”不代表相同的画质

同一张图，以质量 80 保存的 JPEG 和以质量 80 保存的 WebP 走的并不是同一把尺子。这个数字会被送到每个编码器自己的模型里去，影响不同的内部决策，不同工具还可能各自映射得不一样。

因此实用的压缩需要两次确认：

1. 在图像真正会出现的尺寸下看它。 商品卡缩略图就该按商品卡缩略图的样子判断，而不是放到 400% 去挑毛病。
2. 等图像已经是正确尺寸再对比字节。 把 5000 px 的相机原图缩到 1600 px 的网页图，通常比一味把质量条往下拉更省文件。

如果你要批量处理一个文件夹，先挑一些难搞的案例试一遍再全部导出：一张人脸、一片天空、一处深阴影、一张满是文字的截图、一道透明边缘，以及一张多噪点的室内照。

JPEG：为什么照片能变小，而文字会变丑

JPEG 是老资格的照片格式，因为它是围绕“照片是怎么样的”设计出来的。Library of Congress 提到，JPEG 家族常用于连续色调的全彩和灰度图像，经典处理流程使用 8×8 的分块变换。说白了：JPEG 把图像切成小块，把每个小块变成频率信息，再对观众不太可能注意到的细节进行量化。

对下列情况效果好：

• 人脸、衣物、建筑、风景、美食照
• 天空、阴影、肤色等自然渐变
• 不需要透明像素的图
• 需要几乎在任何环境都能打开的文件

对下列情况效果差：

• 截图里的小号文字
• 硬边缘的图标和 Logo
• 纯色示意图
• 需要被反复编辑再导出的文件
• 透明图，因为 JPEG 没有 alpha 通道

最好辨认的 JPEG 伪影是：块状边缘、文字周围的振铃、高对比细节旁的蚊状噪点，以及柔和渐变里的条带。它们不是随机现象，而是分块有损压缩肉眼可见的副产物。

优点

• 浏览器、系统、应用、邮件客户端、表单、供应商上的支持极其广泛
• 对相机照片等连续色调图像高效
• 在常见流程里编码和解码都很快
• 便于预览、附件、上传和分享

缺点

• 不支持透明
• 文字、边缘和纯色图形周围会有伪影
• 有损导出反复叠加会累积损伤
• 网页照片在同等观感下经常比 WebP 或 AVIF 更大

什么时候用 JPEG

当兼容性比“最后几 KB”更重要时用 JPEG：护照照片上传、文件门户、邮件附件、供应商门户、印刷店、老旧 CMS，以及作为回退用的 <img> 源。当文件主要是一张照片、不需要透明时也可以用。

PNG：为什么截图能保持清晰，而照片会变得巨大

PNG 面向的是可移植的无损位图。W3C 的 PNG 规范覆盖静态 PNG 和动画 PNG，格式支持索引色、灰度、真彩色以及可选的 alpha 透明。

对日常网页工作来说，重点很简单：PNG 保留像素。它可以先对图像的每一行做滤波使其更可预测，然后用 DEFLATE 压缩结果。如果图里有重复颜色和分明的边界，效果非常好。

适合 PNG 的：

• 含小号文字的软件截图
• 被导出成图片的 UI 示意图与对比表
• 用不上 SVG 时的 Logo
• 透明浮层、印章和水印
• 之后可能再编辑的图形

不适合 PNG 的：

• 相机照片
• 大幅网站主视觉
• 具有自然质感的产品照
• 相比精确像素更在意文件大小的图库图

一张 PNG 照片经常大到吓人，因为 PNG 正在“做它该做的事”：保留噪点、细腻纹理、微小的传感器差异，以及每一处细微的色彩变化——这些恰恰是有损照片编码会简化掉的内容。

优点

• 无损像素还原
• 支持 alpha 通道透明
• 文字锐利、硬边缘干净
• 对纯色和重复图形有很强的压缩表现
• 是编辑母版和透明工作流的可靠格式

缺点

• 照片文件体积大
• 常见 PNG 流程里没有有损模式
• 在支持 WebP 的场景里，透明网页图形可能比 WebP 更重

什么时候用 PNG

当精确像素很重要时用 PNG：截图、UI 文档、示意图、简单图形，以及需要“可预期支持”的透明素材。除非确实需要一份无损的工作副本，否则不要把 PNG 作为相机照片的默认格式。

WebP：现代网页里实用的默认选择

WebP 的价值在于它用一种格式覆盖了多种用途。Google 的文档指出，WebP 同时支持有损压缩、无损压缩、透明、动画、元数据和色彩配置文件。这让它比 JPEG 更灵活，在网页交付里也常常比 PNG 更小。

有损 WebP 使用 VP8 系的预测编码，而不是 JPEG 那套更老、只依赖 DCT 的流程；无损 WebP 用的是另一套变换和熵编码。这带来的实用结论是：WebP 常常是网站图片库的良好默认——博客照片、商品网格、缩略图、轻量插画和许多透明素材。

不过 WebP 不是魔法，也不是可以往任何地方随便塞的文件。浏览器支持 WebP 不代表邮件客户端、上传表单、老设计软件、社交平台或印刷流程会接受它。所以 JPEG 和 PNG 至今仍作为交付/兼容格式很重要。

优点

• 同等观感下，对照片而言常常比 JPEG 更小
• 支持 alpha 透明
• 同时支持有损和无损模式
• 现代浏览器上广泛支持
• 编码速度比 AVIF 快

缺点

• 仍有部分邮件客户端、表单、老应用、CMS 插件和印刷流程会拒收
• 并不能真正替代 SVG Logo 或可编辑的设计源文件
• 在某些大幅照片上可能比 AVIF 大

什么时候用 WebP

在你能掌控页面的场景下，把 WebP 作为大多数现代网站图像的交付格式。它是博客图、商品卡照片、缩略图和许多透明网页素材的稳妥默认。当图像会离开你的网站进入他人系统时，请同时准备好 JPEG 或 PNG。

AVIF：需要管线支撑的高压缩选项

AVIF 把 AV1 编码的图像数据放在基于 HEIF 的图像格式里。AVIF 规范支持 SDR 和 HDR 图像、广色域场景、alpha 等辅助图像，以及更进阶的图像编码特性。web.dev 也指出，AVIF 的压缩收益取决于图像内容、编码器设置和目标质量。

对普通网页团队来说，实用的说法是这样：AVIF 在大照片上可以非常出色，但它更像是一种“管线格式”，而不是一种“随手分享的格式”。它编码更慢，老工具的预览支持容易落后，回退处理也更关键。

适合 AVIF 的：

• 大幅主视觉照片
• 图片密集型的落地页
• 编辑部风格的图库
• 一次编码后大量分发的高流量图像
• 工作流里涉及 HDR、高位深或广色域的图像

不适合 AVIF 的：

• 严格的上传表单
• 邮件附件
• 需要队友在老工具里打开的图像
• 收益小到不足以证明管线复杂度的极小缩略图
• 除非你认真测试，否则含小号文字的截图

优点

• 对照片和复杂图像常常有非常好的压缩效果
• 支持 alpha 透明、HDR 和广色域
• 适合作为现代 <picture> 中的首选源
• 很适合构建时或 CDN 上的图像生成

缺点

• 编码可能很慢，尤其是大批量时
• 工具生态没有 JPEG、PNG、WebP 那样可预期
• 更稳的生产交付需要 WebP、JPEG 或 PNG 回退

什么时候用 AVIF

当图像足够大、又被反复分发到能让“少几个字节”值回管线成本时，用 AVIF。高流量首页的主视觉是好人选；90 px 的图标、一次性的邮件附件、政府类上传表单通常不是。

为什么 PNG 在截图上可能赢过 JPEG

一个常见的意外：同一张截图，PNG 版本可能比 JPEG 版本又小又干净。

原因是截图里经常充满重复结构：白色文档背景、灰色工具栏、笔直的黑色文字、几种图标颜色、重复的 UI 间距，这些对无损压缩来说都很容易紧凑描述。JPEG 并不知道文字应当保持精确，它会尝试像处理照片那样把画面“简化”，结果可能是文件没小多少，反而在字符和边缘周围更难看。

如果截图主要还是照片，WebP 或 JPEG 可能更好；如果主要是界面、文字和纯色，那就从 PNG 或无损 WebP 开始。

为什么照片需要有损压缩

相机照片是另一回事。它们有传感器噪点、细腻纹理、柔和阴影、不规则渐变，以及像素之间数以百万计的细微变化。无损压缩可利用的重复更少，往往无法把文件压到适合网页交付的大小。

有损照片格式行得通，是因为观众通常关心的是主体、构图、色彩和整体锐利感，而不是每一个原始像素。经过认真调教的 JPEG、WebP 或 AVIF 可以移除在最终尺寸下难以察觉的信息。

危险在于把参数拉得过头。过低的质量设置会让皮肤变平、布料糊掉、树叶细节消失、出现块状边缘，或让天空和阴影里冒出条带。如果这些区域对图像很重要，请提高质量档位或换更大的显示文件。

现代网页交付要用回退

当你能掌控整个网站时，其实不必只选一种格式。生产上常见的模式是：先给最小的现代格式，把更稳的回退摆在它后面。

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    alt="自然光下的产品特写照片"
    width="1200"
    height="800"
  >
</picture>

浏览器会使用它支持的第一个源。支持 AVIF 的浏览器可以拿到 AVIF 文件，不支持 AVIF 的可以尝试 WebP，更老或更严格的客户端仍能落回 JPEG。

当图像需要透明或需要保留精确文字时，把回退换成 PNG 而不是 JPEG。

一套实用的压缩流程

处理一张图像时：

1. 从手头质量最高的源开始。
2. 先把它缩到实际会展示的最大尺寸。
3. 按用途选格式。
4. 导出一到两个质量档位。
5. 在真正的页面或上传目标处比对结果。
6. 保留母版，这样以后就不必再压一次已发布的副本。

处理一个网站文件夹时：

1. 全量转换前，先挑一个有代表性的小样本。
2. 样本里要包含照片、截图、透明图形、缩略图，还有一张难对付的暗图。
3. 用 WebP 作为“现代基线”测一遍。
4. 只在字节节省真的有意义的地方才测 AVIF。
5. 在需要的位置保留 JPEG 或 PNG 回退。
6. 文件大小要在“已经缩到目标尺寸之后”才看，而不是之前。

PhotoTools 可以帮上中间几步：源太大装不进页面时用 调整尺寸；调整体积和画质用 压缩；目标需要指定文件类型时用格式转换器。转换和压缩都在你的浏览器里完成，工具流程中图像不会被上传到服务器。

如何在格式之间转换

PhotoTools 可以在你的浏览器里直接在 JPG、PNG、WebP、AVIF、HEIC 之间转换。放入图像，选目标格式，预览效果，然后下载新文件。

按目标场景选择转换方向：

• 需要一份几乎在任何表单或应用里都能打开的文件？转成 JPEG。
• 需要透明或想保留精确的截图像素？转成 PNG 或无损 WebP。
• 站点接受，又想要更小的网页图？转成 WebP。
• 在受控的网站管线里追求极致压缩？带回退地测试 AVIF。

最后一条能省下大量画质：不要在有损格式之间反复来回。如果一张照片一开始就是高质量的 JPEG，为了交付把 JPEG 转成 WebP 通常没问题；但把这份 WebP 再转回 JPEG、编辑、再转出去，就是伪影开始堆积的地方。可以的话，总是从原文件重新出发。