← 文章 / 编程开发
Hacker News 1小时前 · 2026-10-17 03:51:20 · 7 阅读

Web 场景下 JPEG XL 与 AVIF 图像格式深度对比

JPEG XL 现已获得所有主流浏览器的支持,因此我想借此机会深入对比一下它与其他格式相比的优势和不足。

结论

下文将结合示例和基准测试展开详细分析。对于时间紧迫的读者,以下是核心要点:

在网络端处理有损照片时,AVIF 生成的文件体积几乎总是小于 JPEG XL。 在默认编码力度下,表现最佳的 JPEG XL 版本通常比同等质量的 AVIF 文件大 15%–25%;而在最高编码力度下,这一差距略有缩小,通常在 6%–20% 之间。虽然存在 JPEG XL 接近甚至优于 AVIF 的例外情况,因此若追求单张图片的极致效果,值得两种格式都试试。可参见 F1 赛车图片作为典型示例,鼬鼠图片则代表例外情况。

JPEG XL 的编码器选择影响巨大。 作为较新的编码器,jixel 通常能生成比 libjxl 更小的文件,除非图片包含复杂的透明区域。人物图片就是一个例子。

处理截图和插图时,AVIF 远胜 JPEG XL。 在默认编码力度下,同等质量的 JPEG XL 文件体积大 30%–90%;在最高编码力度下,大 20%–70%。有损 AVIF 能很好地处理这类内容,除非确需逐位还原,否则无需使用无损格式。参见 截图和 插图示例。

对于带透明通道的图片,AVIF 也远优于 JPEG XL。 在默认编码力度下,libjxl 版本的体积大 31%–44%;在最高编码力度下,大 61%–70%。jixel 总是对透明区域进行无损编码,导致其文件大小通常是 AVIF 的 2–3 倍。查看数据。

综合考虑文件大小,AVIF 通常编码速度更快且内存占用更少。 虽然 jixel 的编码速度比 AVIF 快、内存占用也更低,但由于其生成的文件通常大得多,因此总体来看 AVIF 更具优势。参见 F1 赛车图片作为示例。

AVIF 解码速度更快。在中质量档位下,JPEG XL 的解码耗时通常是 AVIF 的 2–3 倍,但在极高画质档位下,两者的差距会缩小,Chrome 有时甚至能更快地解码 JPEG XL。人物图像就是一个例子。

提高 AVIF 和 jixel 的努力参数(effort)值得投入,但 libjxl 不行。libjxl 的高努力档位速度大幅降低,内存占用剧增,但画质提升微乎其微。有时甚至会出现文件比默认档位更大的情况。截图就是一个典型案例。

AVIF 的 4:2:0 模式(半色彩分辨率)不应作为默认设置。它极少能减小文件体积,反而让达到高画质变得更困难。尽管编码和解码速度确实更快,但如果没有时间逐一测试 4:2:0 和 4:4:4,建议直接保留 4:4:4。F1 图像是一个例子,而截图属于例外。

所有编码器的质量参数都可靠。在单一质量参数下,不同图像的实际画质会有所差异,但所有编码器的变化方向一致,且表现符合逻辑。查看数据。

在高档位下,渐进式 JPEG XL 几乎没有代价。jixel 最近支持了早期渐进预览,在其最慢档位下,该功能几乎不增加文件大小;但在默认档位下,文件会大 12%。Firefox 和 Chrome 均支持渐进式 JPEG XL。Safari 仍能渲染最终图像,但不支持渐进预览。然而,这种渐进渲染的用户体验是否理想?查看示例和数据。

AVIF 也支持渐进渲染!目前仅 Chrome 支持,但 Firefox 也在推进中。它比渐进式 JPEG XL 更复杂,但能让你更精确地控制预览效果,文件通常更小,解码速度也更快。亲自体验。

在 HDR 方面,JPEG XL 缺少 gain map 支持,这是相比 AVIF 的一个明显短板。JPEG XL 格式本身支持 gain map,但浏览器解码器并不支持,编码环节也很混乱、仍处于实验阶段。在对比不带 gain map 的 HDR 内容时,我使用的两个质量指标分歧很大,但它们一致认为 JPEG XL 生成的文件比 AVIF 更小。查看示例。

JPEG XL 可以把现有 JPEG 再压缩 9–20%,且不产生额外损失。除小图外,解码速度也不慢于甚至快于 JPEG。查看数据。

无损压缩方面,JPEG XL 毫无悬念地胜出。对照片而言,无损 WebP 比 JPEG XL 大 9–17%,无损 AVIF 更是大 30–120%。不过网页上几乎不需要无损图片。如果你确实要在网页上用(比如我在本页就这样做了),要小心 jixel 的高 effort 档位——它生成的文件经常解码太慢。查看数据。

动图格式依然是个愚蠢的主意。请不要使用。实在想了解的话,看这里。

就网页场景而言,我目前会默认使用 AVIF 4:4:4,effort 档位拉到我能接受的上限。如果 AVIF 生成的文件异常偏大,我会用 jixel 试试 JPEG XL,看效果是否更好。

AVIF 和 JPEG XL(通过 jixel)最近都有大幅改进,所以这条建议将来可能变化。围绕这些东西存在大量错误信息,而你的 AI 会很乐意把这些错误信息原样转述给你。与其听信它们,不如用自己的图片亲自测试。

AVIF 阵营认为 JPEG XL 在技术上不如 AVIF。这或许没错,但本文关注的是现有实现所能达到的实际效果。

测试方法

我“创建”了一个基准测试脚本,用各种编码器和不同参数对图片进行编码,并记录各项数据。

我使用的是各图片编码器最新发布的版本,撰写本文时为:

  • avifenc 1.4.2
  • libjxl 0.12.0(使用其 cjxl 编码器)
  • jixel 0.4.2(Git f487299),另一种 JPEG XL 编码器
  • cwebp 1.6.0(本文后半部分将使用无损 WebP)

我挑选了一组图片,并将大部分编码为 1598 像素宽——这正好是本博客上图片最大显示宽度的 2 倍。这意味着它们在高密度屏幕上显示时非常清晰,而大多数用户都使用这类屏幕。因此,如果你正在小屏幕或低密度屏幕上查看本文,体验可能会打折扣。

我在自己的 2024 款 MacBook Pro(M4 Pro)上运行了这些基准测试。

有损压缩 - F1 赛车图片

等待无损SSIMULACRA2 目标值:70(高)5060708090格式AVIF41.4 kBSSIMULACRA2: 70.2JPEG XL (libjxl)58.4 kB (+41%)SSIMULACRA2: 70.0JPEG XL (jixel)46.6 kB (+12%)SSIMULACRA2: 70.0

在我首次撰文介绍 AVIF时,我使用了一张 F1 赛车的图片作为开篇,所以这次我打算故技重施!

我将图片以不同的编码质量进行压缩,并选择了最接近特定 SSIMULACRA2 分数的版本——这是由 JPEG XL 团队开发的一种感知图像质量指标。其中,50 分代表中等质量,70 分代表高质量,80 分代表极高画质,90 分则接近视觉无损。不过,我不确定这些评级是否考虑了高密度显示屏幕的因素。

在本文的后续部分,像上面那样的视觉对比均使用各编码器的最大努力模式,除非最大努力模式会导致文件体积增大(这种情况确实存在)。

对于档案存储,我倾向于使用近乎无损的质量;但如果只是在博客上展示说明性图片,性能对我来说更重要。我个人对上面 70 分的结果很满意。如果你放大查看,可以注意到质量损失;但如果我真的很在意放大查看时的细节,我会使用诸如 VisualViewport API 这类工具,在用户放大时加载更高分辨率的图片,而不是让所有人都承担更大的下载体积。

在较低质量下,能看出两种编解码器在策略上的差异。细节丢失程度大致相同,但与原图相比,AVIF 更倾向于平滑化处理,而 JPEG XL 则容易引入更粗糙的纹理。

另外,我感觉在中等质量(50)下,AVIF 和 libjxl 的观感优于 jixel。jixel 版本在 BWT 标志周围有大量可见噪点,前翼上的 Microsoft 文字也模糊得多。这让我对当前的评测指标产生了些许疑问。

总之,我对结果的解读如下:

  • 文件大小:AVIF 胜。 在默认编码力度下,同质量下最佳的 JPEG XL 图像比 AVIF 大 14–17%。在中等/高质量下,jixel 是更优的 JPEG XL 编码器;而在极高画质下,libjxl 略胜一筹。若使用最大编码力度,最佳 JPEG XL 图像(jixel 'extraslow')比 AVIF(s0)大 6–15%。
  • jixel 的最慢设置略胜 AVIF 的默认力度,文件小 1–10%。画质越高,优势越明显。
  • 编码时间:AVIF 胜。 在默认力度下,jixel 比 AVIF 快 12–36%,但文件大 14–18%。若要达到 AVIF 默认力度的文件大小,jixel 需使用 'extraslow' 设置,耗时是 AVIF 的 18–27 倍。libjxl 的默认力度耗时是 AVIF 的 1.5–2 倍,且生成的文件更大。
  • 编码内存:AVIF 胜。 在默认力度下,jixel 内存占用约为 AVIF 的一半,但文件依旧大 14–18%。若匹配 AVIF 默认力度的文件大小,jixel 'extraslow' 的内存占用约为 10 倍。libjxl 默认力度内存占用为 AVIF 的 2–3 倍,更高力度下则约 7 倍。
  • 解码时间:AVIF 胜。 中等质量下,JPEG XL 解码耗时是 AVIF 的 2–3 倍;在极高画质下,差距缩小至 ~1.5–1.8 倍。Safari 的 JPEG XL 解码器速度最慢。
  • AVIF 值得提高编码力度。 使用 AVIF 的 s5 设置,文件小约 10%,代价是编码时间约为原来的 3 倍。
  • jixel 也值得提高力度,最高至 'slow'。 相比默认的 'fast','slow' 能让文件小 9–13%,编码时间约为 3.7 倍。'extraslow' 还能再省 3–8% 的空间,但耗时是 'slow' 的 8 倍,内存占用 9 倍。即便这样,在同等编码时间下 AVIF 仍占优:AVIF s5 的耗时与 jixel 'slow' 相当,但文件小 ~13%。
  • 对 libjxl 来说,更高的编码力度不值得。libjxl 的最高力度相比默认设置几乎没有提升,但耗时却是后者的约 18 倍。
  • AVIF 的 4:2:0 模式帮助不大。编解码速度略快、内存占用更低,但文件体积并没有明显缩小,而且难以达到较高的画质水平。

完整数据如下,供你自行判断:

给我看图表!

图像质量

好,来看第一张图,SSIMULACRA2 得分:

ScaleLinearLog 文件大小20 kB40 kB60 kB80 kB100 kB120 kB140 kB160 kB45505560657075808590SSIMULACRA2(越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

这类图会很多,先解释一下怎么读:

  • 横轴是以 SSIMULACRA2 衡量的视觉质量。
  • 纵轴是文件大小。在相同视觉质量下,越低越好。
  • 橙色线代表用 libjxl 编码的 JPEG XL。
  • 绿色线代表用 jixel 编码的 JPEG XL。
  • 蓝色线代表 AVIF。
  • 蓝色虚线代表色彩数据减半分辨率的 AVIF。即所谓的 4:2:0,也叫色度子采样(chroma subsampling)。
  • 颜色越深的线代表该编码器的力度越高。libjxl 把这个参数叫 'effort',所以 e10 是最高力度。麻烦的是,avifenc 把它叫 'speed',所以 s0 才是最高力度。jixel 则直接给各档位命名,从 'fast'(默认)到 'extraslow'。
  • 默认只显示默认和最高两档力度。点击图例可以切换显示其他档位。

下面是用另一种质量指标 ColorVideoVDP 测得的结果:

ScaleLinearLog 文件大小20 kB40 kB60 kB80 kB100 kB120 kB140 kB160 kB9.409.509.609.709.809.9010.00ColorVideoVDP, JOD(10 = 无可见差异)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

结果大体一致,只是该指标进一步拉大了 AVIF 与 JPEG XL 图像之间的差距。

它也表明,在低质量档位下,AVIF 采用 4:2:0 色度采样有一定优势,但差距很小。

编码性能

对于博客里的图片,我会采用最高努力度参数来编码。愿意多等几秒钟,换取每位用户更快的加载速度。但如果你要在服务端进行大量编码,编码耗时就变得更为重要。

ScaleLinearLog编码耗时0 ms500 ms1 s1.5 s2 s2.5 s3 s3.5 s45505560657075808590SSIMULACRA2(数值越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

编码内存占用

如果你在服务器上编码图片,还可能需要关注峰值内存占用:

ScaleLinearLog编码器峰值内存0 MB100 MB200 MB300 MB400 MB500 MB600 MB700 MB800 MB900 MB1000 MB45505560657075808590SSIMULACRA2(数值越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

解码性能

解码性能同样值得关注。如果解码速度较慢,会削弱文件体积优势带来的收益,尤其是当图片从缓存加载时。

浏览器FirefoxChromeSafari比例LinearLog解码时间4 ms6 ms8 ms10 ms12 ms14 ms16 ms18 ms20 ms22 ms45505560657075808590SSIMULACRA2(越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

在极高的质量设置下,JPEG XL 的解码速度会突然加快(但仍比 AVIF 慢)。我推测这是因为一个边缘保留滤波器在较低质量设置下需要执行更多的运算。

有损 - 人像

我听人说过,AVIF 倾向于平滑细节,因此不太适合人脸图像,所以我选了一张来自 Unsplash的照片。

Hold for losslessSSIMULACRA2 目标:70(高)5060708090格式AVIF63.8 kBSSIMULACRA2: 70.7JPEG XL (libjxl)95.5 kB (+50%)SSIMULACRA2: 70.1JPEG XL (jixel)70.9 kB (+11%)SSIMULACRA2: 70.1

该图像的基准测试结果如下:

  • 文件大小:AVIF 胜出。在默认质量下,同等画质中最佳的 JPEG XL 图像比 AVIF 图像大 17–24%。本次测试中,jixel 在整个质量范围内都是更好的 JPEG XL 编码器。libjxl 比 AVIF 大 30–50%,这与 F1 图像测试的差距相比要大得多。在最高质量下,最佳的 JPEG XL 图像(jixel "extraslow")比 AVIF(s0)大 12–17%。
  • 本次测试中,jixel 的最慢设置未能完全匹敌 AVIF 的默认质量。在中等/较高画质下,jixel 的文件稍大几个百分点,仅在极高画质下才略微胜出。
  • 编码时间:AVIF 胜出。在默认质量下,jixel 比 AVIF 快 18–33%,但其文件却大 17–24%。即使采用耗时长达 AVIF 25–39 倍的 jixel "extraslow" 设置,也只有在极高画质下才能达到 AVIF 的默认文件大小。libjxl 的默认设置耗时是 AVIF 默认设置的 1.5–2.2 倍,生成的文件依然更大。
  • 编码内存:AVIF 胜出。在默认档位下,jixel 的内存占用约为 AVIF 的一半,但它的文件体积要大 17–24%。jixel 的 'extraslow' 档位最接近 AVIF 默认的文件大小,但内存占用约为 10 倍。libjxl 默认档位的内存占用是 AVIF 的 2–3.3 倍,更高档位则约为 7 倍。
  • 解码时间:AVIF 胜出。中等质量下,JPEG XL 的解码耗时是 AVIF 的 2–2.9 倍,在极高质量下缩小到约 1.3–1.7 倍。在质量区间的最高端,libjxl 图片在 Chrome 中的解码速度与 AVIF 相当,但在其他浏览器中则不然。
  • 对 AVIF 来说,提高编码档位是值得的。AVIF 的 s5 档位能换来 5–8% 的体积缩减,代价是约 3 倍的编码时间。不过这个收益比 F1 那张图要小。
  • 对 jixel 来说,提高到 'slow' 也值得。'slow' 比默认的 'fast' 小 7–14%,编码时间约为 3.9 倍。'extraslow' 还能再省 4–6%,但耗时约为 'slow' 的 10 倍,内存占用约为 9 倍。在相同编码时间下,AVIF 依然占优:AVIF s5 的耗时与 jixel 'slow' 差不多,但文件小 8–17%。
  • 在这张图上,libjxl 提高档位有一定收益。与 F1 那张图不同,libjxl 的最高档位比默认档位小 4–11%。但耗时约 10 倍,而且结果仍然远大于 AVIF 默认档位的输出。
  • AVIF 的 4:2:0 模式帮助不大。与 F1 图相同:ColorVideoVDP 显示它有小幅(约 4%)优势,但 SSIMULACRA2 显示不出优势。

在较低质量下,可以看到面部出现涂抹感,不过 AVIF 和 JPEG XL 都有同样的问题。

直接看图表!

图像质量

ScaleLinearLogFile size20 kB40 kB60 kB80 kB100 kB120 kB140 kB160 kB180 kB200 kB220 kB4045505560657075808590SSIMULACRA2 (数值越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow
ScaleLinearLogFile 大小20 kB40 kB60 kB80 kB100 kB120 kB140 kB160 kB180 kB200 kB220 kB9.459.509.559.609.659.709.759.809.859.909.9510.00ColorVideoVDP, JOD (10 = 无可见差异)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

编码性能

ScaleLinearLog编码时间0 ms500 ms1 s1.5 s2 s2.5 s3 s3.5 s4 s4045505560657075808590SSIMULACRA2 (数值越高,越接近原始图像)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

编码内存占用

ScaleLinearLog编码器峰值内存0 MB100 MB200 MB300 MB400 MB500 MB600 MB700 MB800 MB900 MB1000 MB1100 MB4045505560657075808590SSIMULACRA2 (数值越高,越接近原始图像)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

解码性能

BrowserFirefoxChromeSafariScaleLinearLog解码时间4 ms6 ms8 ms10 ms12 ms14 ms16 ms18 ms20 ms4045505560657075808590SSIMULACRA2 (数值越高,越接近原始图像)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

值得注意的是,在低画质档位下,jixel 在 Safari 中的解码速度显著慢于其他浏览器。

有损压缩 - 小熊猫

Hold for losslessSSIMULACRA2 目标值:70(高)5060708090格式AVIF99.6 kBSSIMULACRA2: 70.3JPEG XL (libjxl)121.5 kB (+22%)SSIMULACRA2: 70.0JPEG XL (jixel)101.7 kB (+2%)SSIMULACRA2: 71.4

之所以加入这张图,是因为它是 Squoosh 的默认示例。不过我觉得发丝那些锐利的线条让这张图与前面几张不太一样。实际上,即使在中等质量下,与原图的差异相比其他图片也明显更小,肉眼几乎难以察觉。

与前两张相比,这次的结果要接近得多:

  • 文件大小:AVIF 险胜。 在默认编码强度下,同等质量时,最优的 JPEG XL 图像(jixel)仅比 AVIF 大 2–6%。libjxl 表现较差,文件大了 10–18%。若采用最大编码强度,jixel 的 'extraslow' 与 AVIF 的 s0 基本打平,且在极高画质下 jixel 甚至比 AVIF 小最多 5%。但 ColorVideoVDP 的评估结果不同,认为在最大强度下 AVIF 文件大小占优 5–12%。
  • 编码时间:根据 SSIMULACRA2 指标,JPEG XL(jixel)胜出。 在默认强度下,jixel 比 AVIF 快 19–35%,且文件仅大 2–6%。对比更高强度时,jixel 的 'slow' 模式生成的文件体积与 AVIF s5 相同或略小,耗时相同或更短。jixel 的 'extraslow' 则匹敌或优于 AVIF s0,且速度快 12–34%。不过,鉴于 ColorVideoVDP 认为 AVIF 在文件大小上更有优势,结论并非绝对。libjxl 默认模式的耗时是 AVIF 默认模式的 1.3–1.9 倍,且生成的文件更大。
  • 编码内存:在较低强度下,JPEG XL(jixel)胜出。 在默认强度下,jixel 的内存占用比 AVIF 低 37–48%,文件仅大 2–6%。jixel 的 'slow' 模式内存占用与 AVIF s5 相当,可生成体积相似的文件;而 'extraslow' 模式的内存占用约为 AVIF s0 的 9 倍。libjxl 默认模式的内存占用约为 AVIF 的 2 倍,其高强度模式则需 6–7 倍。
  • 解码时间:AVIF 胜出。 在中等质量下,JPEG XL 的解码耗时是 AVIF 的 2–2.4 倍。但在极高画质下差距缩小,此时 jixel 的文件在 Firefox 和 Safari 中的解码速度与 AVIF 大致相当,在 Chrome 中甚至快约 25%。
  • 对于这张图,AVIF 增加编码强度的收益较小。 AVIF 的 s5 强度虽然能让文件小 3–6%,但编码耗时却增加了 3–4 倍。
  • 对 jixel 来说,提高 effort 是值得的,最高到 'slow'。相比默认的 'fast','slow' 能让文件再小 6–14%,但编码时间要 3.5–4.3 倍。'extraslow' 还能再省 2–9%,不过耗时是 'slow' 的 9–14 倍,内存占用约 9 倍。
  • 对 libjxl 来说,提高 effort 不划算。libjxl 的最高档位只比默认档小 1–2%,耗时却是约 12 倍。
  • AVIF 的 4:2:0 模式没什么用。文件大小和 4:4:4 一样。
让我看看图表!

图像质量

ScaleLinearLogFile size0 kB50 kB100 kB150 kB200 kB250 kB300 kB350 kB400 kB450 kB4045505560657075808590SSIMULACRA2(数值越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow
ScaleLinearLogFile size0 kB50 kB100 kB150 kB200 kB250 kB300 kB350 kB400 kB450 kB9.309.409.509.609.709.809.9010.00ColorVideoVDP, JOD(10 = 无可见差异)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

编码性能

ScaleLinearLogEncode time0 ms1 s2 s3 s4 s5 s6 s4045505560657075808590SSIMULACRA2(数值越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

编码内存占用

ScaleLinearLogPeak encoder memory0 MB200 MB400 MB600 MB800 MB1000 MB1200 MB1400 MB4045505560657075808590SSIMULACRA2(数值越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

解码性能

浏览器 Firefox Chrome Safari Scale 线性 对数 解码时间 6 ms 8 ms 10 ms 12 ms 14 ms 16 ms 18 ms 40 45 50 55 60 65 70 75 80 85 90 SSIMULACRA2(数值越接近原始图像越好)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

有损压缩 - 异常案例

针对无损保持SSIMULACRA2 目标值:60 50 60 70 80 90 格式 AVIF 223.0 kB (+30%) SSIMULACRA2: 60.1 JPEG XL (libjxl) 213.0 kB (+24%) SSIMULACRA2: 60.1 JPEG XL (jixel) 172.0 kB SSIMULACRA2: 60.3

我大量测试了这两种编解码器,对于照片而言,前面展示的结果具有代表性,AVIF 在表现上优于 JPEG XL。但偶尔会出现例外,比如这张图。

  • 文件大小:JPEG XL 胜。在默认质量等级下,同等画质下,最优的 JPEG XL 文件比 AVIF 小 4–11%。在中高画质下,libjxl 是更优的 JPEG XL 编码器;而在极高画质下,jixel 表现更好。在最高质量等级下,jixel 'extraslow' 比 AVIF s0 小 12–27%。这次 ColorVideoVDP 的结论也一致。
  • jixel 的 'medium' 设置在这张图上进步显著。它的文件比 AVIF 默认设置小 11–25%,比 AVIF s0(最高质量等级)小 4–18%。
  • 编码速度:JPEG XL (jixel) 胜。在默认质量等级下,jixel 比 AVIF 快 28–38%,且生成的文件体积相同或更小。在更高质量等级下,优势更大:jixel 'medium' 比 AVIF s5 快 37–65%,文件小 9–23%。libjxl 默认设置比 AVIF 默认设置慢 1.5–2.2 倍。
  • 编码内存:JPEG XL (jixel) 占优。在默认档位下,jixel 比 AVIF 少用 14%–24% 的内存,且生成的文件体积大致相当或更小。AVIF s0 的内存占用更高(约为其默认档位的 1.55 倍),但仍生成比 jixel "medium" 更大的文件——后者比 AVIF s0 少用 41%–55% 的内存。libjxl 默认档位的内存用量是 AVIF 的 2.4–3.6 倍,而两种 JPEG XL 编码器的最高档位则高达 10–18 倍。
  • 解码速度:AVIF 占优,Chrome 中高质量场景除外。在 Firefox 和 Safari 中,JPEG XL 的解码耗时是 AVIF 的 1.3–1.9 倍。在 Chrome 中,中等质量下 JPEG XL 比 AVIF 慢约 1.25 倍,但从高质量档开始,JPEG XL 反而比 AVIF 快 11%–36%。
  • 与前述图片不同,jixel 图片在 Safari 中的解码速度并不慢。事实上,其解码速度甚至略快于 libjxl 图片。
  • 对这张图片而言,提高 AVIF 的编码档位收益有限。AVIF s5 仅能减少 1%–3% 的文件体积,却要付出 3–4.5 倍编码时间的代价。s0 可减少 7%–8% 的体积,但耗时约为默认的 50 倍。
  • 提高 jixel 的编码档位直到 "slow" 是有价值的。"medium" 相比默认档 "fast",可减少 6%–14% 的体积,代价是 1.9–4.1 倍编码时间。"slow" 相比 "fast" 可减少 9%–19% 的体积,代价是 3.9–6.5 倍编码时间。"extraslow" 在此之上再省 5%–9%,但比 "slow" 耗时增加 8–18 倍,内存占用也增至约 11 倍。
  • 提高 libjxl 的编码档位不值得。libjxl 最高档位相比默认仅减少 1%–6% 的体积,却要付出 11–14 倍编码时间的代价。
  • AVIF 的 4:2:0 模式没有帮助。文件体积与 4:4:4 完全相同。
  • 三种编码器在此图上生成的 SSIMULACRA2 分数都偏低。即在同等编码器质量参数下,得分更低。看来编码器在平滑背景噪声方面做得比较充分,这通常可以接受。
图表在这里!

图像质量

ScaleLinearLogFile size0 kB100 kB200 kB300 kB400 kB500 kB600 kB700 kB800 kB900 kB4045505560657075808590SSIMULACRA2 (higher is closer to the original)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow
ScaleLinearLogFile size0 kB100 kB200 kB300 kB400 kB500 kB600 kB700 kB800 kB900 kB9.309.409.509.609.709.809.9010.00ColorVideoVDP,JOD(10 = 无可见差异)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

编码性能

ScaleLinearLogEncode time0 ms1 s2 s3 s4 s5 s6 s7 s8 s9 s4045505560657075808590SSIMULACRA2(数值越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

编码内存占用

ScaleLinearLogPeak encoder memory0 MB200 MB400 MB600 MB800 MB1000 MB1200 MB1400 MB1600 MB1800 MB2000 MB2200 MB4045505560657075808590SSIMULACRA2(数值越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

解码性能

BrowserFirefoxChromeSafariScaleLinearLogDecode time10 ms12 ms14 ms16 ms18 ms20 ms22 ms24 ms26 ms28 ms30 ms32 ms4045505560657075808590SSIMULACRA2(数值越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow

有损压缩 - 截图

好,我们试试其他类型的内容:

Hold for losslessSSIMULACRA2 target: 80 (very high)4560708090FormatAVIF20.7 kBSSIMULACRA2: 80.4JPEG XL (libjxl)34.1 kB (+65%)SSIMULACRA2: 80.2JPEG XL (jixel)25.4 kB (+23%)SSIMULACRA2: 80.1

基准测试结果如下:

  • 文件大小:AVIF 胜,且优势明显。 在默认参数下,质量设为中等/高时,表现最好的 JPEG XL 图像(jixel)比 AVIF 大 73–89%;质量设为极高时,最好的 JPEG XL 图像(libjxl)比 AVIF 大 29–44%。在最高参数下,表现最好的 JPEG XL 图像(启用 patches 的 jixel 'extraslow')比 AVIF(s0)大 23–73%。
  • libjxl 在默认参数下,无法生成 SSIMULACRA2 介于 ~45 到 ~78 之间的图像(高参数下则是 ~45 到 ~75 之间)。jixel 不存在这个问题。
  • jixel 的 patches 功能对这张图像帮助很大,但默认是关闭的。启用 patches 后,在较高参数下(SSIMULACRA2 ~65 及以上),jixel 的文件比默认设置小 10–29%。在 jixel 默认的 'fast' 设置下,patches 不起作用。
  • 编码时间:AVIF 胜。 在默认参数下,jixel 比 AVIF 快 ~50%,但文件大了 70–98%。libjxl 默认参数下耗时是 AVIF 的 1.7–1.8 倍,生成的文件仍然大得多。
  • 编码内存:AVIF 胜。 在默认参数下,jixel 内存占用比 AVIF 少 ~40%,但文件更大。libjxl 默认参数下内存占用是 AVIF 的 1.2–2.2 倍。启用 patches 的 jixel 'extraslow' 文件大小最接近 AVIF,但内存占用是 AVIF 默认的 ~7.5 倍。
  • 解码时间:AVIF 胜,且优势明显。 取两个 JPEG XL 编码器中较快的那个的输出,JPEG XL 的解码时间是它的 2–3.8 倍,取决于浏览器和质量。
  • 对这张图像,AVIF 提高参数更划算。 AVIF 的 s5 比默认参数小 6–13%,但编码时间延长 2.5–3 倍;s0 比默认参数小 16–23%,但编码时间延长 30–45 倍。
  • 只要启用 patches,提高 jixel 参数就划算。 启用 patches 的 'medium' 比默认 'fast' 小 11–44%,但编码时间延长 3–4 倍。启用 patches 的 'slow' 比 'medium' 再小 7–16%,但编码时间约为 'medium' 的 1.7 倍。启用 patches 的 'extraslow' 再小几个百分点,但编码时间是 'slow' 的 ~5 倍,内存占用是 ~4.5 倍。
  • 对 libjxl 而言,过高的压缩努力度反而有害。 在极高画质下,libjxl 最大努力度生成的文件体积比默认努力度大 33–40%,且耗时约为后者的 7 倍。
  • AVIF 的 4:2:0 模式在较高画质下更有优势。 当 SSIMULACRA2 值达到 70 及以上时,生成的文件比 4:4:4 模式小 7–18%。但在较低画质下,两者没有区别。
  • 对于这张图,三种编码器都产生了更高的 SSIMULACRA2 分数。 这与之前狐狸图的情况相反。但这看起来是合理的。在 SSIMULACRA2 值为 70 时,Firefox logo 周围的伪影相当明显(至少在我看来如此),所以我会选择 80,这也正是这些编码器默认偏好的数值。

部分开发者,尤其是像我这样资历较深的,似乎认为截图必须以无损格式交付。但我觉得这是因为他们习惯了 JPEG 和 WebP(似乎还有 JPEG XL)这类对这种图像处理效果较差的格式,而有损 AVIF 处理它们的效果非常好。

让我看看图表!

图像质量

ScaleLinearLogFile size0 kB10 kB20 kB30 kB40 kB50 kB60 kB70 kB2030405060708090SSIMULACRA2 (higher is closer to the original)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow
  • jixel fast + patches
  • jixel medium + patches
  • jixel slow + patches
  • jixel extraslow + patches

我没有包含 ColorVideoVDP 图表,因为该指标不支持 Alpha 通道。

编码性能

ScaleLinearLogEncode time0 ms500 ms1 s1.5 s2 s2.5 s3 s3.5 s4 s4.5 s5 s2030405060708090SSIMULACRA2 (higher is closer to the original)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • j
  • jixel extraslow + 补丁

编码内存占用

ScaleLinearLogPeak encoder memory0 MB100 MB200 MB300 MB400 MB500 MB600 MB700 MB800 MB2030405060708090SSIMULACRA2(数值越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow
  • jixel fast + 补丁
  • jixel medium + 补丁
  • jixel slow + 补丁
  • jixel extraslow + 补丁

解码性能

BrowserFirefoxChromeSafariScaleLinearLogDecode time4 ms6 ms8 ms10 ms12 ms14 ms16 ms18 ms20 ms22 ms2030405060708090SSIMULACRA2(数值越高越接近原图)
  • AVIF s0
  • AVIF s2
  • AVIF s4
  • AVIF s5
  • AVIF s6
  • AVIF s0 4:2:0
  • AVIF s2 4:2:0
  • AVIF s4 4:2:0
  • AVIF s5 4:2:0
  • AVIF s6 4:2:0
  • libjxl e7
  • libjxl e8
  • libjxl e9
  • libjxl e10
  • jixel fast
  • jixel medium
  • jixel slow
  • jixel extraslow
  • jixel fast + 补丁
  • jixel medium + 补丁
  • jixel slow + 补丁
  • jixel extraslow + 补丁

JPEG XL 这里的解码时间偏长,很可能是因为它在同等质量下生成的文件大得多,带来的副作用。

有损压缩 - 插画类图像

Hold for losslessSSIMULACRA2 target: 80(非常高)5060708090FormatAVIF68.5 kBSSIMULACRA2: 80.2JPEG XL (libjxl)139.8 kB(+104%)SSIMULACRA2: 80.0JPEG XL (jixel)110.4 kB(+61%)SSIMULACRA2: 81.0

对于大面积纯色的图像,通常用 SVG 就够了。但有时行不通(比如截图),或者不合适,就像本例这种情况。这张图同样来自 Unsplash,即便压缩并精简后,SVG 版本仍有 1.1 MB,原因在于阴影区域的复杂度太高。因此,在文件体积和解码/绘制时间上,光栅格式反而更胜一筹。

在上文的演示中,当质量设为 50 时,jixel 出现了严重的色块,例如在猫的脸上尤为明显。这又一次让我对评估指标产生了怀疑。

基准测试结果如下:

  • 文件大小:AVIF 获胜,且优势巨大。在默认压缩等级下,最佳 JPEG XL 图像(jixel)比 SSIMULACRA2 80 以内的 AVIF 图像大 32% 至 65%,超过 80 后则大 90% 左右。在最高压缩等级下,最佳 JPEG XL 图像(jixel "extraslow")比 AVIF(s0)在 SSIMULACRA2 80 以内大 22% 至 55%,超过 80 后差距更大。ColorVideoVDP 也得出了相同结论,认为差距在 27% 至 58% 之间。
  • libjxl 处理这张图像时表现极差。在默认压缩等级下,其体积比 AVIF 大 71% 至 106%。
  • 有损 AVIF 无法让这张图像达到 SSIMULACRA2 90。即便在最高质量设置下,其得分也仅停留在 87 左右,因此上文 90 分的对比并不完全公平。JPEG XL 可以达到 90,但文件比 JPEG XL 无损版本大 8% 至 50%,既然如此,直接使用无损模式反而更划算。
  • 编码时间:AVIF 获胜。在默认压缩等级下,jixel 比 AVIF 快 35% 至 44%,但文件体积却大 32% 至 65%,这是一笔糟糕的买卖。jixel 必须使用 "slow" 设置,才能使文件大小接近 AVIF 默认值(仅大 7% 至 27%),但这需要耗费 AVIF 2.4 至 2.6 倍的编码时间。libjxl 的默认设置耗时是 AVIF 的 1.3 至 2.3 倍,且生成的文件大得多。
  • 编码内存:AVIF 获胜。在默认压缩等级下,jixel 比 AVIF 少用约 37% 的内存,但文件体积依然大得多。jixel "slow" 使用的内存与 AVIF 相近,而 "extraslow" 则约为 AVIF 的 12 倍。libjxl 的默认设置使用的内存是 AVIF 的 1.5 至 3 倍。
  • 解码时间:AVIF 获胜,且优势巨大。在中高画质下,JPEG XL 的解码耗时是 AVIF 的 2 至 4.6 倍;在极高画质下,这一差距缩小至 1.6 至 2.1 倍。
  • 对于这张图像,提高 AVIF 的压缩等级更有价值。AVIF 的 s5 等级能使文件小 5% 至 8%,但编码耗时增加至约 2.7 倍;s0 等级能使文件小 14% 至 21%,但编码耗时增加至 35 至 48 倍。
  • jixel 提高压缩等级是值得的,直到 "slow"。"medium" 等级相比默认的 "fast" 仅能缩小 4% 至 13% 的文件体积,而 "slow" 等级能缩小 19% 至 24%(极高画质下可达 36%),编码耗时约为 4 倍。"extraslow" 仅再节省 2% 至 3% 的体积,但耗时比 "slow" 长 8 至 9 倍,且内存占用约为 11 倍。
  • jixel 的 patches 功能对该图像没有帮助。与截图不同,启用该功能前后文件大小完全一致,但会增加编码时间和内存占用。
  • 对 libjxl 而言,提升 effort 性价比不高。libjxl 的最大 effort 相比默认设置,文件仅能缩小 3–9%,但耗时会增加 10–13 倍。
  • AVIF 的 4:2:0 模式效果不佳。SSIMULACRA2 评分略低于 4:4:4,而 ColorVideoVDP 评分略高(约 3–4%)。
  • 来看看图表!

    图像质量

    ScaleLinearLogFile size0 kB50 kB100 kB150 kB200 kB250 kB300 kB350 kB400 kB30405060708090SSIMULACRA2(数值越高,越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow
    • jixel fast + patches
    • jixel medium + patches
    • jixel slow + patches
    • jixel extraslow + patches
    ScaleLinearLogFile size0 kB50 kB100 kB150 kB200 kB250 kB300 kB350 kB400 kB9.29.39.49.59.69.79.89.910.0ColorVideoVDP, JOD(10 = 无可见差异)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow
    • jixel fast + patches
    • jixel medium + patches
    • jixel slow + patches
    • jixel extraslow + patches

    编码性能

    ScaleLinearLogEncode time0 ms1 s2 s3 s4 s5 s6 s7 s8 s30405060708090SSIMULACRA2(数值越高,越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow
    • jixel fast + patches
    • jixel medium + patches
    • jixel slow
    • jixel extraslow + 补丁

    编码内存占用

    ScaleLinearLogPeak encoder memory0 MB200 MB400 MB600 MB800 MB1000 MB1200 MB1400 MB1600 MB1800 MB2000 MB2200 MB30405060708090SSIMULACRA2(数值越高越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow
    • jixel fast + 补丁
    • jixel medium + 补丁
    • jixel slow + 补丁
    • jixel extraslow + 补丁

    解码性能

    BrowserFirefoxChromeSafariScaleLinearLogDecode time5 ms10 ms15 ms20 ms25 ms30 ms35 ms40 ms30405060708090SSIMULACRA2(数值越高越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow
    • jixel fast + 补丁
    • jixel medium + 补丁
    • jixel slow + 补丁
    • jixel extraslow + 补丁

    有损压缩 - Alpha 通道

    前面测试的图片基本都是不透明的,那么带透明通道的图片表现如何呢?

    Hold for losslessSSIMULACRA2 目标:70(高)5060708090FormatAVIF50.4 kBSSIMULACRA2: 71.4JPEG XL (libjxl)78.6 kB (+56%)SSIMULACRA2: 70.2JPEG XL (jixel)119.1 kB (+136%)SSIMULACRA2: 70.3

    这一组测试有几个不同之处:

    • jixel 的 alpha 通道始终是无损编码,没有单独的 alpha 质量设置,这让它在处理这张图片时处于明显劣势。AVIF 默认对 alpha 通道做有损压缩,并跟随主质量设置;libjxl 默认也是无损压缩 alpha 通道,这点需要注意。在本次测试中,我把 libjxl 的 alpha 质量设成了与主质量相同的值。
    • SSIMULACRA2 将全透明像素评定为完美,因此当图像包含大量透明区域时,其得分会高于不透明图像的情况。

    基准测试的结果如下:

    • 文件大小:AVIF 大幅胜出。 在默认编码强度下,表现最佳的 JPEG XL 图像(libjxl)比同等质量下的 AVIF 文件大 31%–44%;而在最高强度下,体积差距扩大到 61%–70%。由于采用无损 Alpha 通道,jixel 在默认强度下的文件大小是 AVIF 的 1.9 到 3.1 倍。
    • 编码时间:AVIF 胜出。 libjxl 的默认设置耗时约为 AVIF 默认设置的 1.2 到 1.35 倍,且生成的文件要大得多。jixel 的默认设置比 AVIF 快约 2 倍,但其文件体积通常是 AVIF 的 2 到 3 倍。
    • 编码内存:AVIF 胜出。 libjxl 默认设置的内存占用是 AVIF 默认设置的 2.4 到 2.7 倍(绝对值约为 120 MB 对比 46 MB)。jixel 默认设置的内存占用与 AVIF 相当,但同样存在文件体积显著更大的问题。
    • 解码时间:AVIF 胜出。 在中等画质下,libjxl 输出的解码时间是 AVIF 的 2 到 3 倍;在极高画质下,这一差距缩小至 1.4 到 1.8 倍。jixel 的解码速度比 libjxl 快,在极高画质下与 AVIF 速度相当。不过,在 Safari 中处理较低画质时,jixel 速度较慢,耗时约为 AVIF 的 2.4 倍。
    • 提高 AVIF 的编码强度是值得的。 将 AVIF 强度提升至 s5,文件大小可减少 4%–7%,但编码时间增加 2.3 到 2.9 倍;若提升至 s0,文件可再缩小 10%–15%,但编码时间需增加 24 到 29 倍。
    • 提高 jixel 的编码强度对该图像帮助甚微。 相比默认的 'fast' 模式,使用 'extraslow' 模式仅能使文件小 5%–8%,却需要耗费 21 到 26 倍的编码时间。
    • 提高 libjxl 的编码强度反而有害。 libjxl 的最高强度设置生成的文件甚至比默认强度大 8%,且耗时约为默认强度的 6.5 倍。
    • AVIF 的 4:2:0 模式效果不佳。 该模式生成的文件比 4:4:4 模式大 4%–27%,且 SSIMULACRA2 得分无法超过 79 左右。
    请看图表!

    图像质量

    ScaleLinearLogFile size20 kB40 kB60 kB80 kB100 kB120 kB140 kB160 kB180 kB30405060708090SSIMULACRA2 (越高越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow

    编码性能

    ScaleLinearLog编码时间0 ms500 ms1 s1.5 s2 s2.5 s3 s30405060708090SSIMULACRA2(数值越高,还原度越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow

    编码内存占用

    ScaleLinearLog编码器峰值内存0 MB50 MB100 MB150 MB200 MB250 MB300 MB350 MB400 MB450 MB30405060708090SSIMULACRA2(数值越高,还原度越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow

    解码性能

    BrowserFirefoxChromeSafariScaleLinearLog解码时间3 ms4 ms5 ms6 ms7 ms8 ms9 ms10 ms11 ms12 ms13 ms14 ms30405060708090SSIMULACRA2(数值越高,还原度越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow

    有损压缩 - 小尺寸

    此前测试的图片分辨率相近。如果使用更小的图片,结果会有不同吗?

    Hold for losslessSSIMULACRA2 目标值:70(高)5060708090FormatAVIF8.3 kBSSIMULACRA2: 70.4JPEG XL (libjxl)10.7 kB (+29%)SSIMULACRA2: 70.2JPEG XL (jixel)9.5 kB (+14%)SSIMULACRA2: 70.1

    差别不大。结果与全尺寸 F1 图片的测试非常接近:

    • 文件体积:AVIF 胜出,差距与前面差不多。默认参数下,最佳 JPEG XL 图片要大 13–18%;最高强度下差距略高于全尺寸图片的结果,为 12–20%。
    • 编码时间与内存:AVIF 胜出,不过 libjxl 的默认速度现在已和 AVIF 默认速度相近。jixel 的默认模式比 AVIF 快约 2 倍,但文件大 13–18%,而且这次内存占用还多出约 30%。不管怎样,默认参数下所有编码都在 50ms 内、40 MB 内存内完成,所以在这个尺寸下这些差异其实无关紧要。
    • 解码时间:AVIF 胜出,差距也差不多,但同样,所有格式都在几毫秒内完成解码。
    给我看图表!

    图像质量

    ScaleLinearLogFile size4 kB6 kB8 kB10 kB12 kB14 kB16 kB18 kB20 kB22 kB354045505560657075808590SSIMULACRA2(越高越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow
    ScaleLinearLogFile size4 kB6 kB8 kB10 kB12 kB14 kB16 kB18 kB20 kB22 kB9.109.209.309.409.509.609.709.809.9010.00ColorVideoVDP, JOD(10 = 无可见差异)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow

    编码性能

    ScaleLinearLogEncode time0 ms200 ms400 ms600 ms800 ms1 s1.2 s354045505560657075808590SSIMULACRA2(越高越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow

    编码内存占用

    ScaleLinearLogPeak 编码器内存10 MB20 MB30 MB40 MB50 MB60 MB70 MB80 MB90 MB100 MB110 MB354045505560657075808590SSIMULACRA2(越高越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow

    解码性能

    浏览器FirefoxChromeSafariScaleLinearLog解码时间0.5 ms1 ms1.5 ms2 ms2.5 ms3 ms3.5 ms4 ms4.5 ms354045505560657075808590SSIMULACRA2(越高越接近原图)
    • AVIF s0
    • AVIF s2
    • AVIF s4
    • AVIF s5
    • AVIF s6
    • AVIF s0 4:2:0
    • AVIF s2 4:2:0
    • AVIF s4 4:2:0
    • AVIF s5 4:2:0
    • AVIF s6 4:2:0
    • libjxl e7
    • libjxl e8
    • libjxl e9
    • libjxl e10
    • jixel fast
    • jixel medium
    • jixel slow
    • jixel extraslow

    Safari 返回的数值经过舍入处理,因此数据噪声很大。

    有损压缩 - 大图

    那 1800 万像素的图片表现如何?

    Hold for originalSSIMULACRA2 目标:70(高)5060708090格式AVIF146.7 kBSSIMULACRA2: 70.4JPEG XL (libjxl)257.8 kB (+76%)SSIMULACRA2: 70.0JPEG XL (jixel)184.7 kB (+26%)SSIMULACRA2: 70.1

    大部分情况与常规 F1 图片相似,但也有一些不同:

    • 文件大小:在中等/高质量下,AVIF 的优势比常规图片更明显。 默认压缩级别下,最好的 JPEG XL 图片比 AVIF 大 18–46%;最高压缩级别下,则大 28–54%。
    • 但在极高画质下,JPEG XL 能追上来。 在 SSIMULACRA2 85 附近,libjxl 默认设置与 AVIF 默认设置表现相当;最高压缩级别下,jixel 'extraslow' 比 AVIF s0 小约 6%。当 SSIMULACRA2 达到 80 以上时,jixel 'slow' 比 AVIF 默认设置小 10–13%。
    • 编码耗时:中高品质下 AVIF 占优,极高品质下 JPEG XL(jixel)胜出。 AVIF 的默认设置耗时约 0.5 秒,libjxl 的默认设置则需 1–2 秒。jixel 的默认速度比 AVIF 快约 2 倍,但在中高品质下文件体积会大 29%–57%;在极高品质下这一差距缩小至 6%–12%,考虑到速度提升,这是合理的取舍。此外,jixel 的“slow” 模式生成的文件大小与 AVIF 的 s5 模式相近,但速度快 33%–41%。
    原始来源: Hacker News

    评论 (0)