每次要传图都会遇到同一个问题：这张图太大了，得压一压。但压完之后要么还是很大，要么糊得没法看。问题通常出在把”压缩”当成一个单一旋钮，实际上它是三个各自独立的维度。
三个维度，各管一段
- 质量参数：决定编码器丢弃多少细节。影响的是”画面干不干净”，对体积的影响是渐进的。
- 尺寸：像素数量。影响的是”能看多大”，对体积的影响是平方级的——长宽各减半，像素数变成四分之一。
- 格式：编码方式。同样的画面，不同格式的体积可以差好几倍。
一个常见误判是：图太大就使劲降质量。但如果这张图是 4000×3000 要放在宽 800 的网页里，先降尺寸带来的收益远大于降质量，而且画面反而更锐利（缩小本身会平滑掉噪点）。
质量参数的甜点区
对 JPEG 而言，经验值：
- 85–90：几乎看不出差别，适合摄影作品、需要放大的图。
- 75–85：肉眼很难分辨，是网页配图最常用的区间。
- 60–70：开始能在平坦区域（天空、墙面）看到色块，适合缩略图。
- 低于 60：明显劣化，除非极端场景否则不值得。
值得注意的是，已经压缩过的图再压一次，收益很小而劣化很快。JPEG 是有损编码，每一次重新编码都会在前一次的损伤上再削一刀。如果这个图来自微信或微博，它已经被压过了，此时再压不如直接降尺寸。
什么时候该换格式
格式的选择其实是在问”我要兼容谁”：
- JPEG：通用性最好，照片类的默认选择。不支持透明。
- PNG：无损，适合截图、文字、线条图、需要透明的图。不适合照片——一张照片存成 PNG 可能是 JPEG 的五到十倍大。
- WebP：同等画质下比 JPEG 小 25–35%，支持透明和动图。现代浏览器都支持，是目前网页的稳妥选择。
- AVIF：比 WebP 再小一截，画质更好，但编码很慢，且部分旧环境不支持。
一个实用的判断：如果你要发到微信、公众号、或者别人可能用老软件打开，就老实用 JPEG。如果是自己网站上用，WebP 是当下性价比最高的。
“压到 200KB 以内”是怎么做到的
很多场景给的是目标体积而不是质量参数——比如报名系统要求附件不超过 500KB。这时候手动试参数很痛苦。
自动化的做法是二分查找：先按中等质量压一次，看结果比目标大还是小，然后据此收窄区间，重复几轮就能逼近目标。七八次迭代内基本能收敛，而每次编码在本地浏览器里通常只要几十毫秒。
这个思路比”固定压到 70 质量”聪明的地方在于：一张纯色海报和一张满是细节的照片，达到同样体积所需的质量参数是完全不同的。
哪些图不该压
- 已经是 WebP/AVIF 且体积合理的图，再压收益极低。
- 含文字的截图——压缩会让文字边缘出现振铃伪影，糊掉的代价远高于省下的几十 KB。这种情况应该存 PNG。
- 需要二次编辑的原图。压缩是不可逆的，先压了再改就改不回来了。
关于”上传到服务器压缩”
市面上大多数在线压缩工具要求你把图片传到它们的服务器。对个人隐私照片、证件、合同这类内容，这本身就是个不该承担的风险。
我的在线工具箱里的压缩功能全部在浏览器本地完成，文件不会离开你的设备——这也是它当初坚持纯前端实现的主要原因。想试试的话在 图片压缩，整个过程断网也能跑。