新型图片格式：JXL 和 AVIF
新一代图像格式，具有卓越的图形效果和更小的字节数。
计算机、摄影和图片
图像的可视化在艺术、专业摄影、制图、天体摄影、诊断医学、历史保护和电影等许多领域都至关重要。图像的质量对于突出细节非常重要，例如艺术感、不精确或乍看之下难以察觉的元素。
在电脑屏幕上，图像由数千个像素（图像元素）组成，每个像素对应一种颜色及其强度。以一幅 1,024px x 768px = 768,432 像素的图像为例，如果每个像素都是 RGBA，有 4 个字节，1 个表示红色，1 个表示绿色，1 个表示蓝色，1 个表示透明度，那么这幅图像的大小将达到 3.1MB，相当大。不过，通过选择适当的压缩技术和文件格式，我们可以获得质量相同、文件大小更小的图像。
更新的格式
2019 年前后，JXL 和 AVIF 这两种新文件格式上市，它们有望降低磁盘使用率并更好地保存细节。
这两种格式具有以下共同特点：
- 支持无损压缩和有损压缩，压缩率比以前的格式（如 JPEG 和 PNG）更高，质量保留更好。
- 支持动画和透明图像。
- 开源和免版税许可。
JXL
JXL 或 JPEG-XL，始于 2017 年的下一代图像格式征集活动。最终的提案由另外两个提案合并而成：来自谷歌的 PIK 和来自 Cloudinary 的 FLIF。
AVIF
AVIF 是由开放媒体联盟（Alliance for Open Media）创建的一种格式，该联盟是一个由 Netflix、Meta 和谷歌等公司组成的行业联盟，旨在形成多媒体传输标准。AVIF 的第一个规范是 2018 年制定的。
何时使用 JXL？
JXL 更适合用于：
- 具有高分辨率和极高精细度的图像。
- 当处理速度非常重要时。JXL 编码比 AVIF 快 5 到 10 倍。
- 色彩精度极高。
- 逐行解码：可在下载的同时渲染图像。
- 支持尺寸超过 10 亿 x 10 亿像素的高尺寸图像。AVIF 最多支持 8K 分辨率（8193px x 4320px）的图像。
何时使用 AVIF？
AVIF 更适合用于：
- 网页中的图像，因为大多数浏览器支持 AVIF（88%），而只有少数浏览器支持 JXL（9.5%）。数据来自 caniuse（01/26/2024）。
- 视频和动画，因为它的压缩率非常高，在某些情况下超过 90%。它是 GIF 的最佳替代品。
压缩和性能测试
例子
下面的原始图像是 8192×5464 的 JPEG 文件，文件大小为 11MB。在 JXL 格式（q=90）中，文件大小为 7.3MB。在 AVIF 格式（q=90）中，文件大小为 8.3MB。
下面的原始 GIF 文件大小为 3.1MB。在 JXL 格式（q=90）中，文件大小为 2.5MB。在 AVIF（q=90）格式下，文件大小为 79kB。令人印象深刻！
此 GitHub 代码库执行了一些测试，以比较 JXL 和 AVIF 的压缩率和速度。比较既非定性，也不科学。输入图像包括
- 高、中、低复杂度的 GIF 动画。
- 中、高和超高分辨率的 JPEG 照片。
- PNG 和 JPEG 信息图表，用于评估带有文本的图像压缩情况。
工具
互联网上有一些网站可以将文件转换为 AVIF 和 JXL。我个人推荐 ezgif。
大多数浏览器都支持打开 .avif 文件。
要查看 JXL，可以使用 GIMP、Irfanview 和其他程序。
转换为 .jxl
使用官方工具将图像转换为 JXL：
cjxl input_image.jpg output_image.jxl -q 90 --lossless_jpeg=0
转换为 .avif
有两个主要工具：Cavif-rs 和 ffmpeg。Cavif-rs 目前不支持 GIF，因此我们需要使用 ffmpeg 来处理它们。
使用 cavif-rs 将静态图像转换为 AVIF：
cavif input_image.jpg -o output_image.avif -Q 90 -f
要使用 ffmpeg 将 GIF 转换为 AVIF，还需要 libavif。
# sudo apt install ffmpeg
# sudo apt install libavif-bin
# first, from .gif to .y4m
ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe temp.y4m
# then, from .y4m to .avif
avifenc temp.y4m output.avif带兼容老版本浏览器的 HTML 用法
如果既想使用这些新格式，又想保证与旧版网络浏览器兼容，可以使用 HTML
<html>
<head>
<title>Animated AVIF Example</title>
</head>
<body>
<picture>
<source type="image/avif" srcset="my_animation.avif" />
<img src="my_animation.gif" />
</picture>
</body>
</html>如果浏览器支持，它将首先尝试加载 AVIF 格式的图片；否则，将加载 GIF 格式的图片。
更多阅读
JPEG XL vs AVIF: A Comparison (WebArchive)
What’s the best lossless image format? Comparing PNG, WebP, AVIF, and JPEG XL (WebArchive)
How to compare images fairly (WebArchive)
How JPEG XL Compares to Other Image Codecs (WebArchive)
The Current Role of Image Compression Standards in Medical Imaging (WebArchive)
