把一张 200 KB 的 PNG 丢进压缩工具，出来 350 KB。压缩工具没坏，问题在于压缩方式与图片内容是否匹配。理解了这一点，你就能主动控制体积，而不是反复试参数。
先理解两种压缩
有损压缩（JPEG、WebP 有损模式）会丢弃人眼不敏感的高频细节，体积往往能降到原来的十分之一；无损压缩（PNG、WebP 无损）一个像素都不改，只重新排列数据，压缩率取决于画面里有多少可复用的重复图案。
由此可以推出一条关键结论：无损压缩对纯色、大色块、规则线条特别有效；对有噪点、渐变、细节密集的照片几乎无效，甚至因为要存更多索引数据而变大。
「越压越大」的三种典型情况
一、把照片存成 PNG。 照片里每个像素的颜色都略有不同，PNG 找不到可复用的图案，只能老实存。一张 1920×1080 的照片存 PNG 往往 3–5 MB，转成 JPEG（质量 80）只要 300 KB 左右。
二、把截图或图标转成 JPEG。 反过来也会翻车：文字边缘和纯色块在 JPEG 里有损压缩后会出现「蚊子噪声」，为了不糊只能提高质量，质量一高体积反而超过原 PNG。带文字的截图更适合 PNG 或 WebP 无损。
三、对已经压缩过的图再压。 从聊天软件、网页保存下来的 JPEG 已经是有损结果，再压一次只是叠加损失：体积小一点点，画质掉得很快。要重压就去找原始素材。
怎么选：按内容判断
- 照片、人像、风景 → JPEG（质量 75–85）或 WebP 有损（同画质下体积再小 25–35%）
- 截图、图表、带文字的界面图 → PNG 或 WebP 无损
- 图标、logo、简单插画 → SVG（矢量，放大不糊）
- 需要透明背景 → PNG 或 WebP（JPEG 不支持透明）
- 动图 → 优先考虑视频格式或 WebP 动图，GIF 的体积效率最差
除了格式，还能调什么
最大边长往往比质量参数更有效。网页正文里显示的图片通常 800–1200 像素宽就足够，把 4000 像素的原图缩到 1200，体积能掉一个数量级，肉眼几乎看不出差别。
质量参数：JPEG 在 75–85 之间是性价比拐点。再往上体积涨得很快，画质提升却极小。
元数据：相机拍的图常带 EXIF（拍摄地点、设备、时间），既占体积又涉及隐私，发布前可以剥掉。
一句话总结
照片用有损、截图用无损、先缩尺寸再调质量。 记住这一句，就不会再遇到「越压越大」。
一张表定格式
先看内容类型，再决定格式，这是唯一不会反复试错的顺序：
| 图片内容 | 首选格式 | 参数 | 注意 |
|---|---|---|---|
| 照片、人像、风景 | WebP 有损 / JPEG | 质量 75–85 | 不支持透明 |
| 界面截图、带文字的图 | PNG 或 WebP 无损 | 无需调质量 | 别转 JPEG |
| 图标、logo、简单插画 | SVG | — | 矢量，任意缩放不糊 |
| 需要透明背景 | PNG / WebP | — | JPEG 无透明通道 |
| 短动图 | WebP 动图 / MP4 | — | GIF 体积效率最差 |
这张表的用法不是背下来，而是在压缩之前先问自己一句「这是照片还是截图」。答对了，后面基本不用调参数。
WebP 和 AVIF 怎么选
WebP 的兼容性已经很广，主流浏览器全部支持，同画质下比 JPEG 小 25%–35%，还支持透明与动图。它是现在最稳的默认选择。
AVIF 压缩率更高，同画质下能比 WebP 再小 20%–30%，但两个代价要算清楚：编码速度慢很多（批量处理时能差出十几倍时间），以及部分老设备和老版本浏览器的解码支持仍不完整。做面向大众的网站，AVIF 适合作为「浏览器支持就用」的增强，而不是唯一格式。
实践中的稳妥组合是：主图提供 WebP，同时保留一份 JPEG 作为回退。这样既有体积优势，又不会在少数环境下显示空白。
透明背景的三种处理方式
- 保留透明（PNG / WebP）：适合图标、贴纸、需要叠在不确定底色上的元素。代价是体积，尤其是大面积半透明（阴影、渐变光晕）时，PNG 压缩率会明显下降
- 填成纯色（JPEG）：如果图最终一定放在白色或深色背景上，直接把背景填成那个颜色再存 JPEG，体积能降到原来的三分之一。前提是你确定底色不会再变
- 改成矢量（SVG）：单色图标最理想的做法。几 KB 的文件，任意放大不糊，还能用 CSS 改颜色。缺点是复杂渐变和纹理不适合矢量化
一个常见错误：把带透明背景的 logo 直接存成 JPEG，透明区域会变成黑色或白色方块，贴到深色页面上非常明显。这是格式限制，不是软件 bug。
批量处理该按什么顺序
顺序错了会白白损失画质。正确流程是四步，顺序不能换：
- 先裁剪。把不需要的区域去掉。先裁再缩，比先缩再裁保留的细节更多，计算量也更小
- 再缩放。缩到目标显示尺寸的 1.5–2 倍（应对高分屏）。这一步对体积的影响最大，通常比调质量参数有效得多
- 然后压缩。选定格式与质量参数，一次性完成，不要反复「压一次看看、再压一次看看」——每压一次有损都可能叠加损失
- 最后剥元数据。移除 EXIF 里的拍摄地点、设备型号、时间。既减小体积，也避免把隐私发布出去
反过来的常见错误是「先压缩再缩小」：压缩阶段已经丢掉的细节，缩放时无法恢复，等于白丢一次。
怎么判断压缩后还能不能用
不要只看缩略图。把压缩前后两张图并排放在 100% 比例下看，重点看三处：
- 文字边缘。有损压缩最先在这里出问题，表现为文字周围出现毛边或彩色噪点
- 大块渐变的天空或墙面。压缩过度会出现明显的色带（banding），原本平滑的过渡变成一圈圈台阶
- 细密纹理，如头发、草地、织物。这里最容易糊成一片
如果这三处都还过得去，通常在实际显示尺寸下就不会有问题——毕竟网页上的图片很少以 100% 原尺寸呈现。