「优化建议」将 WebP 替换为 AVIF

[hexgu]

根据 Caniuse 我注意到 AVIF 从 2024 年 1 月起已经被主流浏览器支持 ，所以我推荐将现在略缩图转化为 WebP 格式转为 AVIF 格式

AVIF 图像

AV1 图像文件格式（AVIF）是一种功能强大、开源、免版税的文件格式，它在高效图像文件格式（HEIF）容器中对 AV1 比特流进行编码。

备注：AVIF 有可能成为在 web 内容中共享图像的“下一件大事”。它具有最先进的特性和性能，却没有阻碍同类替代产品发展的复杂许可和专利使用费的束缚。

AV1 是一种编码格式，最初设计用于在互联网上传输视频。该格式得益于近年来视频编码技术的长足进步，并有可能受益于对硬件渲染的相关支持。不过，在某些情况下它也有缺点，因为视频和图像编码有一些不同的要求。

该格式可以提供：

• 与 JPG 和 PNG 相比，在视觉上相似的压缩水平下，有损压缩效果极佳（例如，有损 AVIF 图像比 JPEG 图像小 50%）。
• 一般来说，AVIF 比 WebP 有更好的压缩效果。对于相同的 JPG 图像集，中值压缩率为 50%，而 WebP 为 30%（资料来源：AVIF 与 WebP 的对比（CTRL 博客））。
• 无损压缩。
• 动画/多图像存储（类似于 GIF 动画，但压缩效果更好）
• 支持 Alpha 通道（即透明）。
• 高动态范围（HDR）：支持存储图像，使图像最亮和最暗部分之间的对比度更大。
• 宽色域：支持包含更大色彩范围的图像。

相对于现有的 WebP 替换理由

• AVIF 有损压缩效果最好，相较于WebP，AVIF在相同质量下文件大小平均减少约30%。
• AVIF 支持 HDR 图像，对于 iPhone 拍摄的图像可以更好的适配
• 减少压缩伪影：AVIF在压缩过程中能够有效减少常见的伪影，这使得其在高细节图像中表现更佳。
• AVIF 支持10位色深，WebP只支持8位色深
• 开源

[besscroft]

该方案将被否决，我一开始就支持过 AVIF，直到某一天更新 Edge 后，发现被取消支持了。且不是所有用户用的浏览器版本都支持了 AVIF，所以综合考虑下来，暂时先不会上。

详见：https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types#avif_%E5%9B%BE%E5%83%8F

[hexgu]

Edge 在 2024 年 1 月 26 日发布的 Edge 121 版本已经恢复了 AVIF 的支持，并且以默认的方式提供。

同时 AVIF 已经获得了 Caniuse Baseline，在 Chrome、Edge、Safari 和 Firefox 中都可以使用，支持率已经有了 92.64%，已经获得了除了 IE 和 Opera Mini 以外所有的浏览器的支持。所以 AVIF 在项目浏览器支持的范围

我提出选择 AVIF 方案的意义在于解决 quality 0.2 下 WebP 格式存在的色块、涂抹问题，而在有损压缩下 AVIF 有明显的优势，无论色彩、形状、渐变都表现优异，有损压缩 AVIF 能够带来更好的效果 。

如果您继续选用 WebP 的话，那我推荐将 quality 设置为 0.95 。WebP 在 95 质量下色块、涂抹问题能够很好的控制。

在我的测试下 5.76 MB 的原图在 quality 90 大小为 250.96 KB（-96%，WebP），在 quality 20 下为 71.96 KB（-99%，WebP）和 21.24 KB （-100%，AVIF）。3%的差异我认为是可以接受的

我意识到我的建议只从图片显示效果进行考虑，确实不够全面，但是我希望您能够将 WebP 在较高压缩率时存在的色彩问题纳入权衡范围。

搞摄影都喜欢刀锐奶化嘛

[besscroft]

关于这个问题，我会考虑合适的方案，可能还需要征询一些用户的意见。尽量把方案的负面影响降到最低。