6 张真实照片,同一台机器,编码时间也一起量了

都说换 WebP 能省一半

这话我信了两年。

上周想把站里的配图换一遍,动手之前先量了一下。量完发现,同样写着 quality 82,WebP 比 JPEG 糊。PSNR 从 48.4 dB 掉到 42.0 dB。

糊了当然小。这不是省,这是降质换来的。

所以这篇文章只做一件事:把两种格式的画质拉到同一条线上,再比体积。

草地间一条小路通向远处的树林
草地间一条小路通向远处的树林

一、怎么比的

6 张真实照片,全部先裁成 1200×800。

Pillow 12.3.0,同一台机器,2 个逻辑核。JPEG 用 optimize + progressive,WebP 用 method=6,AVIF 用 speed=4。

画质用 PSNR 量,逐像素跟原图比。

第一轮照最常见的做法来:每种格式都用自己常用的质量数字。

格式 质量 6张合计 平均编码 平均 PSNR JPEG 82 701.5 KB 20.5 ms 平均 44.5 dB WebP 82 618.4 KB 279.3 ms 平均 40.7 dB AVIF 75 584.0 KB 2560.9 ms 平均 44.6 dB PNG 无损 5220.3 KB 303.3 ms 无损

WebP 是 JPEG 的 88.2%。看着确实省了 12%。

但它的平均 PSNR 低了 3.8 dB,单张最多差 6.7 dB。拿这么一组数去说服别人换格式,不老实。

PNG 那行不用看,它是无损的,体积是 JPEG 的 7.4 倍,正常网页不会用它存照片。

二、把画质对齐

做法很笨:对每张图,用二分法找 WebP 和 AVIF 的质量值,一直调到 PSNR 跟那张图的 JPEG 差不到 0.25 dB。

调 8 轮以内基本都能收敛。结果是:

照片 JPEG WebP(等画质) AVIF(等画质) 4.jpg 68.7KB 48.4dB q94 85.3KB 46.5dB q89 63.9KB 48.3dB 0.jpg 79.2KB 47.1dB q94 100.2KB 47.0dB q81 62.8KB 47.3dB 17.jpg 249.8KB 37.6dB q85 305.0KB 37.8dB q64 200.8KB 37.8dB 39.jpg 39.5KB 52.0dB q94 38.5KB 48.7dB q94 39.0KB 50.6dB 59.jpg 174.5KB 39.0dB q86 186.0KB 38.9dB q67 132.3KB 38.9dB 108.jpg 89.9KB 43.1dB q87 91.0KB 43.3dB q67 67.2KB 43.3dB

6 张合计:

JPEG 701.5 KB 100.0% WebP 805.9 KB 114.9% AVIF 565.9 KB 80.7%

WebP 大了 104 KB。

只有 39.jpg 那张 WebP 略小一点,38.5 对 39.5,差 1 KB,可以当打平。

三、它为什么会反过来

因为「quality 82」不是一个统一单位。

各家编码器的质量刻度是自己定的。同样叫 82,libwebp 丢掉的细节比 libjpeg 多。你以为在同一个水平线上比,其实一边已经先降了一档。

有两张要调到 q94 才追上 JPEG 的 q82,其余在 q85 到 q87 之间。中间差了 7 到 12 档。

这也是网上那些「WebP 省一半」的来源:多数测试是拿 WebP 默认质量去比 JPEG 默认质量,两边画质并不一样。省下来的一半里,有一部分就是画质。

四、AVIF 是真的省

同样的对齐条件下,AVIF 是 JPEG 的 80.7%,省 19.3%。

体积最吃紧的是 17.jpg 那张:JPEG 249.8 KB,AVIF 200.8 KB,省 49 KB。这张图草地和树林的细节多,正好是 JPEG 最难受的内容。

代价在时间上。

JPEG 20.5 ms/张 WebP 279.3 ms/张 AVIF 2560.9 ms/张

AVIF 比 JPEG 慢 125 倍。

一张 2.5 秒,一篇文章 3 张图就是 7.6 秒。批量处理 500 张是 21 分钟。

对每天都发稿的人,这个时间是要算进流程里的。对一年换一次配图的站,这点时间无所谓。

一台黑胶唱片机的特写局部
一台黑胶唱片机的特写局部

五、我这个站最后怎么选的

ayusite 现在所有配图都是 JPEG。这篇之前我也犹豫过要不要换。

量完的决定是:继续 JPEG,但把每张压到 200 KB 以内。

理由很土。这一页 3 张图,就是上面表里 17、39、108 这三张。按 q82 算是 379.2 KB,全换 AVIF 是 307.0 KB,省 72 KB。为这 72 KB 建一条 AVIF 转码流水线,还要给不支持的浏览器留回退方案,我觉得不值。

如果哪天图多到一页十几张,我会重新算一遍。数量上去之后,19% 才变成看得见的数。

沙滩上几棵高大的棕榈树
沙滩上几棵高大的棕榈树

我没验证的地方

观感没测。

PSNR 是逐像素平均误差,它不懂人眼。WebP 的误差分布跟 JPEG 不一样,相同 PSNR 下,有人觉得 WebP 更干净,也有人觉得 JPEG 的颗粒更自然。这一层我没做主观打分,也没找人盲测。所以上面那张表只能说明「数学上对齐了」,不能说明「看上去一样」。

样本只有 6 张,全是照片。

没有插画,没有截图,没有带文字的图。带字的图是另一种情况,JPEG 在文字边缘会糊,WebP 和 AVIF 谁更好我没测。

编码器参数会影响结论。

WebP 的 method、AVIF 的 speed,我都用了偏慢偏高质量的档位。换参数,体积会变。我只跑了这一套。

WebP 的无损模式没测。

这次比的是有损。WebP 还有无损模式,跟 PNG 比是另一个话题。

浏览器和 CDN 没测。

AVIF 的浏览器支持情况我这次没查。也没试过让 CDN 自动按 Accept 头转格式。那种方案不用你本地压,但结果是 CDN 决定的,不是你能控制的。


一句话

你说要换格式之前,先问一句:跟谁比,画质一样吗。

不一样的话,省下来的体积里有一部分是画质,不是带宽。

你转过 WebP 或 AVIF 吗?换完之后页面是真的快了,还是只有体积数字变小了?我想听真实的体感。