Intent to Ship: Auto Sizes for Lazy Loaded Images with Srcset
Remember when I wrote about sizes="auto"? Well, it’s coming to Chrome! Hallelujah!
Lazy Loading Images and Video | Web Fundamentals | Google Developers
Jeremy Wagner offers a deep dive into lazy loading images (and video) with some advice for considering the no-JavaScript situation too.
Related links
On Container Queries, Responsive Images, and JPEG-XL – Cloud Four
Container queries can’t be used in the sizes attribute for responsive images. Here, Jason breaks down why that is (spoiler: it’s the lookahead pre-parser) and segues into a truly long term solution: a “magical” image format.
If you’ve ever thought it felt weird to put media conditions inside the HTML for responsive images, this will resonate.
Learn Images
Mat has written this free course for you all about images on the web. Covering image formats, responsive images, and workflows, this is one to keep on speed dial.
AddyOsmani.com - Preload late-discovered Hero images faster
Did you know there’s an imagesrcset attribute you can put on link rel="preload" as="image" (along with an imagesizes attribute)?
I didn’t. (Until Amber pointed this out.)
AVIF has landed - JakeArchibald.com
There’s a new image format on the browser block and it’s very performant indeed. Jake has all the details you didn’t ask for.
Related posts
Lost in calculation
A lazy option for responsive images is at hand.
Image previews with the FileReader API
Adding `alt` text to uploaded images.
Accessibility testing
It’s not just about finding the issues—it’s about finding the issues at the right time.
Small steps
Making marginal gains in front-end performance.
Progressively enhancing maps
How I switched to high-resolution maps on The Session without degrading performance.