Lazy Loading images in HTML

Last Updated : 29 Jul, 2024

What is Lazy Loading?

Lazy loading is a strategy to identify resources as non-critical and load these only when needed. It's a way to optimize web pages, which translates into reduced page load times. To read more about it: https://www.geeksforgeeks.org/what-is-lazy-loading/

Generally images are larger in size, so lazy loading can be used to defer the offscreen images.

Difference from JavaScript solutions ?

There are many JavaScript solutions to support lazy loading but recently browsers have also started to implement lazy loading of images and iframes. Using browser method is more performance but it is not fully supported right now.

Approach: To use Lazy Loading, use the loading attribute of image tag in html. Here are the supported values for the loading attribute:

auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
eager: Load the resource immediately, regardless of where it's located on the page.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <title>Lazy Loading Images</title>
</head>

<body>
    <h1>Lazy Loading Images</h1>

    <!-- loading attribute of image tag is 
        used to specify lazy loading -->
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171634/1.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171633/2.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171632/3.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171631/4.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171629/5.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171628/6.jpg"
        alt="numbers" loading="lazy"
        width="300" height="300"
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171627/7.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171626/8.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171625/9.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171623/10.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />
        
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171622/11.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171621/12.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171620/13.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171619/14.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171618/15.jpg"
        alt="numbers" loading="lazy" 
        width="300" height="300" 
        style="display:block; margin:10px" />
</body>

</html>

Output:

How to use SVG Images in HTML?

gsshaurya

Improve

Article Tags :

Lazy Loading images in HTML

Similar Reads

Thank You!

What kind of Experience do you want to share?