图片加工避坑指南:为什么你的图导出后发到微信、淘宝就糊了(附具体参数和命令)

关键词:图片加工,图片压缩参数,微信发图模糊,淘宝主图尺寸,ImageMagick批量处理

摘要:从一次真实的主图翻车说起,拆解图片加工里最被忽略的「压缩链路」问题。含微信、淘宝、小红书、公众号的实际尺寸参考,JPEG 质量与色度抽样的取舍,以及可直接复制的 ImageMagick / cwebp 批量命令。

上个月帮一个做家居类目的朋友收拾他的商品图。两百多张,iPhone 拍的,4000×3000,他在 PS 里一张张调完,导出的时候 JPEG 质量拉满 12。上传到后台,他自己拿手机点开一看——糊了,边角还有一圈方块。

图片

他问我是不是 PS 导出的问题。我说不是。问题是他从头到尾没想过一件事:这张图离开他的电脑之后,还要被压几次。

一、先逆推链路,再动手

绝大多数人做图片加工的顺序是:拍图 → 修图 → 导出 → 上传。

我觉得应该反过来。先搞清楚这张图最终会出现在哪、被谁压、压到什么程度,然后再回头决定中间每一步存什么格式、多大尺寸、什么质量。

下面这些是我自己这几年攒下来的实测值。平台规则会改,用之前最好自己传一张带文字的测试图验一下,别照抄。

  • 微信聊天:不勾「原图」的话,长边会被压到 1080px 左右,码率压得很凶,一张 3MB 的图进去出来可能只剩 200 多 KB。朋友圈更狠,竖图长边大概 1280,横图更小。
  • 淘宝/天猫主图:要求正方形,最小 800×800,文件不超过 3MB,格式 jpg/jpeg/png。详情页宽度一般是 750 或 790。
  • 小红书:竖图 3:4 最占屏幕,1242×1656 这个尺寸我用了两年,没被压出过问题。
  • 微信公众号正文:宽度超过 1080 会被压,建议直接按 1080 宽做,或者按 1080 的 2 倍做 @2x 适配。

图片

看出问题了吗。你的原图 4000 宽,平台最多给你留 1080。中间那 2900 多像素除了让文件变大、让平台压得更狠之外,没有任何用处。

二、JPEG 质量拉到 100,很可能是在帮倒忙

这一条我跟人吵过好几次。

一张 4000×3000 的图,质量 80、色度抽样 4:2:0,导出大概 1.1MB;质量 95、抽样 4:4:4,导出大概 5.2MB。差距接近 5 倍。而这两张图放在 27 寸显示器上,得放大到 200% 才能勉强看出差别,在手机上基本没有区别。

更麻烦的是上传之后。我自己的观察是(这条属于经验推测,不是定论):平台大多是按固定的目标码率去压的,你喂进去的文件越大,它要压掉的倍数就越多,压缩痕迹反而越明显。我朋友那批图就是典型,质量 12 导出的那版上传后出现了明显的块状伪影,我让他改成质量 82 重新导,同样的图,上传后反而干净了。

这里还有一个很少人提的参数:色度抽样。4:2:0 会把颜色信息砍掉一半,图里如果有红色小字、细线条、彩色边框,边缘就会出现糊边。做详情页、做带文字的封面,建议保留 4:4:4;纯风景、纯产品图,4:2:0 就够了,还能省 15%~25% 的体积。

三、锐化要放在缩小之后,而且只做一次

图片

这是另一个高频错误。

PS 里改尺寸的时候,重采样选「两次立方(较锐利)」是省事,但它对缩图来说太生硬。我的做法是:先用「两次立方(较平滑)」缩到目标尺寸,再单独加一次 USM 锐化,数量 60~80,半径 0.5~0.8,阈值 2~3。或者用「智能锐化」,半径 0.8,减少杂色 10%。

千万别在一张已经缩小的图上反复锐化第二次。你会在物体的高光边缘看到一圈白边,那个白边在手机上看特别假。我早期做详情页的时候犯过这个错,改了三版图才反应过来是锐化叠加的问题。

四、批量处理,别用 PS 动作,用命令行

朋友那 200 多张图,用 PS 的动作播放,他那台 2019 年的 MacBook Air 跑到一半就风扇狂转,二十多分钟才处理完,中间还卡死过一次。

后来我改用 ImageMagick,同样一批图,两分半跑完。命令贴在这:

图片

magick mogrify -path ./out \
  -resize 1200x1200^ \
  -gravity center \
  -extent 1200x1200 \
  -colorspace sRGB \
  -strip \
  -sampling-factor 4:2:0 \
  -interlace Plane \
  -quality 82 \
  *.jpg

逐个说:-resize 1200x1200^ 里的 ^ 是「填满」,保证短边不小于 1200;-extent 再裁成正方形,配合 -gravity center 是以中心裁。-colorspace sRGB 是把它强制转到 sRGB,这一步救过我好几次。-interlace Plane 是渐进式 JPEG,上传后加载时先出模糊再变清晰,观感好一点。

转 WebP 用 cwebp:

cwebp -q 80 -m 6 -mt input.jpg -o output.webp

-m 6 是压缩算法强度,0 到 6,越慢越小,6 大概比默认多花 3 到 5 倍时间,但体积能再降 8% 左右。-mt 开多线程。

五、格式怎么选,给几个实测数字

图片

同一张 1200×1200 的产品图,我导过几版:

  • JPEG,质量 82,4:2:0 → 约 130KB
  • WebP,质量 80 → 约 85KB
  • AVIF,质量 60 → 约 55KB

AVIF 体积最漂亮,但它编码慢,而且在 Safari 16 之前和一部分老安卓上不认。做电商图我一般还是 JPEG 打底,网站正文里再上 WebP。

PNG 的话,说一个反直觉的:截图带大片纯色文字,存 PNG-8(256 色)往往比 PNG-24 小一大截,肉眼几乎没差;但如果是天空、肤色、光影渐变,PNG-8 必出色带,一条一条的特别明显。这个我踩过,客户一眼就看出来了。

六、几个零碎的坑

Adobe RGB 不转 sRGB。 很多相机默认拍 Adobe RGB,PS 里不转换直接导出,图片在浏览器里会发灰发暗。导出时记得勾「转换为 sRGB」。

-strip 的副作用。 它能删掉 EXIF 和 ICC 配置文件,一张图能省几十 KB。但如果你的图有版权信息、拍摄参数(图库投稿要用),会一起被删掉。而且 ICC 被删在某些情况下也会让颜色跑偏,这个要自己权衡。

图片

屏幕缩放骗了你。 Windows 系统缩放 125% 的时候看图片会发虚,不代表文件真的糊。判断清晰度请把系统缩放调到 100% 再看。

别信「发原图」。 微信勾了原图是传得清楚,但对方一张一张点开加载,流量也是真的费。给客户的图,压到 1080 长边、质量 80,就够了。

最后说个观点

图片加工这件事,我觉得大部分人把力气用错地方了。花两小时调色调、磨皮、加光效,最后导出参数随手一填,链路一断,前面全白干。

真正决定一张图在别人手机里长什么样的,不是你在 PS 里调了多少个曲线图层,而是它从你的硬盘到对方屏幕之间,被压了几次、每次压到多少。

先算链路,再修图。

标签: