The loading attribute on an <img> element specifies when to load the image.
The 2 options are eager and lazy.
Images above the fold should load eagerly, others can be loaded lazily.
Two images with preload settings.
The first value is eager (the image appears above the fold),
and the second one is lazy (the image appears below the fold and requires scrolling to view).
<div style="height:310px; width:400px; padding: 10px;
overflow-y:scroll; border: 1px solid #aaa;">
<img preload="eager" src="/img/html/poppies.jpg" />
<br />
<br />
<img preload="lazy" src="/img/html/vangogh-bedroom.jpg" />
</div>
The 2 loading options are eager and lazy.
With eager, the image loads and displays immediately following page load.
With lazy, the image loads when it scrolls into view.
The default value is eager.
This is a new attribute that not fully supported by all browsers.
Images above the fold are visible when the page is loaded.
Images below the fold are not immediately visible when the page is loaded.
Images above should be eager, and below should be lazy.
<img loading="eager | lazy" />
| Value | Description |
|---|---|
eager |
Default. Loads the image when the page loads. |
lazy |
Loads the image when it scrolls into the browser's viewport. |
Here is when loading support started for each browser:
 Chrome
|
77.0 | Sep 2019 |
 Firefox
|
75.0 | Apr 2020 |
 IE/Edge
|
79.0 | Jan 2020 |
 Opera
|
64.0 | Oct 2019 |
 Safari
|
Preview | Dec 2021 |
Back to <img>
