Newly availableUseful in modern browsers, but confirm support before making it a core requirement.
Embedded Newly available

Lazy-loading images and iframes

The loading="lazy" attribute for <img> and <iframe> elements blocks loading the external resource until the user scrolls to that element's part of the page. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Embedded

Overview

The loading="lazy" attribute for <img> and <iframe> elements blocks loading the external resource until the user scrolls to that element's part of the page. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLIFrameElement.loading
77
79
121
16.4
77
16.4
HTML attribute
loading
77
79
121
16.4
77
16.4
loading
77
79
75
15.4
77
15.4
DOM API
loading

The loading property of the HTMLImageElement interface provides a hint to the browser on how to handle the loading of the image which is currently outside the window's visual viewport. This helps to optimize the loading of the document's contents by postponing loading the image until it's expected to be needed, rather than immediately during the initial…
77
79
75
15.4
77
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<!--Apply to images outside the first view --> <img src="photo.jpg" alt="photo" loading="lazy" width="800" height="600"> <iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>

Live demo

Lazy image gallery

Set loading="lazy" on below-the-fold images while keeping the markup simple.

PreviewFullscreen

Lazy iframe embed

Use loading="lazy" on an iframe to defer offscreen content.

PreviewFullscreen

Best-practice checklist

Pair lazy loading with width, height, and meaningful alt text.

PreviewFullscreen

Use cases

  • Use Lazy-loading images and iframes

    Use Lazy-loading images and iframes when standard HTML needs a more specific platform feature, semantic signal, or browser capability.

  • Handle edge cases

    Apply Lazy-loading images and iframes to solve a focused requirement without redesigning the whole page architecture.

Cautions

  • Test Lazy-loading images and iframes in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure Lazy-loading images and iframes supports the intended task without making the page harder to perceive, understand, or operate.

Related links

Powered by web-features