HTML <img> loading Attribute

The HTML <img> tag

Definition and Usage

loading The attribute specifies whether the browser should load the image immediately or defer loading the image outside the screen until, for example, the user scrolls near it.

Tip:Please only add loading="lazy" Add to the image located at the bottom of the screen.

Example

Add lazy loading to the image at the bottom of the first screen:

<img src="/i/photo/beijing.jpg" alt="Beijing" style="width:100%">
<img src="/i/photo/shanghai.jpg" alt="Shanghai" style="width:100%">
<!-- Image outside the screen -->
<img src="/i/photo/wuhan.jpg" alt="Wuhan" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-1.jpg" alt="Shanghai" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-2.jpg" alt="Shanghai" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-3.jpg" alt="Shanghai" style="width:100%" loading="lazy">
<img src="/i/photo/tiyugongyuan.jpg" alt="Sports Park" style="width:100%" loading="lazy">

Try It Yourself

Syntax

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

Attribute Value

Value Description
eager Default. Load images immediately.
lazy Lazy-load images until certain conditions are met.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
77.0 79.0 75.0 Not Supported 64.0

The HTML <img> tag