图片压缩到底压掉了什么？JPG/PNG/WebP/AVIF 怎么选

同一张图，存成 PNG 是 2MB，转成 JPG 只剩 200KB，再转 WebP 可能不到 150KB。差距从哪来？关键不是"哪个格式更好"，而是你的图是什么内容、要给谁用。搞懂压缩到底压掉了什么，就能不靠猜地选对格式。

先建立最重要的分界：图片压缩分有损和无损两类，它们的取舍完全不同。

• 无损压缩：还原后和原图逐像素一致，一个字节不差。靠的是找规律编码（如游程、字典），对大片相同色块特别有效。PNG、WebP 无损、GIF 属此类。
• 有损压缩：主动丢弃人眼不敏感的信息换体积，无法完全还原。对色彩连续的照片效果惊人。JPG、WebP 有损、AVIF 属此类。

一句话抓住本质：无损擅长"规律性强"的图（截图、图标、纯色），有损擅长"色彩连续"的图（照片、渐变）。 选格式的第一刀，就是先判断你的图属于哪一类。

因为照片的色彩是连续平滑变化的，而人眼对细微的颜色/亮度变化不敏感。JPG 的做法是把图切成 8×8 小块，对每块做 DCT 频率变换，再量化掉人眼看不出的高频细节——丢掉的正是你本来就察觉不到的部分，所以体积大降而观感几乎不变。

但这套对照片有效的逻辑，遇到文字、线条、纯色边界就翻车：这些内容是"高频突变"（黑字白底的边缘），量化会在边界周围产生振铃和块状伪影，也就是常说的"脏边"。这解释了一个高频踩坑：把文字截图存成 JPG 会糊、会脏，而存成 PNG 干净又不一定更大。

除了压缩方式，格式还差在支持哪些能力，这往往是硬性约束：

几条直接的结论：要透明背景就别用 JPG（它根本不支持）；要做动图，WebP/AVIF 比 GIF 体积小画质好；但要最大兼容性（任何老设备、任何软件都能开），JPG/PNG 仍是最稳的。

WebP 和 AVIF 是"新一代"格式，优势是同画质下更小、且有损无损透明动画通吃。粗略地说：

• WebP：同等画质比 JPG 小约 25%–35%，无损模式比 PNG 也常更小。浏览器兼容性如今已经很好，是网页配图的稳妥默认。
• AVIF：压缩率比 WebP 更高，尤其低码率下画质更好。代价是编码较慢、老环境兼容性还不够、解码开销略大。

它们不是没有代价：越新的格式，编码越慢、越可能在某些老软件/系统里打不开。所以"要不要换"取决于用在哪——网页可以放心上 WebP，发给别人的文件还是兼容性优先。

把内容类型和用途对齐，选择就不用纠结：

补一句常被忽略的：矢量图（图标、Logo）能拿到 SVG 就别转位图——它是数学描述的曲线，任意缩放都清晰、体积还小，根本不参与 JPG/PNG 这套位图压缩的讨论。

明确了选哪种格式后，常见两类操作：

• 同格式压小：图已经是对的格式，只是太大。用 图片压缩工具 调压缩级别，在体积和画质间找平衡——照片可以压得狠些，文字图保守些。
• 换格式：比如把一批 PNG 转成 WebP 给网站提速，或把 WebP 转回 JPG 方便发给不支持的设备。用 图片格式转换 批量转并设质量参数。

顺序上通常是先按内容选对格式，再在该格式内压到合适体积；先压后转容易二次劣化。两个工具都在浏览器本地处理，不上传图片。

图片压缩先分有损无损：无损擅长截图/图标/纯色，有损擅长照片/渐变；JPG 用频率量化压照片很猛，但遇文字会出脏边，所以截图该用 PNG。透明、动画是硬性能力差异，要透明别用 JPG。WebP 同画质更小、能力全面，是网页默认之选；AVIF 更小但编码慢、兼容性弱；发文件求兼容仍用 JPG/PNG；矢量图标尽量用 SVG。照着内容+用途的决策表选格式，再用 压缩 或 格式转换 落地即可。