Skip to main content

Defer offscreen images


Web pages offer a lot of images that aren't displayed on the first loaded screen. They can also hide these images behind other interactions, like tabs and accordions. This content is dynamically displayed and therefore doesn't need to be loaded when it isn't displayed.

The fact that images are loaded on-demand, only when they are about to be displayed, is often called "lazy-loading".


Use on demand loading for images which are unlikely to be displayed on first page load. This can be done via the newer browser attribute loading="lazy" on the image tag and can also be polyfilled for older browsers.

SCI Impact

SCI = (E * I) + M per R
Software Carbon Intensity Spec

Using lazy loading of images will impact SCI as follows:

  • E: Images are only loaded when needed, saving bandwidth and processing power on the client and server, therefore reducing the energy required.


  • This assumes that the HTML for the image tags can be modified in the application