https:/
It is natural to think that the problem with images in container queries is a mere oversight. We used to only have media queries to design with. Now we have container queries. Images use media conditions are a subset of media queries. Ergo, we need a subset of container queries for images. Let’s call them container conditions and use those in our sizes attributes. Done. Ship it!
If only it were that simple.
Watch Out for Layout Shifts with ‘ch’ Units
In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty…
Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?
Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?
Limiting the image density on mobile devices drasticaly improves performance, with no visual loss, so we did it!
I still wish it was much easier than dealing with <picture> and x descriptors for fluid images… 😞
With a <img maxdensity="2.5" …> attribute for example!
If you agree, comment:
https://github.com/whatwg/html/issues/4421
Largest Contentul Paint change in Chrome 112 to ignore low-entropy images
This may result in LCP times increasing, if a low-content background was being painted very early, or if a low-content placeholder was being used…
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.
Jason Grigsby