Lazy-loaded image

The native loading="lazy" attribute defers loading an image until it approaches the viewport — with zero JavaScript.

Code

<img src="photo.jpg" alt="Image description" loading="lazy" width="800" height="450">

The browser decides when to start loading based on scroll position. This reduces the page's initial load weight, especially with many images.

For above-the-fold images, loading="lazy" is NOT recommended — use loading="eager" (the default) instead so it doesn't delay LCP.

The src, alt, loading, and srcset attributes of the <img> tag, with examples.

How to give the browser several image variants for different screen sizes.