Astro with React. AVIF Images not rendering on mobile-CodePudding

Using astro and react I have a custom image component:

         <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>
  )

Images render fine on desktop but on my mobile device no image with the .avif extension renders. I thought .avif was widely supported on all browsers and operating systems? I am testing on an iPhone 13 on both Safari and Chrome.Does anyone else have any experience with these issues and can recommend a fix?

CodePudding user response：

While AVIF has increasingly good support, it still is not universal. Can I Use reports around 20% of users won’t be able to render AVIF images currently. Only Safari 16 on iOS appears to support AVIF and Safari Desktop does not yet support it. Because all browsers on iOS use Safari’s engine under-the-hood (including Chrome), they also won’t be able to support AVIF on older versions of iOS.

The solution currently is to either pick a more widely supported image format, e.g. WebP or JPEG, or to use responsive image techniques with the <picture> element to offer multiple formats. This allows browsers that don’t support AVIF to fall back to another format. For example:

<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>