Search code examples
javascripthtmlimagebrowsersafari

Safari won't fallback an AVIF picture

I'm trying to render an image with the below code:

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

On Safari browsers, the image is not getting rendered at all. If I delete the first source though that has the .avif format, then Safari displays correctly the fallback .jpg image.

View on JsFiddle

Is this a Safari bug? If so, this really prevents the usage of the .avif format. Does anyone know of a workaround?

Solution

  • Safari can't fallback if you don't provide type attribute. So you need something like this (tested on Safari, works fine for me):

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