HTML <img> loading Attribute

❮ HTML <img> tag

Example

Add lazy loading to images below the fold:

<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%">
<img src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">

<!-- off-screen images -->
<img src="/w3images/paris.jpg" alt="Paris" style="width:100%" loading="lazy">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%" loading="lazy">
<img src="/w3images/underwater.jpg" alt="Underwater" style="width:100%" loading="lazy">
<img src="/w3images/ocean.jpg" alt="Ocean" style="width:100%" loading="lazy">
<img src="/w3images/mountainskies.jpg" alt="Mountains" style="width:100%" loading="lazy">
Try it Yourself »

Definition and Usage

The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.

Tip: Add loading="lazy" only to images which are positioned below the fold.


Browser Support

Attribute
loading 77.0 79.0 75.0 Not Supported 64.0

Syntax

<img src="URL" loading="eager|lazy">

Attribute Values

Value Description
eager Default. Loads an image immediately
lazy Defer loading of images until some conditions are met

❮ HTML <img> tag
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.