上周三晚上十一点,开烘焙工作室的朋友甩过来一个压缩包,137张蛋糕图,让我"压到200KB以内,还要清楚"。我当时回了句"你这是要马儿跑又要马儿不吃草",结果花了两个晚上,还真做出来了。过程比结果有意思,记一下。
先声明,我不是什么专业后期,就是给自己公众号和朋友店铺修图修了七八年,PS的液化工具至今用不顺手的那种。所以下面全是土办法,不是教科书,有错你骂我。
先搞清楚图最后活在哪,比调参数重要一百倍
很多人拿到图第一反应是打开PS拉曲线,这个顺序是反的。你得先问:这图最后给谁看?
淘宝主图现在800×800起步,但实际做1200×1200更好,因为详情页放大后不糊;单张文件别超3MB,jpg和png都支持。详情页宽750px(部分类目790),你要是把图切成好几段拼起来,总高度建议压在1500以内,不然加载慢得让人想关页面。
微信朋友圈是另一码事。你传4000px的图上去,它自己会压,长边大概压到1080左右,而且算法挺粗暴。所以你要发朋友圈,自己先压到1080长边反而是画质最好的做法——听着反直觉,但你让微信压,不如自己压。
小红书封面3:4,1080×1440;公众号头图900×383;抖音封面1080×1920。这几个数记住了,比记什么色调曲线都管用。
我见过最多的情况是:一张图到处发,然后抱怨"怎么这么糊"。不是图的问题,是你拿一张1200的图去填1080的框,还被平台二次压缩了两遍。
JPEG的质量参数,我一张张测过来了
这137张图我按不同质量各导了一遍,取平均值,大概是这样(原图平均2.8MB,4032×3024,iPhone拍的):
| 质量 | 平均体积 | 肉眼观感 | | 100 | 2.8MB | 跟原图没差,体积却翻了三倍 | | 90 | 940KB | 看不出 | | 85 | 480KB | 看不出 | | 82 | 310KB | 认真对比,天空渐变有轻微色带 | | 75 | 210KB | 暗部开始糊 | | 65 | 145KB | 文字边缘发毛,头发丝变块 | | 50 | 88KB | 能看,但绝对不敢说"清楚" |
我最后定在82,配4:2:0色度抽样,平均196KB。这里有个坑:4:2:0对红色表现很差。朋友有张红丝绒蛋糕,压完颜色发暗发脏,我还以为是显示器问题。红色和肤色多的图,建议改用4:4:4,体积多15%左右,但颜色不崩。
还有个参数叫--strip,一定要加。iPhone照片的EXIF里塞了缩略图、GPS、镜头信息,一张3.2MB的图,光EXIF有时候就占60到80KB。删掉不影响画质,纯赚。
ImageMagick 7以后命令是magick不是convert了,别用错:
magick in.jpg -strip -resize "1600x1600>" -colorspace sRGB -sampling-factor 4:2:0 -interlace Plane -quality 82 out.jpg
那个大于号是"只缩不放",别漏了,不然小图会被硬拉大,糊得亲妈不认。
格式这事,别听营销号吹AVIF
WebP现在兼容性基本没问题,Chrome、Safari 14以后、微信内置浏览器都认。同画质下比JPEG小25%到35%,我这137张平均小了31%。代价是编码慢点,批量转137张大概40秒,能忍。
AVIF更小,同画质比WebP还能再小20%左右,但编码巨慢——同样137张我跑了六分半,而且iOS 16之前不认,一些老安卓也打不开。自己网站用可以,发给客户慎用。
JPEG XL我个人最喜欢,可惜Chrome 2022年底把支持砍了,浏览器端基本没戏,别指望了。
HEIC就别提了,苹果自娱自乐的东西,发到安卓经常打不开,做电商的栽在这上面的一大把。iPhone用户记得去「设置 → 相机 → 格式」里选"兼容性最佳",拍出来直接是JPEG。
PNG的话,纯色图或者带透明通道的用pngquant:
pngquant --quality=65-85 --speed 1 --strip --force --ext .png *.png
256色对大多数UI图和图标够用,体积能砍掉六成以上。但照片别用PNG,那是跟自己过不去。
处理顺序才是真正的分水岭
这一步我吃过大亏。很多人是先压缩,发现糊了,再锐化补救——救不回来的。锐化只是把糊掉的细节描个边,看着更假。
我现在的顺序是:降噪 → 调色 → 缩放尺寸 → 锐化 → 压缩。
锐化必须在缩放之后,因为缩放会吃掉锐度;但锐化又得放在压缩之前,因为压缩会削弱它。所以锐化量只能给"半量"——我一般半径0.6、强度55%左右,宁可不够,别过头。
还有个特别容易被忽略的点:色彩空间。AdobeRGB的图直接压JPEG扔网页上,颜色会发灰发暗,因为浏览器默认按sRGB解释。压之前一定转sRGB。ImageMagick加-colorspace sRGB,PS里用"转换为配置文件"而不是"指定配置文件"——两个选项就差一个字,坑了无数人。
最后说个可能得罪人的观点
很多人追求"无损压缩",我觉得这是伪命题。手机屏幕就那么大,正常观看距离下人眼能分辨的细节是有上限的。一张4000px的图压到1600px再压到200KB,你在手机上放大看,和原图的差距远小于你眨一次眼带来的差距。
朋友那个店,之前商品图平均2.8MB,用户得等,她转化率一直上不去。压到200KB以后,页面加载从4秒多降到1.2秒,那个月订单涨了大概两成多。你说这全是图片处理的功劳?肯定不全是,但图片就是那个卡脖子的地方。
所以我的观点很简单:图片处理不是在跟像素较劲,是在跟"用户愿意等多久"较劲。你服务的不是那张图,是那个蹲在地铁里用4G刷手机的人。想明白这个,参数怎么调,你自己就有答案了。
速查,直接抄
- 淘宝主图:1200×1200,JPEG质量82,4:4:4,小于500KB
- 详情页:宽750,分段,总高小于1500
- 朋友圈:长边1080,JPEG质量85
- 小红书:1080×1440,JPEG质量82
- 公众号头图:900×383,JPEG质量80
- 网站配图:WebP质量78,尺寸按容器最大宽度的2倍出
- 所有场景通用:先转sRGB,去EXIF,缩放后再锐化,最后压缩