图片加工为什么发出去就变糊?聊聊压缩、缩放、锐化这条被忽略的链路

关键词:图片加工,图片压缩,色彩管理,sRGB,锐化

摘要:从一张淘宝主图变灰的真实案例出发,拆解图片加工中被大多数人忽略的四个损耗环节:压缩、缩放、锐化、色彩,并给出可落地的处理数字和步骤。

上个月帮一个做女装的朋友看店铺主图。她跟我说,同一张照片在自己电脑上看是奶白色,传上去就变成灰扑扑的水泥白。她换了三个修图软件,重装了两次系统,最后开始怀疑显示器坏了。

图片

我让她把原图发我,打开一看,文件里嵌的是 Display P3 的配置。她用的是 MacBook,屏幕本身就是广色域,修图时看到的是超出 sRGB 的那部分红和绿;而淘宝的商品图在绝大多数手机上按 sRGB 渲染,多出来的色域被硬压回去,整张图就偏灰发闷。

她不是审美出问题,是链路没管住。

后来我把自己的流程整个翻了一遍,得出一个挺反直觉的结论:图片加工里最贵的成本,从来不是你调了多少层曲线、套了几个预设,而是那些你没留意的「转手次数」。一张图从相机出来到用户手机上看到,中间可能被压缩、缩放、锐化、转码了七八次。这些损耗不是相加的,是相乘的——每个环节扣 5%,八个环节下来只剩六成多。

压缩:JPEG 是有记忆的

图片

JPEG 的有损压缩,很多人理解成「存一次掉一点画质」,其实更准确的说法是:每存一次,就重新做一遍 DCT 变换和量化,上一次留下的块状伪影会被下一次当成真实的图像内容继续加工。行业里管这个叫代际损失(generational loss)。

我拿一件针织衫的特写做过对比。同一张原图,一次导出 q=92,和连续导出八次 q=92,都在 PS 里放大到 200%。前者还能看出来毛线的分股走向,后者已经糊成一片均匀的灰噪点,衣服边缘开始出现 8×8 的方块——那就是 JPEG 的宏块尺寸。

所以修图阶段的工程文件我一律存 PSD,绝不用 JPEG 当中间格式,JPEG 只在最后交付那一次出现。顺带说个很多人不知道的:Photoshop「存储为」里那个 0-12 的质量滑块,跟 libjpeg 的 q 值不是一套坐标系,PS 的 12 差不多相当于别家的 92 以上,压出来的文件还特别肥。日常交付我给到 10 就收手,肉眼基本看不出差别,体积能小三分之一。

缩放这事,多数人方向搞反了

PS 的「图像大小」里有个重新采样下拉框,双三次、双三次更平滑、双三次更锐利、邻近……很多人选了「两次立方(较锐利)」就以为万事大吉,其实缩放真正的坑在次数,不在算法。

图片

我见过一个详情页美工的操作:先把 6000px 的原图缩到 2000px 存了一版,过两天老板说要加长图,又缩到 1200px,再后来换了个平台要 800px。三次缩放,每次都重新采样一遍,高频细节被反复重采样,相当于拿橡皮擦在同一个地方蹭了三遍。

正确做法是从最大的原图一步缩到目标尺寸。如果确实需要多个版本的尺寸,就每次都从原始大图出发,而不是拿上一版成品接着缩。算法上缩小我一般用 Lanczos,ImageMagick 和大部分服务端图像库的默认高质量选项就是它,PS 里对应「两次立方(较锐利)」。放大反过来,用「两次立方(较平滑)」,别用锐利那个,否则会在插值出来的像素上再叠一层假边缘。

锐化叠加,白边就是这么来的

锐化的本质是拉大边缘两侧的对比度,做过头就是在亮暗交界处拉出一条白线和一条黑线。这个道理大家都懂,但很多人不知道的是,平台还会帮你再补一刀。

图片

你交付的图如果已经锐化到临界,微信、小红书、电商平台在转码的时候通常还会再走一次轻量锐化。两道锐化叠在一起,人像的头发边缘会发光,截图里的文字会起毛刺。我现在的做法是成品图不预先锐化,或者只做很轻的一层——USM 半径 0.5 到 0.8、数量 60% 左右、阈值 2 以上,这样只作用于细节纹理,不至于动到平滑区域。

如果是给平台供稿,我干脆留出余量,锐化量减半。宁可软一点,也不要硬过头,软了还能救,硬了救不回来。

sRGB 是保底选项,不是最佳选项

这一段可能有点反常识。很多人被教导「网络图片一律用 sRGB」,这话对,但不完整。真正的操作是两步:先把工作色彩空间转换到 sRGB,再勾选「嵌入颜色配置文件」,而不是直接把 ICC 删掉。

图片

删掉配置文件的图,浏览器会按 sRGB 去猜,多数情况没大问题;但一旦遇到广色域显示设备或者开了色彩管理的软件,同一张图在不同地方看就是两个颜色。而转换到 sRGB 再嵌入,等于你替所有设备做了一个统一的决定,结果可控。

我在 PS 里的路径是:编辑 → 转换为配置文件 → 目标空间 sRGB IEC61966-2.1 → 渲染意图选「可感知」。导出时确认「嵌入颜色配置文件」是勾上的。就这两下,我朋友那张水泥白的主图问题直接解决了,她当场在微信里发了三个感叹号。

平台要求的几个数字

亚马逊主图长边要 1600px 以上才会触发放大镜功能,1000px 只是及格线,这条明文写在卖家后台的图片要求里。淘宝主图建议 800×800 正方形,实际展示区域随客户端变化,但别低于 800。微信公众号正文里的图片会被二次压缩,上传前最好自己先压到长边 1080 左右,别指望它帮你优化。

再补一句关于体积:详情页那种一屏十几张图的情况,单张控制在 200KB 上下比较舒服。我前两天偷懒,直接存了一张 q=100 的图,12MB,塞进详情页之后我自己打开都转圈,那一刻才想起来「优化不是给别人做的」。

图片

WebP 和 AVIF 现在兼容性已经不错了,同样观感下体积大概能比 JPEG 小一半。但导出前记得确认目标平台支不支持,有些老系统的编辑器上传 WebP 会直接报错,别问我怎么知道的。

我现在的流程

修图用 PSD,交付前从原图一步缩到目标尺寸,压缩只做最后一次,锐化留余量,导出时转 sRGB 并嵌入配置文件。整套下来多做不了五分钟,但图在各种设备上翻车的概率低了很多。

最后说个我的判断:图片加工这行,软件和插件早就过剩了,真正拉开差距的是你对「链路」有没有敬畏心。把它当成一笔预算来管,每一次转手都在花钱,你就知道哪一步该省、哪一步不能省。

标签: