给博客放一张界面截图时，我希望它打开得快，也希望别人能看清里面的字。那如果一张图最多只留 100 KiB，WebP 和 AVIF 哪个更合适？我拿博客里的背景素材、首页截图和透明 Logo 跑了一次。结果里最有意思的是首页截图，两种格式都压到约 98 KiB，文件大小几乎一样，小字附近的像素误差却有明显差别。
先把体积和尺寸定住
背景素材和截图都等比缩到 1280 像素宽，缩放后的像素作为参考。对每个格式从高到低试一组质量参数，取第一个不超过 **100 KiB（102,400 字节）**的结果。WebP 和 AVIF 的质量参数不在同一把尺上，所以我给它们同一个文件大小上限，再看压完的图离参考图有多远。
| 博客素材 | WebP | AVIF |
|---|---|---|
| 背景素材，1280 × 717 | 90.4 KiB，33.98 dB | 96.9 KiB，37.04 dB |
| 首页截图，1280 × 756 | 98.2 KiB，37.81 dB | 97.2 KiB，43.07 dB |
表里用 PSNR 记像素误差。对同一张参考图，数值越高，解码后的 RGB 像素整体偏差越小。背景图里 WebP 比 AVIF 少用了约 6.5 KiB，比较时要把这点算进去。截图两版才差不到 1.1 KiB，更接近同体积比较。
把注意力放到真正要读的那行字
我从三版里裁了同一块。自上而下是缩放后的参考图、WebP、AVIF。对照图用 PNG 保存，裁图后没有再做有损压缩。
在这个尺寸下，两版正文都能读。放大看标题上方的浅灰日期和正文笔画时，可以留意文字旁边本来平滑的浅色背景。只对这块区域重算，WebP 是 38.59 dB，AVIF 是 42.07 dB。这张图如果要在教程里保留图内小字，我会先试 AVIF。更实用的一步是截小一点，把需要读的操作面板单独放大，别把整页一起挤进一张图。
透明 Logo 可以先试一次无损
最后测一张 512 × 512 的透明 Logo。同尺寸重新编码，PNG 是 265.4 KiB，无损 WebP 是 187.7 KiB，文件缩小约 29%。我解码比较了透明度和所有非全透明位置的颜色，结果一致。完全透明像素下的 RGB 有变化，所以如果图要留作设计源文件，我会把原 PNG 也留着。
三张素材给我留下一个很实际的工作顺序。先定图片在网页上要展示多宽，再试体积。背景图看整张的观感和体积，带字截图先看小字，透明 Logo 则先试无损。遇到平台只收某些格式，就在平台支持的范围内做同样的检查。常见网页图片格式
怎么复测
这次用 Sharp 0.32.6（libwebp 1.3.2、libaom 3.7.0）。参考图转成 sRGB，按 1280 像素宽等比缩放，小图不放大。有损档位从 100 到 5，每次降 5，WebP 和 AVIF 的 effort 都用 4，AVIF 用 chromaSubsampling: '4:4:4'。背景图取到的 WebP / AVIF 质量参数是 75 / 55，截图是 85 / 75。Logo 的 PNG 用压缩级别 9 和自适应滤镜，无损 WebP 用 lossless: true 和 effort: 4。文件大小以输出字节数计算，PSNR 用解码后的 RGB 样本计算。这次只测了博客里的三张素材和这些编码设置。Sharp 输出选项
如果只想先把过宽的素材批量改成实际要用的尺寸，我在 Maple 工具箱介绍页 留了入口。
