核心结论：AVIF 仍是 Web 有损图像的首选
随着 JPEG XL 在所有主流浏览器中落地，其与 AVIF 的对比成为焦点。基于详细基准测试，对于 Web 应用场景，AVIF 在绝大多数情况下表现更优。
有损照片：AVIF 文件更小。在默认效率设置下，最佳 JPEG XL 文件通常比等效 AVIF 大 15%–25%；即使在最大效率设置下，差距仍维持在 6%–20%。尽管存在个别例外（如特定纹理图像），但 AVIF 整体优势明显。
截图与插图：AVIF 压倒性胜利。对于此类非照片图像，AVIF 表现远优于 JPEG XL。默认效率下，等效 JPEG XL 文件大 30%–90%。有损 AVIF 能很好地处理这类图像，无需使用无损格式。
透明图像：AVIF 显著领先。由于 jixel 编码器对透明度进行无损编码，其文件大小是 AVIF 的 2–3 倍。即便使用 libjxl，其文件也比 AVIF 大 31%–70%。
性能表现：AVIF 编解码更高效。综合考虑，AVIF 编码速度更快、内存占用更少。解码方面，JPEG XL 在中高画质下的解码时间通常是 AVIF 的 2–3 倍，仅在极高画质下差距缩小。
编码器选择与配置建议
编码器差异至关重要。jixel（新型 JPEG XL 编码器）通常比 libjxl 生成更小的文件，除非图像包含细节丰富的透明度。对于 libjxl，提高“效率”设置往往得不偿失：耗时剧增、内存占用飙升，但文件大小改善微乎其微，甚至可能变大。
AVIF 配置策略。提高 AVIF 的效率设置（如 s5 或 s0）通常值得，能以增加编码时间为代价换取更小的文件。此外，AVIF 的 4:2:0 色度子采样模式不应作为默认设置，它很少能减小文件大小，且难以保证高画质，建议坚持使用 4:4:4。
进阶特性对比
渐进式渲染。AVIF 支持渐进式渲染（目前仅限 Chrome，Firefox 开发中），虽实现复杂，但允许开发者控制预览外观，且解码速度快。JPEG XL 的渐进式实现几乎无额外成本，但其“由模糊变清晰”的体验可能误导用户，且 Safari 仅渲染最终图像。
HDR 内容。AVIF 支持增益映射（Gain Maps），能在 SDR 和 HDR 设备上提供一致且优化的显示效果。JPEG XL 格式虽支持增益映射，但浏览器解码器尚未支持，且编码工具链尚处实验阶段，这是其在 HDR 领域的重大局限。
JPEG 无损转码。JPEG XL 可将现有 JPEG 文件无损缩小 9%–20%，且解码速度与 JPEG 相当或更快。这是 JPEG XL 的一个独特优势，适合存量 JPEG 资源的优化。
无损压缩。在无损领域，JPEG XL 是明确赢家。无损 WebP 比 JPEG XL 大 9%–17%，无损 AVIF 大 30%–120%。但需注意，Web 上极少需要无损图像，若必须使用，应避免 jixel 的高效率设置，因其可能导致解码过慢。
测试方法论简述
本次测试基于最新版本的图像编解码器（avifenc 1.4.2, libjxl 0.12.0, jixel 0.4.2），在 2024 MacBook Pro (M4 Pro) 上进行。测试图像涵盖照片、人像、截图、插图、透明图像及 HDR 内容，分辨率调整为 1598 像素宽以适配高密度显示器。质量评估采用 SSIMULACRA2 和 ColorVideoVDP 指标。
综上，当前 Web 开发的默认推荐策略是：首选 AVIF 4:4:4，并采用可容忍的最高效率级别。仅在 AVIF 生成异常大文件或需无损压缩/JPEG 转码时，再考虑 JPEG XL（特别是通过 jixel 编码器）。随着技术迭代，这一建议可能会发生变化，建议开发者针对实际业务图像进行独立测试。