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
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