How do you deal with images that need to have a fluid width but fixed height?
I tend to start from the lowest width/height ratio and increase, knowing larger images will have hidden parts above and below… 😔
Anything better?
Seriously, do we need yet another version of Low Quality Image Placeholders?
Why do some people want to do additional work just to show useless colourful pixels to users, delaying the rendering of the actual image?
As a user, I hate LQIP. Single colour backgrounds are fine, though.
According to the results presented above, we can conclude that JXL is the superior format for both lossy and lossless operations. That is clear by only looking at the results, but we can also have a look at the features of each format. Some of them are very important.
⚠️ Be carefull if you use SVGO or SVGOMG to optimize #SVG images using <symbol>s.
There's a bug that might remove them when it shouldn't:
https://github.com/svg/svgo/issues/1726
Responsive images on Shopify with Liquid
We launched the image_tag and image_url filters to help with generating responsive images. Before we dive in, what do these filters do? What are the differences between them?
Jon gives a good overview of everything JPEG XL improves over other image formats. This article can be seen by some as biaised, as Jon is part of the team that created the format, but I really think it honestly shows clear advantages, and I hope it will help people understand JPEG XL support in browsers would be great.
Jon Sneyers