如何压缩图片而不损失可见画质
图片过大是大多数网页最重的负担，也最容易优化。好消息是：“压缩”不等于“变糊”。下面五个技巧，请按顺序使用。
1. 先缩尺寸——效果超过一切
最大的免费红利：相机和手机直出的照片宽 3000–5000 像素，而博客正文栏的显示宽度只有 700–900 像素。把 4000 像素的图塞进 800 像素的位置，等于 80–90% 的流量花在没人能看到的细节上。
按图片实际最大显示尺寸 ×2（适配高分屏）来设置：铺满 1440 像素视口的首图最多需要 ~2880 像素；正文图 1200–1600 足够。其余全是死重。
2. 选对格式
仅格式选择一项，就能在相同观感下把体积砍半：
- 照片 → JPEG，更好的是 WebP（同画质通常比 JPEG 小 25–35%）
- 截图、图形、文字 → PNG 或 WebP 无损
- 需要透明 → PNG 或 WebP（永远别用 JPEG）
- 极致压缩 → AVIF，配 WebP 回退
单是把照片从 PNG 转成 JPEG/WebP，体积常常直接降 70–90%——因为 PNG 从设计上就不适合摄影内容。
3. 用好质量的甜蜜点
有损压缩的质量参数遵循边际递减：从 95 降到 75 可能体积减半，但通常看不出来。实用参考：
- 70–80 —— 网页照片甜蜜点
- 80–90 —— 作品集、产品图等细节敏感场景
- 60–70 —— 缩略图和预览
- 60 以下 —— 开始出现可见伪影，正式内容别用
拿不准就在几个档位各压一次，100% 放大对比。眼睛说了算，不是数字。
4. 去掉不需要的东西
图片文件里藏着行李：EXIF 拍摄参数、GPS 定位、色彩配置文件、内嵌缩略图。对网页用途来说这些元数据几乎纯属浪费——而且发布带 GPS 标记的照片会泄露拍摄地点。
经过压缩管线重新编码（基于 Canvas 的工具天然如此）会自动丢弃大部分元数据。白赚几个百分点的体积，还附赠隐私保护。
5. 批量处理并抽查
压缩是逐张判断的事，但没人想为 200 张照片挨个调滑块。推荐流程：
- 整批拖入工具
- 设定一套合理参数（如 WebP、质量 78、最大宽度 1600）
- 看前后体积对比表——几乎没变小的说明本来就优化过
- 对重要的图全分辨率抽查
“无损”到底能得到什么
无损压缩（PNG、WebP 无损）保留每个像素，照片通常只能缩小 10–20%。合理质量的有损压缩能缩小 60–80% 且看不出差别。对照片来说，无损几乎总是错误的取舍——把它留给伪影会一眼穿帮的图形。
不上传也能压缩
如果图片涉及隐私、客户项目或保密协议，把它们传给陌生的在线压缩器是真实的风险。我们的图片压缩工具用 Canvas 和 WebAssembly 在你的浏览器里完成编码——文件不离开设备，下载前还能逐张看到节省了多少。