前端、运营、独立开发者经常要处理图片压缩：上传前压小、生成缩略图、批量处理素材。这篇从需求出发，讲清楚图片压缩的取舍，再说一个现成的本地压缩工具。
一、先理清：图片压缩到底在压什么
一张图的大小由三件事决定：
- 分辨率（像素总量）：4000×3000 的原图必然大；
- 格式：BMP 最大，PNG 其次，JPG 适中，WebP 更小；
- 质量参数：JPG 质量 0~100，越低越小越糊。
压缩 = 在「分辨率、格式、质量」三者间做取舍。
二、有损与无损
- 有损（JPEG）：靠丢弃高频细节减小体积，压缩比高，反复压缩会累积损失；
- 无损（PNG）：画质不变，但压缩空间小，保留透明通道。
照片/截图用有损 JPG；图标、透明图用无损 PNG。
三、格式选型（技术视角）
落地建议：现代项目可「WebP 优先 + JPEG/PNG fallback」，用 <picture> 标签按浏览器能力取图。
四、浏览器本地压缩的实现思路（供参考）
前端本地压缩通常用 Canvas 或 createImageBitmap 重绘：
1 const img = await createImageBitmap(file);
2 const canvas = document.createElement('canvas');
3 canvas.width = img.width * scale; // 缩放分辨率
4 canvas.height = img.height * scale;
5 const ctx = canvas.getContext('2d');
6 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
7 const blob = await new Promise(r => canvas.toBlob(r, 'image/jpeg', quality)); // 0~1
关键参数：scale（缩放比例）控制分辨率，quality（0~1）控制有损质量。两者结合就能把图压到目标体积附近。
若要「压到指定大小」（如 ≤100KB），可做成一个循环：先按 quality 压，若体积仍超目标，就逐步降低 scale（缩分辨率）重试，直到体积达标------这是「压缩到指定大小」这类工具的核心思路。
五、参数选择经验
- 网页配图：quality 0.6~0.7，可再配合缩放；
- 需打印：quality 0.9 以上；
- 透明图：用 image/png，别转 jpeg（透明变白底）；
- 压缩率参考：quality 0.8 约减 40%~60% 体积、肉眼几乎无差；0.6 减 70%~80%、有轻微噪点。
六、不想自己写，直接用的工具
如果只是日常处理，不用自己写 Canvas，星点图片压缩已经把这些做好了：支持 JPG/PNG 批量拖入、压缩前后实时对比、调节质量/目标大小、批量打包下载，全程本地处理不上传。对运营、独立开发者处理素材很省事.
七、常见问题
- 压完还是大 → 检查是否 PNG/BMP，转 JPG 或 WebP；
- 压糊了 → quality 太低或 scale 太小，回调即可；
- 反复压缩累积损失 → 尽量从原图一次压到位；
- 透明图变白底 → 用了 jpeg，透明图必须 png/webp；
- 想精确到 KB → 用「压缩到指定大小」，比手动调参快。
总结：图片压缩的取舍就三个变量（分辨率/格式/质量），前端用 Canvas 重绘就能本地实现；日常批量处理可以交给现成工具省时间。