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 |