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
