图片压缩指南 — AVIF、WebP、PNG 与 JPEG

根据用途选择格式

格式	适合的起点	需要留意
AVIF	照片和细节丰富的网页图片，希望得到较小的发布文件。	编码可能较慢。先确认目标应用、平台或工作流程接受 AVIF。
WebP	网页照片、商品图，以及需要透明背景的素材。	细小文字和锐利边缘，可能需要更高质量或无损版本。
PNG	截图、图表、标志、像素画和透明图形。	大尺寸照片可能仍然很大。减少调色板颜色会改变部分颜色。
JPEG	需要常见格式和广泛兼容性的照片。	不支持透明度。反复进行有损编码，可能积累明显的画质损失。

这些是选择的起点，不是格式排行榜。同一个网页上的透明图标和大幅照片，也可能适合不同格式。如果目标平台有上传要求，请优先遵循它的规定。

像素数量对文件大小影响很大。网页上的小卡片，通常不需要一张宽 6000 像素的照片。根据实际显示尺寸缩放，并考虑希望支持的屏幕像素密度。

例如，一张在页面上显示为 800 CSS 像素宽的图片，可以考虑用 1600 像素宽的文件来适配 2× 屏幕。这只是规划示例，不是统一要求；响应式布局、裁剪方式和传输带宽都会影响选择。

对于有损格式，质量设置影响编码器可以舍弃多少信息。不同编码器的数值不能直接比较：JPEG 的“80”，与 WebP 或 AVIF 的“80”，并不代表相同的视觉质量。

看实际结果，不只看压缩比例

原图尺寸过大或编码效率较低时，很容易出现很高的压缩比例。这本身不能证明编码器更好。比较时，应保持尺寸、透明度和可见画质一致。

PNG 对已经确定的像素数据进行无损压缩，但工具可能在编码前改变这些数据。缩减调色板会合并相近颜色，可以减少文件体积，也可能引入视觉变化。

严格的无损流程会保留解码后的像素，只优化存储方式。调色板缩减适合部分简单图形；平滑渐变、柔和阴影和半透明边缘则需要仔细检查。抖动能通过细小图案缓解色阶，但也可能让平坦区域出现颗粒。

如果必须保持精确像素值，请选择无损流程，并据此验证结果。仅凭文件格式名称，不能保证整个转换过程都是无损的。

PNG、WebP 和 AVIF 可以存储透明度，JPEG 不能。把透明图片转成 JPEG 时，应选择与使用场景匹配的背景颜色，否则商品抠图、标志或阴影可能出现不希望看到的底色或边缘。

分别在浅色和深色背景上检查透明边缘。在白底上看起来干净的图片，放到深色页面上可能会出现光晕。

AVIF 提供了有价值的压缩选项，但编码可能需要较多计算。编码努力程度与画质是不同的控制项：更高的编码努力程度，允许编码器花更多时间寻找高效的表达方式。

一张会被反复使用的照片，值得尝试 AVIF；在手机上快速处理一批图片时，WebP 或 JPEG 可能更适合作为起点。耗时无法统一承诺，因为尺寸、内容、设置和设备性能都会产生影响。

重新编码可能移除 EXIF、位置等元数据。如果这些信息很重要，请保留原图。浏览器的解码和编码也可能影响颜色配置、高动态范围信息或方向元数据；对颜色要求严格的图片，应在最终使用环境中检查。

反复编辑已经有损压缩过的图片，可能进一步降低画质。尽量从原图生成每一个发布版本。

解码后的图片比压缩文件更占内存。一张 6000 × 4000 像素的图片，仅一个 8 位 RGBA 像素缓冲区就需要约 96 MB；解码、缩放和编码可能同时需要多个缓冲区。

如果标签页变慢，可以减少每批文件数量、降低图片尺寸，或选择编码更快的格式。文件损坏、不支持的图片变体或设备内存不足，也可能导致失败。关闭或刷新页面前，请先保存需要的结果。

选择图片，在浏览器中轻松生成更小的版本。