Safari不会让AVIF图片退却

Question

我试图用以下代码呈现一个图像：

<picture>
  <source srcset="https://75tm.gr/GFXS1205/2048/GFXS1205.avif">
  <source srcset="https://75tm.gr/GFXS1205/2048/GFXS1205.webp">
  <img src="https://75tm.gr/GFXS1205/2048/GFXS1205.jpg">
</picture>

在Safari浏览器上，图像根本没有呈现。如果我删除了第一个具有.avif格式的.avif，那么Safari将正确显示回退.jpg图像。

JsFiddle视图

这是Safari虫吗？如果是这样的话，这实际上阻止了.avif格式的使用。有人知道解决办法吗？

Answer 1

如果不提供type属性，Safari就不会退步。因此，您需要这样的东西(在Safari上测试，对我来说很好)：

​

<picture>
  <source srcset="https://75tm.gr/GFXS1205/2048/GFXS1205.avif" type="image/avif">
  <source srcset="https://75tm.gr/GFXS1205/2048/GFXS1205.webp" type="image/webp">
  <img src="https://75tm.gr/GFXS1205/2048/GFXS1205.jpg">
</picture>

​

Answer 2

仍然没有开发safari v18。看起来这个版本现在支持avif格式。它试图加载明显失败的avif映像，而不返回到jpg (因为它假定可以加载avifs)。我只是使用jpegs，直到这将被修复。