Sorry, we don't support your browser.  Install a modern browser

Responsive images#333

With the advent of AVIF and WebP image formats in Kirby 3.6 it is more complex to always provide the best possible image to the user because not every browser currently can make use out of the new formats and therefore a fallback solution is necessary. Additionally to that also a lot of different screen sizes are necessary to load smaller sized images for smaller screens.
This could be handled with the <picture> element and should be included natively. One article that describes a possible solution: https://www.industrialempathy.com/posts/image-optimizations/

a month ago

Reading this article, the solutions seem to me very opinionated and for specific use cases people might rather choose different paths. I think it will be hard to implement a general solution natively.

a month ago
I

I agree, but I think we can help people integrate this with a responsive image guide that’s already on my todo list.

a month ago
1

I think it would be beneficial to at least support the different source types without the fancy rest (Kirby already supports lazy loading) just like described here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#use_modern_image_formats_boldly
An additional resolution switching would be nice to have and the demand of this feature can already be seen at https://kirby.nolt.io/160

a month ago

Since there are different ways to achieve this, Kirby shouldn’t make assumptions that everyone now wants to use the picture tag. If that was the case, that would break everyones designs. It’s perfectly fine to still use the image tag with srcset and select the right image format to send to the browser server-side.

a month ago

@Info You can find me struggling with this very recently over here: https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/
In the end I was successful but only with a lot of support. Maybe it could be helpful for writing your mentioned guide.

a month ago