In this article, we will discuss the HTML img loading attribute. This attribute handles how an image will be loaded on a webpage. It accepts three string values, namely, auto, eager and lazy.
Lazy Loading Attribute: This strategy is used to identify resources as non-critical and the resources will be loaded only when needed. In other words, Lazy loading defers to the loading of the webpage content as long as if they were not required. This technique helps to optimize the page & allowing them to load later. Usually, the image size is large on the webpage. For this, lazy loading can be useful to defer the offscreen images. Please refer to What is Lazy Loading? article.
Syntax:
<img src="url" loading="auto|eager|lazy">
Attribute Values:
- auto: It is a default lazy-loading behavior of the browser, in which the browser will determine for the lazy load of contents.
- eager: The image corresponds to it will load without any delay ie., It will load the resources immediately, regardless of where it’s located on the page.
- lazy: It delays the loading of the image that corresponds to it until the browser specifies that it is expected to appear shortly. It can help in optimizing the loading time of a webpage, by postponing the loading of images until and unless they are expected to appear, instead of loading them at once.
We will use these attribute values to see the changes in each case through the examples.
Example 1: This example illustrates the use of the lazy attribute.
<!DOCTYPE html><head>
<meta charset="utf-8" />
<title>Lazy Loading Images Attribute</title>
<style>
img {
height: 200px;
width: 200px;
display: block;
margin: 10px;
}
</style>
</head>
<body>
<h1>Lazy Loading Attribute</h1>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
<img src=
loading="lazy"
alt="gfg"/>
</body>
</html>
|
Output:
Example 2: This example illustrates the use of both the auto & eager loading attribute.
<!DOCTYPE html><head>
<meta charset="utf-8" />
<title>Image Loading Attribute</title>
<style>
img {
height: 200px;
width: 200px;
display: block;
margin: 10px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Auto Loading Attribute</h1>
<img src=
loading="auto"
alt="gfg"/>
<img src=
loading="auto"
alt="gfg"/>
<img src=
loading="auto"
alt="gfg"/>
<img src=
loading="auto"
alt="gfg"/>
<img src=
loading="auto"
alt="gfg"/>
<img src=
loading="auto"
alt="gfg"/>
<img src=
loading="auto"
alt="gfg"/>
<h1>Eager Loading Attribute</h1>
<img src=
loading="eager"
alt="gfg"/>
<img src=
loading="eager"
alt="gfg"/>
<img src=
loading="eager"
alt="gfg"/>
<img src=
loading="eager"
alt="gfg"/>
<img src=
loading="eager"
alt="gfg"/>
<img src=
loading="eager"
alt="gfg"/>
<img src=
loading="eager"
alt="gfg"/>
<img src=
loading="eager"
alt="gfg"/>
</body>
</html>
|
Output:
NOTE: In browsers like chrome, the image loading is instant, so you might not be able to distinguish it. But the loading time is optimized.
Supported Browsers:
- Chrome 77.0 and above
- Edge 79.0 and above
- Firefox 75.0 and above
- Opera 64.0 and above
- Safari 15.4 and above