Lazy-loaded images and iframes
loading="lazy"
Chrome77
Edge79
Firefox121
Safari16.4
Features it needs
- Lazy-loading images and iframesWidely available
These libraries watch the viewport with an IntersectionObserver and swap a placeholder for the real src once an image or iframe scrolls close enough. The loading attribute does the same deferral without the observer, the placeholder markup, or the script that has to run before it can start. The browser decides how far ahead to fetch, so there is no distance threshold to tune.
When this applies
Deferring offscreen images or iframes so they load as the user scrolls to them.
The native approach
<img src="/hero.jpg" alt="" loading="lazy" width="1200" height="630" />
<iframe src="https://example.com/embed" loading="lazy"></iframe>When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- The element is a video or audio tag. loading is not yet Baseline on those, so an IntersectionObserver is still the reliable way to defer them.
- You are lazy-loading a CSS background-image. The loading attribute only applies to img and iframe elements.
- You need a blur-up or low-quality placeholder while the real image streams in. That is a rendering concern the attribute does not cover.
- You need to control how far ahead of the viewport loading starts. The browser's heuristic is not configurable per element.
- You are lazy-loading a component tree, not media, such as mounting a chart only once it scrolls into view.
Building it
This catalog stops at the swap. These guides go through the implementation and the fallbacks. They come from Google Chrome's modern-web-guidance, Apache-2.0.
- Optimize image priorityperformance