HTML <img> loading Attribute

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.

Example

#

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>


Using loading

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.


The fold

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.


Syntax

<img loading="eager | lazy" />

Values

#

Value Description
eager Default. Loads the image when the page loads.
lazy Loads the image when it scrolls into the browser's viewport.

Browser support

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

You may also like

 Back to <img>
Guides