Lazy Loading Images loading=lazy

<img loading="lazy" src="..."> tells the browser to defer downloading the image until it is about to enter the viewport. Native support across all modern browsers makes this the simplest performance win for image-heavy pages.

Browsers use a small heuristic margin (usually a few thousand pixels below the fold). The image starts loading early enough that it is fully painted by the time the user scrolls to it — lazy loading is invisible to careful scrollers.

Never set loading="lazy" on images above the fold or your LCP (largest contentful paint) candidate. The deferred load delays the most important visual element, which hurts both perceived speed and Core Web Vitals.

For lazy loading to be effective, give the <img> explicit width and height (or aspect-ratio CSS). Without dimensions the browser cannot reserve space, scrolling reflows the layout, and the lazy-loading heuristic misfires.

The same attribute works on <iframe>. <iframe loading="lazy"> defers loading of below-the-fold maps, videos and social embeds — each of which would otherwise pull in megabytes of third-party JavaScript on every page view.

The default value is loading="eager" (load immediately) and is rarely written explicitly. Setting eager on above-the-fold images can be useful as documentation, signalling to reviewers that the eager choice was deliberate.

Lazy loading composes perfectly with responsive images. The browser still picks the right candidate from srcset; it just defers the download. There is no extra coordination required between loading="lazy" and srcset.

Pair lazy loading with decoding="async" to let the browser decode the image off the main thread. This avoids blocking input during scroll when many images arrive simultaneously after a long scroll burst.

CSS background-image cannot be lazy-loaded natively. For above-the-fold hero backgrounds, that is fine; for below-the-fold backgrounds use IntersectionObserver to swap in the URL when the element nears the viewport.

When the page is printed, the browser eagerly loads every image regardless of loading="lazy" so the printed copy is complete. You do not need to special-case lazy images for print stylesheets.

Lighthouse's "Defer offscreen images" audit lists every image that should have loading="lazy". Network panel filtering by "Img" plus "Waterfall" view shows the staggered loads that lazy loading produces — initial requests drop dramatically on image galleries.

Why is it harmful to set loading="lazy" on a hero image at the top of the page?

loading="lazy" on offscreen <img> and <iframe> elements is a one-attribute performance win. Pair with explicit width/height (to reserve space), srcset (for responsiveness), and decoding="async" (to keep scrolling smooth). Never apply it to the LCP image or anything visible on the initial viewport.