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.

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:

1
<img
2
  alt="Issue driven development"
3
  width="450"
4
  height="253"
5
  loading="lazy"
6
  src="https://static.simonwillison.net/static/2022/djangocon-productivity/productivity.022.jpeg"
7
>