Lazy loading images in HTML

Most modern browsers now include support for the loading="lazy" image attribute, which causes images not to be loaded unti the user scrolls them into view.

Animated screenshot showing the network panel in the Firefox DevTools - as I scroll down a page more images load on demand just before they scroll into view.

I used it for the slides on my annotated version of this presentation: Massively increase your productivity on personal projects with comprehensive documentation and automated tests.

There's one catch though: you need to provide the size of the image (I used width= and height= attributes) in order for it to work! Without those your browser still needs to fetch the images in order to calculate their dimensions to calculate page layout.

Here's the HTML I used for each slide image:

  alt="Issue driven development"

Created 2022-11-26T12:40:26-08:00 · Edit