Astro with React.avf图像不能在手机上渲染

Question

使用astro和react，我有一个自定义图像组件:

<ImageWBorder
src="images/pix.avif"
alt="main band image"
leftBorder
/>

ImageWBorder

return (
<div className="aspect-square relative z-10 h-64 sm:h-72 sm:h-80 mobile:h-96 xl:h-100">
<img
alt={alt}
src={src}
className="object-cover w-full h-full rounded-full"
/>
<div style={{ zIndex: -1 }} className={styles} />
</div>
)

图像在桌面上渲染得很好，但在我的移动设备上没有带有.avif扩展名的图像渲染。我以为。avif在所有浏览器和操作系统上都得到了广泛的支持。我在iPhone 13上测试了Safari和Chrome浏览器。有没有其他人对这些问题有任何经验，可以建议修复?

Answer 1

虽然AVIF得到了越来越好的支持，但它仍然不是通用的。大约20%的用户目前无法渲染AVIF图像。只有iOS上的Safari 16似乎支持AVIF，而Safari Desktop还不支持。因为iOS上的所有浏览器(包括Chrome)都使用Safari的引擎，所以它们也无法在旧版本的iOS上支持AVIF。

当前的解决方案是要么选择更广泛支持的图像格式，例如WebP或JPEG，要么使用响应式图像技术与<picture>元素提供多种格式。这允许不支持AVIF的浏览器退回到另一种格式。例如:

<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="A description of the image." 
width="300" height="200" loading="lazy" decoding="async">
</picture>