一张手机拍的照片动辄 3–5 MB，几张叠一起，网页加载转圈、微信发送失败、网盘配额见底。很多人以为「压缩」就是把图弄模糊，其实方法对了，体积能砍掉一大半，肉眼几乎看不出差别。
一、体积都去哪了
图片文件大小，主要取决于三个因素：像素数量（分辨率）、色彩深度、以及压缩算法。一张 4000×3000 的图，哪怕内容简单，像素点就有 1200 万，每个点都占空间。而很多场景根本用不到这么高分辨率——网页上一显示就缩到 800 像素宽，那原始大图纯属浪费。
所以第一步往往不是「压画质」，而是「降分辨率」：你实际要显示多大，就导出多大。
二、先裁再缩，事半功倍
在缩放之前，先想清楚这张图要表达什么。一张旅游照里，主角只占中间一小块，四周全是无关背景——先把无关部分 图片裁剪 掉，构图更聚焦，像素量也先降一截，后续压缩压力小很多。
裁剪完再 图片缩放 到目标尺寸。比如博客配图宽度设为 1200 像素，手机端 800 足矣。分辨率一降，文件体积通常直接缩小数倍，且不影响清晰度，因为本来就不该用原图那么大。
三、有损 vs 无损，别一概而论
压缩分两类。有损压缩（如 JPEG/WebP）会丢一些人眼不敏感的信息，体积小、画质略损；无损压缩（如 PNG）保留全部信息，体积小但上限有限，适合图标、线条图、文字截图。
照片类用有损（JPEG/WebP）最划算；截图、logo、透明图用 PNG。选错格式，体积可能差好几倍。如果工具支持，优先导出 WebP——同等画质下它比 JPEG 还小一截，现代浏览器全支持。
四、质量为旋钮，不是开关
有损压缩里有个「质量参数」（比如 60%、80%）。很多人要么拉满（体积没压下来），要么拉到极低（糊成马赛克）。经验值是照片 70–85% 之间，肉眼基本无感，体积却能降 40–70%。多试几个档位对比，找到你接受的平衡点。
五、批量处理与自动化
大量图片（电商商品图、相册导出）一张张手动弄太累。思路是先统一裁剪比例（保持视觉一致），再批量缩放到同一宽度，最后统一导出格式和质量。很多工具支持批量，关键是先定好「统一规则」，而不是每张单独调。
六、嵌网页时的取舍
把图片直接塞进 HTML（base64 内联）能减少请求数，但会让 HTML 文件变大、且无法被浏览器单独缓存。小图标偶尔为之可以，大图千万别。需要内联时，先用 图片转 Base64 生成编码，但务必先压缩原图，否则内联后体积爆炸。
更推荐的做法是：图片作为独立文件加载，配合现代格式（WebP）和合理的尺寸，加载速度和清晰度能兼得。
七、一个判断清单
拿到一批图要优化时，过一遍：能不能先裁掉无用部分？实际显示多大，就导出多大？照片走有损、图标走无损？质量参数试到 70–85%？格式优先 WebP？这五步做完，体积通常能降到原来的三分之一到一半，观感几乎不变。
小结：图片优化不是「弄模糊」，而是「按需降分辨率 + 选对格式 + 调好质量」。先裁、再缩、后压，顺序对了，又快又清晰真能做到。