3、图像压缩工具实战：TinyPNG、ImageOptim、Squoosh CLI、cwebp 的使用与参数调优

图像压缩，说白了就是给图片「减肥」。在界面移植的场景里，一张没压缩的 PNG 可能几百 KB，压缩后几十 KB，加载速度能差好几倍。我见过不少项目，界面做得很漂亮，结果首屏加载慢得像蜗牛，一查全是图片惹的祸。

今天咱们就动手，把四个主流工具过一遍。我会结合自己的踩坑经验，告诉你每个工具怎么用、参数怎么调、什么时候该选哪个。

3.1 TinyPNG：最省心的在线压缩

TinyPNG 是我最早用的压缩工具。那时候还在做移动端 H5 页面，设计师给的切图动不动就几百 KB，我直接拖到 TinyPNG 网页上，几秒钟就瘦下来了。

它的原理其实不复杂——通过降低颜色数量、优化调色板来压缩 PNG。对于 JPEG，则是调整量化表。说白了就是「有损压缩」，但人眼基本看不出来。

不过要注意，TinyPNG 的压缩率是固定的，你不能手动调质量。它内部有一套算法，自动平衡文件大小和画质。如果你需要更精细的控制，就得看后面的工具了。

3.2 ImageOptim：macOS 上的批量利器

ImageOptim 是 macOS 上的免费工具。我记得第一次用它压缩一套 UI 切图，200 多张 PNG，拖进去几分钟就全处理完了，平均压缩率 40% 左右。

它支持有损和无损两种模式。无损模式只去除元数据、优化 Huffman 编码，不会改变像素。有损模式则用 pngquant 或 pngcrush 进一步压缩。

3.3 Squoosh CLI：Google 出品的参数调优神器

Squoosh CLI 是 Google 推出的命令行工具。它最大的好处是——你可以精确控制每一个压缩参数。我个人非常喜欢它的「视觉对比」功能，虽然 CLI 模式下没有界面，但你可以通过参数反复试，找到最佳平衡点。

安装很简单：

npm install -g @squoosh/cli

基本用法：

squoosh-cli --mozjpeg quality=75 input.jpg -d ./output

这里我重点说一下参数调优。Squoosh 支持多种编码器，每个编码器都有自己的参数体系：

• mozjpeg：适合 JPEG，参数有 quality（质量，0-100）、baseline（基线模式）
• oxipng：适合 PNG，参数有 level（压缩级别，0-6）、strip（是否去除元数据）
• webp：适合 WebP，参数有 quality、alpha_quality（透明度质量）
• avif：适合 AVIF，参数有 quality、speed（编码速度）

我一般这样调优：

1. 先用 quality=80 跑一遍，看文件大小
2. 如果太大，降到 quality=70，对比画质
3. 找到肉眼几乎看不出差异的最低质量值

3.4 cwebp：WebP 生态的基石

cwebp 是 Google 官方的 WebP 编码工具。如果你要在界面移植中使用 WebP 格式，cwebp 是绕不开的。它支持有损、无损、透明通道，还能设置各种高级参数。

安装方式（macOS 用 Homebrew）：

brew install webp

基本用法：

cwebp -q 80 input.png -o output.webp

参数调优是 cwebp 的核心能力。我常用的参数组合：

举个例子，我处理一套带透明通道的图标时，会用这个命令：

cwebp -q 80 -m 6 -alpha_q 100 -pass 5 icon.png -o icon.webp

3.5 工具对比与选型建议

说了这么多，到底该用哪个？我整理了一张对比表：

我个人习惯这样选：

• 临时处理一两张图 → TinyPNG，打开网页拖进去就行
• 批量处理设计师给的切图 → ImageOptim，拖文件夹进去，几分钟搞定
• 需要精确控制质量 → Squoosh CLI，参数调起来很顺手
• 项目要求 WebP 格式 → cwebp，官方工具最靠谱