Syntax
<img src="gallery.jpg" alt="A garden path" width="480" height="320" loading="lazy">
<iframe src="map.html" title="Location map" loading="lazy"></iframe>Examples
Native Image and Iframe Lazy Loading: working example
Save as an HTML file and open it in a browser. Expected result: The image appears; because it is near the viewport and embedded in the page, it may load immediately despite loading="lazy".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML example</title>
</head>
<body>
<p>This self-contained image demonstrates the attribute. In a longer page, place lazy images below the first screen.</p>
<img loading="lazy" width="240" height="120" alt="Blue rectangle marked Demo" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%22120%22%3E%3Crect%20width%3D%22240%22%20height%3D%22120%22%20fill%3D%22%232563eb%22/%3E%3Ctext%20x%3D%22120%22%20y%3D%2268%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EDemo%3C/text%3E%3C/svg%3E">
<p>Lazy loading is a fetch-timing hint, not a visual effect.</p>
</body>
</html>- loading="lazy" permits the browser to defer an eligible resource until it is near the viewport. The browser chooses the threshold and can load an image earlier than you expect.
- The embedded data image makes the demo work without a server, but it cannot measure network savings. Try the same attribute on a real below-the-fold image or iframe to study requests.
- Explicit width and height reserve layout space. The image has alt text; an iframe also needs a descriptive title in a real page.
- Lazy loading is a performance hint. Do not lazy-load an important hero image that visitors need immediately.
Best practices
- Use lazy loading for genuinely off-screen resources, not every image.
- Set image dimensions to reduce layout movement.
- Do not infer that an element is unsupported merely because it loads immediately.
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
The loading attribute is a fetch-timing hint; actual request timing depends on browser heuristics and page conditions.
<img> loading
Desktop
- Chrome
- Supported
From 77 - Firefox
- Supported
From 75 - Safari
- Supported
From 15.4 - Edge
- Supported
From 79 - Opera
- Supported
From 64
Mobile
- Safari on iOS
- Supported
From 15.4 - Chrome for Android
- Supported
From 77 - Firefox for Android
- Supported
From 79 - Samsung Internet
- Supported
From 12.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 77
Firefox
- From 75
Safari
- From 15.4
Edge
- From 79
Opera
- From 64
Safari on iOS
- From 15.4
Chrome for Android
- From 77
Firefox for Android
- From 79
Samsung Internet
- From 12.0
<iframe> loading
Desktop
- Chrome
- Supported
From 77 - Firefox
- Supported
From 121 - Safari
- Supported
From 16.4 - Edge
- Supported
From 79 - Opera
- Supported
From 64
Mobile
- Safari on iOS
- Supported
From 16.4 - Chrome for Android
- Supported
From 77 - Firefox for Android
- Supported
From 121 - Samsung Internet
- Supported
From 12.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 77
Firefox
- From 121
Safari
- From 16.4
Edge
- From 79
Opera
- From 64
Safari on iOS
- From 16.4
Chrome for Android
- From 77
Firefox for Android
- From 121
Samsung Internet
- From 12.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.