loading="lazy"

This demo includes four images. Two of the images are within or close to the viewport, while the remaining two are outside of the viewport. The images outside of the viewport have the loading="lazy" attribute.

Photograph of a table and chairs in the foreground with the sea in the background.

Photograph of a blue shallow sea with four deckchairs and an umbrella in the foreground on the rocks.

Aerial photograph of a green body of water surrounded by rocks.

If you observe the network tab, you should notice that the images with the loading="lazy" attribute are not requested immediately but begin downloading as you scroll down and they approach the viewport.

Chrome DevTools Network panel showing 7 resources. The images within the viewport (rows 4 and 5) begin downloading immediately while the images outside of the viewport (rows 6 and 7) start downloading later.

In the network panel above, the images image-1.jpg and image-2.jpg are downloaded immediately while image-3.jpg and image-4.jpg started downloading as the user scrolled down.

View Source Code

<img
  alt="Photograph of a sandy landscape."
  width="800"
  height="600"
  src="/images/image-1.jpg"
  loading="lazy"
/>

Learn Performance - Defer Images

loading="lazy"