绿色植物带水珠的花苞特写

结论先行

Web 工程师 Jake Archibald 在 2026 年 10 月做了一轮图像编码对比，起因是 JPEG XL 终于在所有主流浏览器里可用。他写了一个基准脚本，在 M4 Pro 的 MacBook 上跑 avifenc 1.4.2、libjxl 0.12.0、jixel 0.4.2 和 cwebp 1.6.0，把常见图片压到 1598 像素宽（博客上图片显示宽度的 2 倍，适配高分屏）。

他的建议一句话：Web 上默认用 AVIF 4:4:4，用你能忍受的最高压缩档；如果某张图 AVIF 出来体积异常大，再拿 JPEG XL（走 jixel 编码器）试一次。想看原始数据和对比图可以去看原文，结论的细节都在下面。

有损照片：AVIF 更小，但差得不多

对网页上的有损照片，AVIF 几乎总是比 JPEG XL 小。在默认档位下，最好的 JPEG XL 版本通常比同画质的 AVIF 大 15% 到 25%；开到最高档位，差距收窄到 6% 到 20%。也有例外，个别图 JPEG XL 能追平甚至反超，所以真的在意某张图的最优解，值得两个都跑一遍看结果，别凭传闻。

另一个发现是编码器比格式更影响结果：新款 JPEG XL 编码器 jixel 在中等和高质量段通常比官方的 libjxl 更小，只有带细节透明的图反过来。速度与内存上，AVIF 综合更划算：jixel 编码更快、内存更省，但文件大 14% 到 18%；要把体积压到 AVIF 默认档的水平，jixel 得开最慢档，耗时是 AVIF 的十几到二十几倍。解码速度也是 AVIF 快，中等画质下 JPEG XL 要慢两到三倍。

截图、插画、透明图：差距被拉开

这三类是差距最明显的地方。截图和插画用 AVIF 比 JPEG XL 好得多：默认档下 JPEG XL 大 30% 到 90%，最高档下也大 20% 到 70%；有损 AVIF 处理这类图已经足够好，除非要逐位一致，否则不必上无损格式。带透明通道的图同样是 AVIF 明显占优，libjxl 大 31% 到 44%，jixel 因为透明总是无损编码，体积是 AVIF 的两到三倍。

档位选择上有一条反直觉的提醒：libjxl 调高压缩档基本不值得——编码慢约 18 倍，画质和体积几乎没变，有时还更大；AVIF 调高档位则划算，约 3 倍编码时间换约 10% 的体积下降。他还建议别默认用 AVIF 的 4:2:0（色度半分辨率）：体积省得很少，反而更难达到高画质，时间紧张就统一用 4:4:4。

两个容易被忽略的能力

HDR 是 JPEG XL 目前明显的短板。格式本身支持 gain map（可以把同一张图同时喂给 SDR 与 HDR 屏幕），但浏览器解码器不支持，编码流程也还在实验阶段；AVIF 的 gain map 是现成可用的，在屏幕亮度打到极值、HDR 余量不够时，它比直接投 HDR 图更稳。作者认为多出来的体积是值得的。

反过来，JPEG XL 有一项对存量资产很有用的能力：它可以在不再损失画质的前提下，把现有 JPEG 重压小 9% 到 20%，解码速度持平或更快（小图除外）。无损场景 JPEG XL 也是明确的赢家——无损 WebP 大 9% 到 17%，无损 AVIF 大 30% 到 120%。但无损图在 Web 上几乎不是你想要的，除非确实要逐位还原。

对做企业数字化/小团队的实际启发

第一，给客户做网站时，图片格式别一次性写死。用 <picture> 同时提供 AVIF 和回退格式，浏览器自己挑，成本很低，收益是首屏更快。

第二，把压缩参数的默认值定成「AVIF 4:4:4 + 较高档位」，再对个别异常大的图单独试 JPEG XL。这条规矩比争论哪个格式更好用得多。

第三，如果客户手里有大量历史 JPEG 素材（产品图、老站图库），用 JPEG XL 做一次无损重压，体积凭空降一到两成，画质一点不变，这是性价比很高的一次性优化。作者最后那句提醒也适合转给客户：关于这块的信息误区很多，连 AI 都会一本正经地把错的告诉你，用自己的图实测一遍。