先进图片格式的渐进解码小测试

JPEG XL

Chrome 155 版本将此前实验性支持的 JPEG XL 转正了，基于 jxl-rs 实现，官方博客着重强调了渐进解码的特性。

经过实测，启用渐进解码特性后，相同视觉质量下文件体积会略微增大 2-3%。

下面这个 JPEG XL 文件体积 2.1 MB，经过测试，传输 1 MB 之后就能有不错的效果。

编码使用 libjxl，具体命令为：

cjxl input.png output.jxl -d 1.0 -p

其中 -p 启动了渐进解码，也有一些更高级的控制参数可用。

测试下来发现只有桌面版的 Chrome 能够渐进解码，有些则是完全解完了才会显示。

AVIF

AVIF 也支持渐进解码，原理大概是存几帧，可以利用帧间预测提高压缩率，随着文件下载逐渐获得更高分辨率和质量的帧，但没有 JPEG XL 那样连续的渐进，下面是一个包含两层的 AVIF。

使用 libavif 编码，用到的命令行是：

avifenc --progressive -q 80 -d 8 input.png output.avif

自动渐进采用了一个质量 10，1/2 分辨率的基层，基层只有 24 KB。

也可以更精细的控制每一层的分辨率和质量，比如：

f=input.png
avifenc --layered -d 10 -q 80 \
  --scaling-mode:u 1/8 $f \
  --scaling-mode:u 1/4 $f \
  --scaling-mode:u 1/2 $f \
  --scaling-mode:u 1/1 $f \
  output.avif

但是写法比较丑，对 AVIF 来说不是很有必要，有一个较小的预览帧就够了。

以后可能会采取带很小预览帧的 AVIF 来增强博客的阅读体验，对于访问 Cloudflare R2 存储较慢的读者们，首次“看到图片”的等待时间应该会大幅缩短了。

看看效果

如果想直观的看到效果，请右键单击图片，选择在新标签页中打开，然后在开发者工具里禁用缓存，并使用网速限制模拟，之后刷新，在 3G 预设下加载完整个文件大约需要 45 秒，可以有充足的时间体验渐进解码。

Enjoy