图片压缩详解：有损与无损的权衡之道
为什么图片能压缩
一张 1000 万像素的未压缩图，每像素 3 字节（RGB），原始大小约 30MB。但存成 JPG 通常只有 2~5MB，画质肉眼几乎无损。这 10 倍的压缩从哪来？答案是图片数据里有大量冗余——空间冗余、视觉冗余、编码冗余，压缩算法就是去消除这些冗余。
图片压缩分两大路线，理解它们的区别是所有优化决策的基础。
无损压缩：PNG / GIF / WebP(lossless)
无损压缩保证解压后每个像素和原图完全一致，一个 bit 都不变。原理是消除编码冗余：
- PNG：用 DEFLATE 算法（同 ZIP）+ 行级滤波。对大片同色区域（图标、色块、文字截图）压缩率极高，因为同色像素重复出现，可用”重复 N 次”代替逐个存储
- 预测滤波：PNG 对每行像素做差分（存”和前一个像素的差”而不是绝对值），相邻像素颜色接近时差值小，更利于压缩
无损适合：图标、Logo、带文字的截图、需要透明通道的图。这类图颜色少、边界锐利，无损能压缩得很小且不产生模糊。但照片用 PNG 巨大——照片颜色丰富、相邻像素差异大，无损压缩榨不出多少油水，一张照片存 PNG 可能 20MB。
有损压缩：JPEG / WebP(lossy) / AVIF
有损压缩主动丢弃人眼不敏感的信息换取高压缩率，解压后像素和原图有差异（但设计得让人眼几乎察觉不到）。JPEG 是最经典的有损格式，原理值得理解：
1. 色彩空间转换 + 色彩抽样
人眼对亮度敏感、对色度迟钝。JPEG 先把 RGB 转成 YCbCr（亮度 Y + 色度 Cb/Cr），然后对色度做下抽样——常见 4:2:0，即每 4 个像素共享一组色度。这一步几乎无损画质（人眼分不出），却直接砍掉一半以上数据。
2. DCT（离散余弦变换）
把图像切成 8×8 的块，对每块做 DCT，把空间域（像素值）转到频率域（不同频率的余弦波系数）。转换后，低频（大面积平滑区域）系数大、高频（细节边缘）系数小。
3. 量化（丢信息的关键）
按一张量化表，把 DCT 系数除以一个数再取整。高频系数被大幅除、多数归零——这正是”丢信息”的环节，也是画质和体积的旋钮。压缩质量参数（如 quality=80）控制量化表的粗细：质量越低，除得越狠，丢的越多，文件越小。
4. 熵编码
把量化后的系数（大量零）用行程编码 + 哈夫曼编码进一步压紧。
有损适合：照片、色彩丰富的自然图像。这类图相邻像素变化丰富、高频细节人眼不敏感，有损能压到极小且观感好。但图标/文字截图用 JPEG 糟糕——锐利边缘会产生振铃伪影（文字周围出现波纹），且 JPEG 不支持透明。
格式选择决策
| 格式 | 压缩 | 透明 | 动画 | 适用 |
|---|---|---|---|---|
| JPEG | 有损 | 否 | 否 | 照片、自然图像 |
| PNG | 无损 | 是 | 否 | 图标、Logo、文字截图、需透明 |
| WebP | 有损/无损 | 是 | 是 | 现代网页通用，JPEG/PNG 的全面替代 |
| AVIF | 有损/无损 | 是 | 是 | 最新，压缩率最高，兼容性在提升 |
| GIF | 无损（256 色） | 是 | 是 | 简单动画（但颜色受限、体积大） |
WebP 是当前网页首选：有损 WebP 比 JPEG 小 25~35%，无损 WebP 比 PNG 小 26%，还支持透明和动画，现代浏览器全支持。AVIF 压缩率更高但编码慢、老浏览器不支持。
压缩参数怎么调
压缩的核心权衡是体积 vs 画质：
- JPEG/WebP 质量 80~85：肉眼几乎无差，体积比 90+ 小很多，是网页图的金标准
- 质量 70 以下：开始能看出块效应（8×8 块边界），仅用于缩略图等小尺寸
- 质量 95+：几乎不丢信息，但体积骤增，性价比低——要无损直接用 PNG/WebP 无损
别盲目追求”质量 100”，它不是无损，只是量化最轻，体积却接近无损格式，得不偿失。
压缩 ≠ 缩放
压缩（compression）和缩放（resize）是两件事，别混淆：
- 压缩：不改变像素尺寸，靠编码减少字节数
- 缩放：改变像素尺寸（如 4000×3000 → 800×600），直接减少像素数量
对网页图来说，缩放往往是减体积最有效的手段——展示尺寸 800px 宽的图，没必要存 4000px 原图。先按展示尺寸缩放（见 [[image-resize]]），再压缩，效果最佳。一张 4000px 原图压成 quality 80 可能还是 3MB，缩到 800px 再压可能只有 80KB。
常见误区
- 重复压缩有损格式：JPEG 每存一次都在丢信息，反复编辑保存会累积画质损失（代际损失）。编辑用无损格式（PNG/TIFF），最终发布再转 JPEG
- 图标用 JPEG：边缘振铃、不支持透明，该用 PNG 或 WebP
- 照片用 PNG：体积巨大，该用 JPEG/WebP
- 忽略展示尺寸：发 4000px 图给 800px 的展示位，浪费带宽和流量
- 质量拉满当”无损”：quality 100 ≠ 无损，要无损用无损格式
小结
图片压缩的本质是消除冗余：无损（PNG）消除编码冗余但不丢信息，适合图标文字；有损（JPEG）主动丢弃人眼不敏感的高频和色度信息，适合照片。WebP 是兼顾两者的现代选择。压缩质量参数控制”丢多少”，80~85 是网页金标准。记住压缩和缩放是两件事——先按展示尺寸缩放、再压缩，才是体积优化的正确姿势。涉及格式转换看 [[image-convert]]。