去年秋天我帮一个卖手工皂的小店做详情页，一共 247 张图。第一版我把导出质量拉到 100，整个文件夹 412MB，手机打开详情页白屏了 6 秒多，我表姐发微信问我「是不是网坏了」。后来我重做了一遍，压到 8.7MB，加载不到 2 秒，而且我自己来回对比了半天，肉眼真看不出差别。这篇就把那几天试出来的东西写下来，参数都是我自己跑过的，不是从哪抄的。
一、先别急着拉质量滑块，糊的原因八成在前面
大多数人一遇到「糊」，第一反应就是把导出质量从 80 拉到 100。我一开始也这样，后来发现方向基本反了，白忙。
真正的损失发生在你导出之前：手机原图拍出来大概 4032×3024、8-12MB，你发到微信里，微信会把长边压到 1280 左右（不同版本略有出入），这个过程是不可逆的；你从微信存回来，打开修图软件又存一次，等于有损重编码了两次。JPEG 是每存一次就重新压一次，就算质量拉到 100 也一样，只是损失小一点，不是在恢复。
所以如果你手上的素材是从微信、QQ、某个群里转存出来的，那它早就不是原图了，后面你怎么调参数都是在给一张已经糊了的图做美颜。这种情况我的建议是：能重拍就重拍，不能重拍就别再折腾参数了，调不回来。
二、正确顺序：定尺寸 → 定格式 → 调质量 → 清元数据
这个顺序是我试了三四天才理顺的。顺序反了，后面每一个参数都是白调，因为你不知道到底是哪一步在拖后腿。
第一步永远是尺寸。你先问自己这张图最终显示在哪个位置、多大。
- 淘宝/天猫主图：800×800 打底，现在平台允许 800-1500，正方形；
- 详情页：宽度 750px，长度随内容，我一般控制单张图高度别超过 1200；
- 微信公众号头图：900×383（2.35:1），次条封面 200×200；
- 小红书：3:4 就是 1080×1440，1:1 就是 1080×1080；
- 抖音竖屏：1080×1920；
- 朋友圈：不用特意管，长边超过 1080 会被压，你按 1080 出就行。
关键点在这里：如果你的原图是 4000 宽，但最终只显示 1600 宽，那你导 4000 出来就是纯浪费流量。多出来的像素对肉眼没有贡献，对加载速度是实打实的拖累。我后来给自己定的规则是，导出尺寸不超过目标显示尺寸的 1.5 倍（留一点给高清屏），再大没意义。第二步才是选格式，这个单独说。
三、格式怎么选：JPEG、PNG、WebP、AVIF
这块我踩的坑最多，因为不同教程说法完全不一样，我干脆自己拿同一张图导了一遍对比。
- 照片、有渐变的图：JPEG，质量 78-85。78 以下我开始能看出块状噪点，尤其是天空、皮肤这种大面积渐变的地方；
- 截图、带文字的图、纯色底、需要透明：PNG，或者 WebP 无损；
- 要放网站上、在意体积：WebP。同样肉眼画质，WebP 一般比 JPEG 小 25%-35%；
- AVIF 还能再小 20%-30%，但编码慢，我这边同样一张图要 3-5 倍时间，而且 Safari 要 iOS 16 以后才支持，老设备直接显示不出来。
我的做法是网站上以 WebP 为主，留一份 JPEG 兜底，别只放 AVIF。
还有一个特别常见的坑：把截图存成 JPEG，白底黑字的边缘会出现一层彩色噪点。这不是你显示器坏了，是 JPEG 在色度上的量化导致的。文字类图片老实存 PNG，最多大几倍，但能看清。透明背景的图同理，存 JPEG 会出现黑块或者白块，因为它根本不支持透明通道。
四、三个参数，比质量滑块重要得多
这部分是我翻 ImageMagick 手册和几个论坛来回折腾才搞明白的，很多教程压根不提。
色度抽样（sampling factor）：JPEG 默认是 4:2:0，意思是颜色信息被砍掉一半。普通照片看不出来，但红色文字、纯色 logo 的边缘会明显发虚、发彩。这种图要么用 4:4:4，要么干脆别用 JPEG。我做过一批红色包装的图，用 4:2:0 导出，客户说「字边上怎么毛毛的」，改 4:4:4 就干净了。
色彩配置文件：苹果设备默认可能是 Display P3，你在这上面导出的图丢到网页上（默认按 sRGB 解释）会特别饱和，红色尤其离谱。导出时统一转成 sRGB 就没这个问题。这个我踩过，查了半天以为是压缩的锅，其实是色彩空间的事。
元数据：手机照片的 EXIF 里带 GPS 坐标、机型、拍摄时间。你发到公开平台，等于把位置也发出去了。而且这些数据本身有体积，我随手测了几张，清掉能省 20-60KB。命令行加个 -strip 就行。
五、批量处理，我用的是这一条命令
如果你有几十上百张图要处理，一张张开 Photoshop 是折磨自己。我现在的流程是 ImageMagick 一句话：
magick mogrify -path ./out -resize 1600x1600\> -quality 82 -sampling-factor 4:2:0 -interlace Plane -strip ./*.jpgresize 里的 \>（Windows PowerShell 里要写成 \> 或者给整个参数加引号）意思是「只缩小，不放大」，防止把小图拉大糊掉；-interlace Plane 是渐进式 JPEG，网页加载时先出模糊轮廓再变清晰，体感快很多；-strip 清元数据。
这一句能把 200 张图从 400MB 压到大概 15-25MB，具体看原图内容。
不想碰命令行的，Photoshop 自带的「文件 → 脚本 → 图像处理器」也能批量转尺寸和格式，或者用 Squoosh（网页版、免费）、XnConvert。这几个我日常都用过，够用。
六、参数都对还是不理想？大概率是这几个原因
有时候参数全对了，图看着还是不理想，我遇到过几种情况，基本都不是压缩的问题。
一是平台二次压缩。你传上去的图，平台自己还会再压一遍，你控制不了。能做的是别传质量 100 的超大图（某些平台对超大文件压得更狠），尽量传接近它推荐尺寸的图。
二是你看图的屏幕。同一张图在 1080p 显示器和 4K 屏上感受完全不同，别拿自己一台设备当唯一标准。
三是图片被排版拉大了。一张 400px 宽的图在页面上被拉到 800px 显示，肯定糊，这跟压缩一点关系都没有。
我自己的观点：图片加工其实是做减法
做得越多我越觉得，图片加工不是把图变好看，是把它变得「刚刚好」——刚好清楚、刚好够用、刚好不拖后腿。
大部分人的问题是加工过度：质量拉满、尺寸保留原图、格式挑最大的、图层叠十几层。最后的成品又大又慢，画质提升肉眼根本看不出来，纯粹是心理上的安全感。
我自己现在导出图片的基本盘就是：尺寸对准目标、JPEG 质量 82、转 sRGB、清元数据。一年下来基本没翻过车。当然你要是印海报、印画册，那是另一套逻辑，别套这个。