我帮朋友开咖啡店那阵，菜单图把我坑惨了。 87 张 iPhone 13 Pro 拍的 HEIC，原图 4032×3024，单张 2.4–3.8MB，总 214MB。 WordPress 站放腾讯云 2核4G，首屏 LCP 跑到 4.9 秒。 我第一次图省事，用某在线压缩拉到 q=60，长边 1200。 电脑看还行，手机上一放大，菜单小字边缘像被水泡过。 后来才知道，不是压缩算法不行，是我把顺序搞反了：先定显示尺寸，再选格式，最后调质量。 质量数字只负责压缩痕迹，尺寸才决定物理清晰度。
先说我的独立观点：别背 q=80 这个万能数字。 长边像素 = CSS 宽度 × DPR × 1.2~1.5，这个公式比质量重要。 比如手机端图片容器 CSS 宽 358px，iPhone 14 Pro DPR=3，物理像素 1074px；你导出长边 1200–1600 已经够，导出 4032 只是浪费带宽。 质量 q=82 配 4:2:0 色度抽样，对风景够；但菜单、截图、带小字的图，4:2:0 会把红色黑色边缘糊成一块。 改成 4:4:4，文件大约多 15%–25%，我觉得值。 这个细节很多压缩教程不提，因为它不炫，但真影响观感。
我拿 12 张菜单图做了一次不严谨但有用的对比。 原图总 34.6MB，长边统一 1600，sRGB。 JPEG q=82、4:2:0、progressive：总 3.1MB，电脑看可以，手机小字发虚。 JPEG q=82、4:4:4、progressive：总 3.7MB，小字明显稳，比 4:2:0 大约多 19%。 WebP q=80、effort=6、method=6：总 2.2MB，iOS 14+ 和现代浏览器基本没问题。 AVIF cq-level=30、speed=6：总 1.4MB，比 WebP 又小约 36%，但文字边缘有轻微涂抹。 PNG 8-bit：总 18.9MB，无损但网站用不起。 结论：菜单图我最后留 JPEG 4:4:4，博客风景图 WebP，AVIF 只在 CDN 自动转码或首屏大图用。
第一步，别急着压，先量尺寸。 Chrome 打开 DevTools，Network 勾 Disable cache，切 375px 宽，点图片元素看 CSS 宽度。 我那个菜单容器实际 358px，DPR 3，需要约 1074px 物理像素。 最后我取长边 1600，给桌面 1x/2x 留余地。 第二步，批量处理。 ImageMagick 命令我是这么写的：magick mogrify -auto-orient -path out -resize '1600x1600>' -strip -sampling-factor 4:4:4 -interlace Plane -quality 82 *.jpg。 注意 -strip 会去掉 EXIF，如果图是广色域，先转 sRGB，别直接扔网页，否则颜色会飘。 第三步，WebP 用 magick input.jpg -resize '1920x1920>' -strip -quality 78 -define webp:method=6 output.webp。 method=6 比默认慢，但我测同一张图小 5%–10%。 AVIF 用 avifenc -a cq-level=28 -a speed=6 -a end-usage=q input.jpg out.avif，cq-level 越小越清晰，28–32 是我常用区间。 speed 6 已经有点慢，87 张跑了 11 分钟，2核4G 的 CPU 直接 100%。
如果你用 Node，Sharp 比命令行更适合接自动化。 核心参数：sharp('in.jpg').rotate().resize({ width: 1600, height: 1600, fit: 'inside', withoutEnlargement: true }).jpeg({ quality: 82, progressive: true, chromaSubsampling: '4:4:4', mozjpeg: true }).toFile('out.jpg')。 WebP 就把 .jpeg 换成 .webp({ quality: 78, effort: 6 })。 AVIF 用 .avif({ quality: 55, effort: 6 })。 注意 Sharp 的 quality 和 avifenc 的 cq-level 不是一回事，别混。 想查压缩后有没有糊，别只盯文件大小，用 magick compare -metric SSIM 原图 压缩图 null:。 同尺寸下 SSIM 0.98 以上通常能看，文字图我会要求 0.99 以上，再在手机 100% 看一遍。
几个我踩过的坑：先压缩再裁剪，等于每次保存都重新 JPEG 编码，代际损失很快堆出来，正确是一次从原图导出。 透明图存 JPEG，透明区会变白或变黑，Logo 用 WebP 或 PNG。 iPhone HEIC 是 Display P3，直接转 JPEG 丢色彩描述，在 sRGB 网页可能过饱和，Lightroom 导出选 sRGB、品质 82、长边 1600。 锐化别放在压缩后，先缩尺寸，再轻微锐化，最后压缩；Photoshop 智能锐化我菜单图用数量 60%、半径 1.0、减少杂色 10%，风景用数量 40%、半径 0.8。 还有平台二次压缩：微信、小红书、公众号后台都可能重编码，你先压到 q=60 再上传，平台再压一次，糊上加糊。 我的做法是关键图按平台推荐尺寸直接给高质量 JPEG q=88–92，让平台只压一次；自己网站才用 WebP/AVIF。
最后一句不金句，纯经验：图片处理不是找最强格式，是找最不容易被二次糟蹋的流程。 先定长边，再选格式，再调质量，最后在真手机上看。 小站别盲目全站 AVIF，WebP + JPEG 回退够用；大站有 CDN 自动转码再上 AVIF。 你要是只改一个设置，先把上传原图的 4032px 改成 1600px，再谈 q=80 还是 q=85。 我的那 87 张菜单图，最终总大小从 214MB 降到 23.7MB，手机端 LCP 从 4.9 秒降到 1.8 秒，靠的不是黑科技，是别在尺寸上犯懒。