HTML <img> loading Attribute
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
<img src="url" loading="auto|eager|lazy">
- 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.
Example 2: This example illustrates the use of both the auto & eager loading attribute.
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.
- Chrome 77.0 and above
- Edge 79.0 and above
- Firefox 92.0 and above