I’ve been lately working on our backend for compressing images that user’s upload to our servers, and debating how the system should present the data.
This left me with a rather complex script for such a mundane task, and with a really poor fallback mechanism for spiders, and other non-JS ready devices.
My next idea was to just use the
<picture> tag. It allows the browser (or whatever is requesting the website) to select the appropriate image without the need for any JS.
This would allows us to provide an output like this:
<picture> <source srcset="/assets/img.webp" type="image/webp"> <source srcset="assets/img.jpg" type="image/jpeg"> <img src="assets/img.jpg"> </picture>
As you can see, the syntax is really expressive, allows a lot of customization with additional meta tags, and is really well supported when using reactive JS to generate it.