TIL that you can use the loading=lazy attribute to defer the loading of the
image until the user scrolls to them.
<img src="bananas.jpg" loading="lazy" alt="Bunch of bananas" />
MDN says this is experimental
Loading
Indicates how the browser should load the image:
eager: Loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).
lazy: Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser. The intent is to avoid the network and storage bandwidth needed to handle the image until it's reasonably certain that it will be needed. This generally improves the performance of the content in most typical use cases.
*Note:
Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when.*
The other loading value is eager which loads the image as soon as the page loads. This is the default.
Currently, not fully supported by all the browsers.