有损压缩 vs 无损压缩:有什么区别?

你电脑上的每个 JPG、WebP、AVIF 或 PNG 文件,保存前都被压缩算法瘦身过一次。完成 这项瘦身的算法分两大门派,而它们对你的像素会发生什么,给出了截然不同的承诺。 为错误的图像选错了门派,结果要么是放出 4 MB 的头图,把最大内容绘制(Largest Contentful Paint)拖垮;要么是把照片存成了 PNG,然后纳闷你的摄影博客为什么 突然膨胀了 12 倍。

本指南会解释有损与无损压缩究竟做了什么、为什么同一个「压缩」一词覆盖了 两个相反目标,以及你该在什么时候关心工具实际用上了哪一派。想看逐格式 的选择矩阵,可以参考姊妹篇JPG vs PNG vs WebP vs AVIF——本文讲概念,那篇讲怎么选。

有损压缩如何工作

有损(lossy)压缩会丢弃它认为你不会注意到的信息。最经典的例子是JPEG:它先把图像切成 8×8 的小方块,在每个方块上跑一次 离散余弦变换,然后把得到的系数量化——也就是用更粗的网格 四舍五入这些数字。四舍五入是有损的:原值一去不返。救你的是,高频系数 (相邻像素间细微的色彩变化)会被更狠地四舍五入,低频系数(大块形状)则保留得 更多,人眼对后者敏感得多。

WebP 和 AVIF 默认也是有损的,但它们在更好的 预测器之上叠加了同一招。WebP 用 VP8 风格的帧内预测,从相邻方块推测每个 方块,只编码细小的残差。AVIF 更进一步,采用 AV1 的帧内编码,在显著更小的 文件下取得 JPG 级别的画质。两种格式的量化表也会针对感知模型(通常是 SSIMULACRA2 或 Butteraugli)调整,所以「画质滑杆」实际上对应的是「人眼感知画质」, 而不只是信噪比。

有损最值得警惕的是 反复压缩陷阱:每重新编码一次 JPEG, 就再次量化、再损失一代细节。把一张画质 90 的 JPEG 反复以画质 90 保存十次, 得到的并不是同一个文件——只是一张更柔和的图。请始终保留一份原始母带, 一切输出都从它重新导出。

无损压缩如何工作

无损压缩保证每一个像素分毫不差。它没法把文件压得比原始数据允许的更小, 因此走的是消除冗余的路子,而不是丢弃信息。PNG使用逐行滤波器(None、Sub、Up、Average、Paeth),由相邻像素预测当前 像素,只保存细小的差值,再在其上跑一层 deflate(ZIP 与 gzip 内部用的同一套算法)。一张纯色 UI 截图就能压到原大小的零头,因为每行对 下一行的预测完全命中。

GIF 使用更老旧的 LZW 字典编码,这正是它只能容纳 256 色调色板、 在静态图像上几近历史遗迹的原因。WebP 和 AVIF也能切到无损模式——WebP 无损在 UI 素材上常常比 PNG 小 20–30%,AVIF 无损 更进一步。代价是编码速度:无损 WebP/AVIF 比有损版本慢得多,这也是多数 流水线只在已经策划过的素材上才用它们的原因。

无损的标志性特质是 解码后必得原位元。一张 PNG 保存一百次, 文件仍会与第一次保存时字节完全一致。正是这条保证,让标志、图标、源真 设计素材始终坚持留在无损格式——尽管它们在体积预算表上看起来很「无聊」。

什么时候该用哪一种

套用「照片法则」:凡是相机拍的(或任何具有连续色调、渐变、噪点的)图像, 默认应采用 有损,除非有明确理由例外。在多数显示器上, 画质 80–85 的 JPG、75–85 的 WebP 或 50–60 的 AVIF 与原图无明显差别。 对追求速度的网页来说,5–10 倍的体积节省没有讨价还价空间。

套用「图形法则」:凡是带平涂色、硬边、文字或透明的(标志、图标、线图、 截图),默认应采用 无损。有损压缩的瑕疵——文字旁的振铃、 透明边缘的色漏、渐变里的条带——在它们身上一目了然。而且 PNG 或无损 WebP 在这类素材上其实压得更狠。

唯一的例外是「接近无损」的中间地带:高画质的有损编码(画质 ≥ 90)即使 在图形素材上也常常与原图无二,但相比 PNG 可再省 40–60%。当母带是 PNG 而你需要一个更小的网页交付物时,这就是该拨的旋钮。想看各格式在真实图像 上的对比,可以读JPG vs PNG vs WebP vs AVIF。

ImagElite 如何处理两种模式

ImagElite 的 图片压缩器用同一条滑杆同时暴露两种模式。当你拖动 JPG 输出的画质滑杆,你其实在 直接驱动有损编码器——画质越低,量化网格越粗、文件越小、极端放大下瑕疵 越明显。当你把目标格式切到 PNG 或 WebP/AVIF 的无损变体时,滑杆会消失, 工具会回到纯粹的冗余消除流水线,保证每一个像素都和上传时一模一样。

因为一切都在浏览器本地执行,你可以在同一张图上 A/B 两种模式而无须重新 上传。先丢一张截图、再丢一张手机照,就会看到有损与无损输出的体积差 在两者之间整个翻转——那个差距就是无损再也压不动的冗余,也是有损愿意 抛掉以换取速度的代价。