How to defer offscreen images in HTML
Deferring offscreen images can help to reduce initial website size and improve time to interactive. Performance gains can be significant on mobile websites, where most of the web content is not visible initially due to smaller viewport size.
To defer offscreen images you simply need to set loading=”lazy” property on image HTML element and browsers will do the rest for you.
<img src="image.jpeg" loading="lazy">