Avif with jpeg fallback

[kasperkamperman]

Important.
Is see Avif extensions are supported (based on other closed issue)

Please describe the feature you want to be implemented.
It think it's needed to offer a fallback to jpeg when using avif, jpegxl or webp.
I reviewed several lightbox solutions and no-one seems to offer this.

Explain why the feature is useful
Newer browsers use AVIF, so images load faster, less bandwidth is used for the same quality.
Older browsers fallback to JPEG.

Have you seen it somewhere else?
I use this now for my thumbnails, a combination of img srcset (for responsive loading) and source srcset, wrapped in the picture tag.

<picture>
     <source srcset="photo_1600.avif 1600w, photo_800.avif 800w" sizes="100vw" type="image/avif" >
     <img src="photo_800.jpg" srcset="photo_1600.jpg 1600w, photo_800.jpg 800w" sizes="100vw" alt="Description of the image">
</picture>

Additional context
If there is already some workaround (I , I'd like to know, however I couldn't find it in the documentation.

[gingerchew]

Related Issue: #361

Going to close this.

[tykling]

Apologies in advance for responding to a closed issue, but I think this issue should not have been closed:

#361 is about responsive loading of images, in other words: let the browser pick the best size
#451 (this issue) is about offering multiple <source> formats in the <picture> tag, in other words: let the browser pick the best filetype

These are related but not the same. I can't currently find a way to use, say, webp and fallback to png with glightbox, because there is no way to specify multiple formats.

Thanks! :)

[gingerchew]

@tykling Thats true, you can't do file format fallback with the <img> tag. That's a feature of the <picture>. Hence why it was a related issue, even though it isn't explicitly referencing file format fallback.

The idea in 361 is to add a "sources" property that would work with file formats or size or whatever.

[tykling]

I see, ok thank you. Looking forward to it! 👍