HTML <img> loadingAttribute
Example
Add lazy loading to several images at the bottom of the page; they are only displayed when the mouse scrolls to their position:
<img src="/images/wedding.jpeg" alt="Wedding" style="width:100%">
<img src="/images/rocks.jpeg" alt="Rocks" style="width:100%">
<!--Image with lazy loading enabled-->
<img src="/images/paris.jpeg" alt="Paris" style="width:100%" loading="lazy">
<img src="/images/nature.jpeg" alt="Nature" style="width:100%" loading="lazy">
<img src="/images/underwater.jpeg" alt="Underwater" style="width:100%" loading="lazy">
<img src="/images/ocean.jpeg" alt="Ocean" style="width:100%" loading="lazy">
<img src="/images/mountainskies.jpeg" alt="Mountains" style="width:100%" loading="lazy">
Try it Yourself »
Browser Support
| Attribute | |||||
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | Not Supported | 64.0 |
Definition and Usage
The loading attribute specifies whether the browser should load an image immediately or defer loading it.
Settingloading="lazy"It is only displayed when the mouse scrolls to the image's location.
Syntax
<img src="URL.html" loading="eager|lazy">
Attribute Value
| Value | Description |
|---|---|
| eager | Default, the image is loaded immediately. |
| lazy | The image is lazily loaded; it is only displayed when the mouse scrolls to the image's location. |
HTML <img> Tag Other Extensions