Looks like @archdigestindia could improve #WebPerf for their readers and reduce bandwidth invoices…
564.5px widesizes says the image is full width414 % bigger
I really like to see that all browser vendors agree with @[email protected] that we need @media, srcset and sizes for <video> as for <img>/<picture>! 🤩
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…
On Container Queries, Responsive Images, and JPEG-XL
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…
Jason Grigsby