<picture> srcset not returning the avif image

[bronze]

Hi there I've been trying to figure out why avif imports through an srcset isn't working without success.
I've set up an example at https://avif-test-imagetools.netlify.app/, with the code on https://github.com/bronze/avif-test

What is happening is this:
Making a element calling external images, i can see the .avif files.A element calling the files directly from the html also works.I can make the transformation to avif in a .js and assign it to an tag also.But if i create the element in the .js the browser will see the fallback jpg and not the avif. And the file is on the server, we can access it if we copy+paste the name.

Under network, on the inspector, there are 3 .avif files and one .jpg.

Anyone got an idea here?

-cheers

[bronze]

It is really weird or I'm missing something really dumb (completely possible)
I cloned the example page and set up two elements. One outputs the avif and one falls back to the webp... for seemingly no reason i can see!site: https://vite-simple-srcset.netlify.app/code: https://github.com/bronze/bronze-vite-simple-srcset

[JonasKruckenberg]

Sorry for the late reply, have you figured this out?
I have been doing testing with your repo myself and it seems to be a browser quirk.
Safari for one doesn't even bother with avif and brave (which can display avifs!) doesn't choose them in picture tags. 🤔
2 explanations come to mind:

1. It's a bug. They forgot to tell chromium to consider avif images in pictures
2. Performance. The avif decoder used by chromium is significantly slower than webp so that the faster download wouldn't make up for longer decoding.

I don't think this is caused by imagetools though so I will convert this into a discussion.