How to add HTML <img> loading Attribute

Add lazy loading to images below the fold:

he 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 Values

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

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The img loading attribute</h1>

<!-- visible in viewport -->
<img src="https://horje.com/avatar.png" alt="Wedding" style="width:100%">
<img src="https://horje.com/avatar.png" alt="Rocks" style="width:100%">
 
<!-- off-screen images -->
<img src="https://horje.com/avatar.png" alt="Paris" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Nature" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Underwater" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Ocean" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Mountains" style="width:100%" loading="lazy">

</body>
</html>

Output should be:

Type:	html
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin