如何在不支持的浏览器中显示.avif图像？

Question

我想将所有大 .png 文件转换为 .avif 。但像 MS Edge 等浏览器不支持 .avif 图像。有什么方法可以在 f.e. 中显示 .avif 文件吗？ Edge，或向浏览器提供两个图像（.png 和 .avif），然后浏览器决定显示哪个图像？

我的代码：

<a href="./"><img src="img/logo.avif" alt="Logo – Test"></a>

Answer 1

无法在 MS Edge 中显示 .avif 文件，但浏览器有办法决定显示哪种格式。

<a href="./">
  <picture>
    <source srcset="img/logo.avif" type="image/avif">
    <source srcset="img/logo.png" type="image/png">
    <img src="img/logo.png" alt="Logo – Test">
  </picture>
</a>

Answer 2

自 2024 年 1 月起 Edge（和所有主要浏览器）支持 AVIF 文件