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.

Previously, different JavaScript techniques were needed to defer offscreen images. Nowadays, defer loading is supported by all modern browsers out of the box. Current versions of Chrome, Edge, Firefox and Opera can defer image loading natively. Safari is the only browser who still keeps this capability under experimental flags.

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