图片格式怎么选：JPEG XL、AVIF、WebP、HEIF 的科普与取舍

图床上的图我一直用 WebP，手机默认拍 HEIC，设计稿导出偶尔拿到 AVIF，这两年又多了个 JPEG XL。四个格式的底层编码完全不是一回事，压缩效率、浏览器支持和专利成本也不一样。

JPEG XL 是什么

JPEG XL 简称 JXL，是一个正经的国际标准，编号 ISO/IEC 18181，由 JPEG 组织主导。它不是什么公司的私有格式。

来路是几个方案合出来的。谷歌做过一个叫 PIK 的格式，目标是高画质加快速解码；另一支团队基于 FLIF 做了 FUIF。这两个方案 2018 年一起提交给 JPEG XL 的征集，后来合成现在这个格式，PIK 和 FUIF 本身都停了。

有损无损都能做，同一套编码器，想要小体积用有损，一点不丢用无损，不用在两个格式之间来回切。

无损转码这条我特别喜欢。JXL 是 JPEG 的超集，可以把现有的 JPEG 重新压一遍，体积小大概 20%，还是无损可逆的，能完整还原回原来的 JPEG。

渐进解码是先给一张低分辨率预览，再逐层细化；JPEG 是按扫描行从上往下刷，网速慢的时候只能看到半张图。HDR、动画、alpha 透明这些基本也都有。JPEG XL 官方文档说，同样画质下能比 JPEG 小 30% 到 50%。

支持情况这几年一直在变

JXL 的麻烦出在浏览器支持上，格式本身没多少争议。

2023 年 Chrome 110 把 JXL 移除了，当时的说法是使用量撑不起维护成本，社区挺不满。

后来事情又反转。今年 10 月 6 号 Chrome 官方发博客，宣布 Chrome 155 开始正式支持 JXL 解码。解码器换成了 Rust 写的 jxl-rs。145 到 154 那几版要开 flag，155 起默认开。

Firefox 从 158 开始支持，Safari 一直是部分支持，Edge 还没动。

两年前只有 Safari 能勉强打开，现在 Chrome 和 Firefox 都跟上了。

https://caniuse.com/jpegxl

AVIF、WebP、HEIF 的来路

另外三个的共同点，都是从视频编码里借来的。

WebP 基于 VP8，2010 年就有了，是这四个里最早的。有损无损、动画、透明都支持，压缩比 JPEG 和 PNG 好。兼容性最好，老客户端也能直接解。

AVIF 基于 AV1，比 WebP 晚很多，压缩效率更好。浏览器支持已经铺开。这两年在网页上用得越来越多。

iPhone 默认就拍 HEIC，它的正式名字是 HEIF，基于 HEVC。压缩率不错。但网页上基本用不起来，HEVC 的专利授权复杂且贵，浏览器厂商不愿意承担。目前只有 Safari 17 以上支持，Chrome、Firefox、Edge 全都不支持。

一张表

表里的版本号是我写这篇时的状态。

怎么选

网页上的图片，我现在还是 WebP 为主。AVIF 压缩比 WebP 好一截，主流浏览器也基本都支持，是眼下性价比最高的选择。JXL 在 Safari 只是部分支持、Edge 还没动，做网页图不用急着上。

照片归档和长期保存，JXL 更合适。尤其无损转码那条：我电脑里存了一堆老 JPEG，用 JXL 重压一遍能省 20% 空间，还无损可逆，哪天想还原随时能还原。这种活儿 AVIF 干不了。

iPhone 默认就拍 HEIC，接着用最省事。麻烦在发给安卓或 Windows 的朋友，对方可能打不开，我需要发出去的时候会手动转成 JPEG。

要最大兼容性，就用 WebP。我手上那些老设备、还有几个不太守规矩的客户端，WebP 都能直接开。

我自己的做法是：本地照片库拿 JXL 转码省空间，手机拍的 HEIC 就留着，网页那边 WebP 先不动。