Defer loading of images until a user scrolls to them using the HTML loading = lazy attribute

For your images which are ‘below the fold’ consider using the HTML loading=’lazy’ attribute which will defer loading of images until a user scrolls to them.

In the demo video below the page has 100 cat pictures but we can see from developer tools that they are not requested until a user scrolls to them so there is no wasted bandwidth.

The attribute is supported by most popular Chromium-powered browsers (Chrome, Edge, Opera) and Firefox. Browsers that do not support the loading attribute simply ignore it without side-effects.

Is anyone using this at the moment? It would be ideal to use on ecommerce or catalogue type of sites which are heavy on images where I imagine it could save lots of GBs of bandwidth every month.

More information from Google ->
Browser-level image lazy-loading for the web

Leave a Reply

Your email address will not be published. Required fields are marked *