In this section, we will learn what the loading attribute is and how to use it.

What is loading Attribute in HTML <img> Tag?

The loading attribute in HTML <img> element is used to set the rule on when the target image should be downloaded and rendered on the page.

Webpages typically have the size between 100Kb up to 1MB and more. This includes the images we use in those documents.

Loading the entire document in browsers at once is time-consuming especially if the target document is heavy. So as a result, this delay might create a bad user experience which is the only thing we don’t want for our website and brand!

So one thing we can do to improve the loading of a document and hence user experience is to defer loading of images. Basically, those images that users don’t need to see right away when the document is loaded could be set to download in later times and this gives the browsers to focus on loading other critical elements of the document as soon as possible.

Making images to delay is done via the `loading` attribute.

The loading attribute has a value “delay” which signals browsers to skip loading the target image until a condition in the document is met. For example, one of the conditions could be until users scroll or navigate to that image.

HTML loading Attribute in <img> Tag Syntax:

<img src = “image-address” loading = “eager | lazy”

<img> Tag loading Attribute Values

The values of the loading attribute are:

• eager: this is the default value, and it means the target image should be loaded as soon as possible.
• lazy: using this value means the target image should not be loaded until some conditions are met.

Example: using loading attribute in HTML <img> tag

See the Pen using loading attribute in HTML <img> tag by Omid Dehghan (@odehghan) on CodePen.