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:

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

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

Lazy loading images in HTML

Related