一、先分清两个旋钮
- 尺寸（像素）：把 4000×3000 缩到 1200×900，像素数降到原来的 1/11，文件体积通常是数量级的下降，而且只要不放大回原尺寸，肉眼看不出损失。优先动这个。
- 质量 / 压缩率：在尺寸不变的前提下调整编码质量（常见 0–1 或 0–100）。降到 0.8 左右通常肉眼难辨，降到 0.5 以下就开始出现色块和边缘噪点。
很多人一上来就把质量拉到 40，结果图糊了体积也没小多少；正确顺序是：先按实际展示宽度缩放，再微调质量。
二、三种格式怎么选
- JPEG：有损、体积小、支持百万色，适合照片、渐变丰富的图。不支持透明，反复编辑保存会一次次损失细节。
- PNG：无损、支持透明，适合截图、图标、线条文字、需要精确像素的图。照片用 PNG 会非常大。
- WebP / AVIF：同等画质下比 JPEG 小 25%–50%，支持透明与动图，现代浏览器都支持；缺点是老系统/部分软件兼容差，需要保留 JPEG 兜底。
一条实用规则：照片用 JPEG 或 WebP，截图和带透明的图用 PNG 或 WebP。把 PNG 截图转成 JPEG 往往能省 70% 体积，反过来把 JPEG 照片存成 PNG 则可能涨好几倍。
三、浏览器里怎么压
前端常用 canvas.toDataURL('image/jpeg', 0.8) 或 toBlob：先把图画到 canvas（顺便可按目标宽高缩放），再以指定质量重新编码。本站 图片压缩 和 图片尺寸调整 就是这个原理，全程在浏览器本地完成，图片不上传服务器——处理证件照、合同截图、含人脸的图片时这点尤其重要。
注意：canvas 重绘会丢弃 EXIF 元数据（拍摄时间、GPS 定位、相机型号）。多数情况下这是好事，能避免隐私泄露；如果你本来就需要保留这些信息，就不要走 canvas 重编码，或先用 EXIF 去除工具 明确检查再处理。
四、容易被忽略的细节
- 透明背景转 JPEG 会变黑（或白），需要先铺一层底色。
- 放大尺寸不会「恢复」清晰度，反而让文件更大。
- 动图 GIF 体积通常很大，能换成短视频或 WebP 动图更划算。
- 网页里用
srcset按屏幕宽度给不同尺寸，比压一张万能大图更有效。 - 压缩后务必在真实设备上看一遍：文字边缘、渐变天空、人脸是最容易暴露压缩损失的地方。
五、一套可复制的流程
① 确认展示宽度（比如文章正文 800px）；② 把原图等比缩到 1.5–2 倍该宽度（应对高分屏）；③ 选格式：照片 JPEG/WebP，截图 PNG；④ 质量从 0.85 起，每降一档对比一次；⑤ 检查是否达标（体积、清晰度、透明是否正确）；⑥ 需要分享到外部前，确认 EXIF 已清除。
小结
压缩的正确顺序是「先缩尺寸，再降质量，最后选格式」。别一上来狂拉质量滑块，也别把照片存成 PNG。用本地工具处理，既快又不把图片交给第三方。