The #Mapbox sprite on my photo site weights 222 kB:
https://nicolas-hoizey.photo/ui/thumbnails/[email protected]
I would like to serve it with #Cloudinary to enhance performance, as this PNG sprite will fast get heavier with new photos.
If you agree, please vote! https://github.com/mapbox/mapbox-gl-js/issues/11379
Apparently, an image whose part above the fold is indeed the largest, but of which only a small part can be seen, can be considered an LCP element, even if another image has a larger part visible... 😭
You can see this for my photography site in this WebPageTest result:
https://www.webpagetest.org/vitals.php?test=230606_BiDcN4_4NJ&run=3&cached=0#lcp
Looks like we will soon have JPEG XL in Safari! 🥳
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…
![https://nicolas-hoizey.photo/ui/thumbnails/[email protected]](https://nicolas-hoizey.photo/ui/thumbnails/sprite@2x.png){kind=link}