过去几年里,我在图片文件大小上花了太多不必要的时间。每隔几个月,就有客户发来一张 12MB 的首屏大图,要求压到 200KB 以内。每次都是一样的流程:用哪个工具?选什么格式?调什么参数?
经历足够多的来回后,我终于找到了一套真正有效的流程。没什么秘诀,也没什么隐藏参数——只是对图片格式和压缩原理的实用理解。希望能帮你省去一些试错的精力。
先了解格式
在选工具之前,你需要知道自己在压缩什么。不同类型的图片适合不同的格式,用错格式就像给汽油车加柴油——能跑,但跑得很糟。
| 格式 | 适用场景 | 压缩方式 | 透明度 |
|---|---|---|---|
| JPEG | 照片、渐变图像 | 有损,可调节 | 不支持 |
| PNG | 截图、图形、文字 | 无损 | 支持 |
| WebP | 几乎一切 | 有损/无损,效率很高 | 支持 |
| AVIF | 下一代照片格式 | 压缩比最高 | 支持 |
JPEG 的最佳质量区间
JPEG 的质量参数让很多人困惑。实际上是这样的:质量 75-85 在正常观看尺寸下几乎看不出和原图的区别。超过 85?你只是在白白增大文件体积,视觉上不会有任何可感知的提升。低于 60?边缘和平面色块开始出现明显的压缩伪影。
我对网页照片的默认设置是质量 80。如果图片有大量细节——比如头发、织物纹理、远处的树叶——我可能调到 85。对于背景图或缩略图这种没人会放大看的场景,70 就够了。
PNG:不是永远更好
很多人喜欢 PNG,因为它"无损"。但"无损"听起来很美好,直到你发现一张 4MB 的 PNG 转成 WebP 后只有 120KB,视觉上完全看不出差异。PNG 适合截图(尤其是带文字的)、Logo 和任何需要像素级精确渲染的场景。但对于照片?几乎总是错误的选择。
一个常见错误:把 JPEG 截图保存为 PNG。你把 JPEG 的所有压缩伪影都保留了下来,结果文件更大、画质反而更差。如果源文件本身就是有损的,输出也应保持有损格式。
WebP:实用的升级选择
WebP 从 2010 年就出现了,如今浏览器支持基本全面(连 Safari 也在几年前就支持了)。在同等画质下,它的文件通常比 JPEG 小 25-35%,同时支持有损、无损两种模式以及透明通道。
对于大多数网页场景,WebP 应该是你的默认输出格式。把 JPEG 转成同等视觉质量的 WebP,文件更小。把 PNG 转成有损 WebP,节省空间的效果往往非常显著。
2026 年不使用 WebP 的理由,大概只有两种:需要兼容非常老的客户端,或者你的工作流程还不支持它。
AVIF:效果惊艳但速度慢
AVIF 是当前图片压缩领域最热门的格式,也确实有理由——在同等画质下,它比 JPEG 小约 50%。但有个问题:编码速度非常慢。慢到让人难以忍受。同样一批 100 张图片,WebP 只要 10 秒,AVIF 可能需要好几分钟。
我的建议:对那些会面向大量用户、且编码时间不成问题(比如静态站点的构建步骤)的图片使用 AVIF。对于日常快速优化,WebP 仍然是速度和压缩之间更好的平衡。
最大的坑:反复编码有损格式
这个问题反复坑人。典型场景:你把 JPEG 压缩到质量 70,然后打开这个压缩后的版本做调整,再以质量 70 保存。你已经对一张已经是有损压缩的图片进行了第二次压缩。
有损压缩的伪影是累积的。每次重新编码都会进一步降低画质。就像复印件的复印件——每一代都比上一代更差。经过 3-4 次重新编码后,就算设为质量 90 也救不回来了。
解决办法很简单:始终从原始文件开始压缩。如果原始文件已经没了,需要修改时,尽量减少重新编码的次数。更好的做法是:编辑过程中使用无损格式(PNG 或 TIFF),只在最终导出时做一次 JPEG/WebP 有损压缩。
选择压缩工具时看什么
不是所有图片优化器都一样。以下是真正重要的几个方面:
- 格式支持 — 能不能输出 WebP 和 AVIF,而不仅仅是 JPEG/PNG?
- 质量控制 — 能否精确设定目标质量,还是只有一个笼统的"压缩"滑块?
- 批量处理 — 如果你要处理超过 2-3 张图,逐个操作的工具直接排除。
- 客户端处理 — 图片是留在你的设备上,还是会被上传到服务器?
- 速度 — AVIF 效果很好,但如果每张图要等 30 秒,日常使用就不现实。
我的工作流(2026 版)
经过多年调整,这是我实际在用的流程:
- 网页产品图 → 原图 → WebP 质量 80。通常能缩小 60-70%。
- 带文字的截图 → 保持 PNG,清除元数据,做无损优化。
- 社交媒体图片 → WebP 质量 75-80。没人会在 Instagram 上逐像素检查。
- 首屏大图/Banner → AVIF,effort=4-6,作为构建步骤执行。大批量时节省的空间相当可观。
- 图标和 Logo → 尽量用 SVG。如果必须是位图,用 PNG 做无损压缩。
简单好记,也够灵活应对大多数场景。核心思路是:没有万能的"最佳"设置——只有对具体任务最合适的工具和格式。
在浏览器中直接压缩图片 — 无需上传、无需注册、不会有画质惊喜。
在 Vaultool 免费体验 →