loading
Lazy loading for images and frames that are not yet visible.
Syntax
<img src="…" alt="…" loading="lazy">Parameters
| Parameter | Type | Description |
|---|---|---|
| loading | lazy | eager | `lazy` — load when the element gets close to the screen; `eager` — right away (default). |
Examples
An image far below loads only when you scroll to it:
<p style="height: 400px;">Scroll down…</p>
<img src="/media/photo-400x250.jpg" alt="A latte" width="400" height="250" loading="lazy">Notes
Lazy loading saves data and speeds up the page. But images visible right away (such as a big banner) should load without lazy — otherwise they appear late. Set width and height so the space is reserved in advance.
See also
Related recipes
In the tutorial
- Images — The img tag, the src and alt attributes, sizes, captions with figure and figcaption, image formats and lazy loading.