上周又碰到一个熟悉的场景:同事把抠好的产品图存成了 JPG,发过来让我"换个蓝底"。我打开一看,人像边缘已经是白的了。透明通道早在那次保存里就丢了,换不了底,只能重抠一遍。

格式选错,后果往往不是"画质差一点"这么轻。有的是传不上去(体积超了),有的是用不了(透明没了),还有的是传上去才发现(对方打不开)。

这篇就用实测数据说清楚:同一张图存成 JPEG、PNG、WEBP,到底差在哪。

体积差了十倍

我用同一个转换工具、同样画质 90 跑了两组,一组是不透明的照片,一组是抠好的透明图:

同一张图分别转为 JPEG、PNG、WEBP 后的文件体积对比:不透明照片 329/1879/185 KB,透明图 308/2194/250 KB
两组都是真实转换结果。注意 PNG 那条几乎顶满,它把照片原样存下来,一点没舍得删。

先看三个数字。

  • WEBP 最小:185 KB,只有 JPEG 的 56%、PNG 的 10%。
  • PNG 最大:1879 KB,几乎等于原图,因为它无损,一个像素都不肯丢。
  • JPEG 居中:329 KB,是"够用"的默认选项。

PNG 为什么这么大

很多人看到 PNG 这么大就觉得"PNG 不好"。其实不是它的问题,它只是把功夫花在了别处。

格式压缩方式支持透明适合什么
JPEG有损(丢细节换体积)不支持照片、商品图、需要小体积的场合
PNG无损(一个像素不丢)支持截图、图表、logo、需要反复编辑的图
WEBP有损 / 无损都支持支持网页配图、既要小又要透明的场合

PNG 大,是因为它老实。它不做有损压缩,所以你存进去什么样,拿出来还是什么样。这个特性在两种场景下特别值钱:一是要反复修改的图(每次存 JPG 都会多损失一点),二是界面截图、图表这种"边缘必须干净"的图。

照片不需要这种老实,本来就细节丰富,丢一点看不出来,所以 JPEG 和 WEBP 更划算。

真正会踩的坑是透明通道

前面那个同事踩的就是这个。同一张抠好的透明图,存成两种格式的结果:

同一张透明背景人像:存成 JPEG 后透明区变成纯白,存成 WEBP 保留透明通道、垫绿色能透出来
右边我特意垫了绿色,能透出绿,说明透明通道还在。左边那张的白底已经"焊死"了。

两张的体积只差 59 KB,但性质完全变了:一个还能继续换底色,一个已经废了。想再换底,只能重新抠一遍。

JPEG 压根没有透明这个概念,你保存的时候,那些透明像素只能被填成某个颜色(通常是白)。填进去就是实色像素了,和"原本就是白背景"没有区别,怎么改都改不回来。

所以有条铁律,抠完的图永远别存 JPEG。要小体积就存 WEBP,要最大兼容就存 PNG。

WEBP 这么好,为什么不是默认?

兼容性。WEBP 是 2010 年才有的格式,现在主流浏览器、微信、手机相册都支持了,但还有几个地方会翻车:

  • 老的 Windows 系统(Win7 及更早)默认打不开,要装插件
  • 部分老版本办公软件、打印店的电脑可能读不了
  • 一些网站的上传接口只认 JPG / PNG,遇到 WEBP 直接拒

所以我的实际用法是分场合:自己网站、公众号、发给同事看,用 WEBP;发给客户、上传到不确定的系统、要打印,就老老实实 JPEG 或 PNG。

多花的那些体积,买的是"对方一定能打开"。

按用途选格式

你的情况存什么理由
手机拍的照片、要发朋友圈JPEG体积小、哪儿都能开
网页配图、自己站点WEBP同样清晰度下体积最小
抠好的透明图PNG 或 WEBP绝对不能用 JPEG
界面截图、数据图表、logoPNG纯色和文字多,无损更干净
要打印JPEG(高质量)或 PNG别用 WEBP,打印店的电脑未必认
不确定对方用什么JPEG兼容性最好,代价是体积

两个小提醒

一个是别反复转码。JPEG 是有损的,每存一次都会再丢一点细节。一张图在 JPG 和 PNG 之间来回转、反复保存,画质是累加的下降,转三次和转一次,肉眼能看出区别。要改就改原图,或者一开始就存 PNG。

另一个是格式转换救不了画质。把一张糊图从 PNG 转成 WEBP,它还是糊的。格式只决定"怎么存",不决定"里面有多少信息"。这一点和前面讲改尺寸是同一个道理:信息一旦丢了,换个容器装不回来。

在哪转

网页版的格式转换支持 JPG / PNG / WEBP 互转,手机上用「亦诺图档工具」小程序里的"格式转换"。

亦诺图档工具微信小程序码,扫一扫即可打开
微信扫一扫打开,首页按类别找"格式转换"。

顺带一提:如果你的图是从 iPhone 导出的 HEIC 格式(很多电脑打不开),用转换工具转成 JPG 就行,体积通常还会小不少。