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.
Is this a Safari bug? If so, this really prevents the usage of the .avif format. Does anyone know of a workaround?
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>