Lazy loading

Learn to lazy-load images with loading="lazy".

What does loading="lazy" do?

When a page opens, the browser starts downloading images at once. But the user cannot yet see the images below the fold. Add loading="lazy" to an <img> tag and the browser only fetches it when the user gets close.

This is called lazy loading. It speeds up the first paint and saves data. It helps most in image-heavy galleries and long articles.

When should you use it?

Lazy loading does not fit every image. Do not add lazy to images above the fold; the browser already fetches them at once and lazy may delay them.

But in long galleries, blog post images and content near the bottom, lazy works perfectly. Just write <img loading="lazy">; no script is needed.

Exercise Lazy-load the gallery

Body holds two <figure> blocks; each has an <img> and a <figcaption> inside. Add the loading="lazy" attribute to both <img> tags.

Show example solution

<body>
  <figure>
    <img src="/images/cat.jpg" alt="Street cat" loading="lazy">
    <figcaption>Street cat</figcaption>
  </figure>
  <figure>
    <img src="/images/dog.jpg" alt="Park dog" loading="lazy">
    <figcaption>Park dog</figcaption>
  </figure>
</body>

Test yourself

What does loading="lazy" do?
- Loads the image at page open
- Loads the image only when the user gets close
- Never loads the image
- Resizes the image
Show answer

Loads the image only when the user gets close — Correct. lazy fetches the image only when the user approaches.

Add loading to the img

<img src="/images/forest.jpg" alt="Forest" ____>

Show answer

<img src="/images/forest.jpg" alt="Forest" loading="lazy">

Match each loading value to its meaning

loading="lazy"

Lazy load
loading="eager"

Load at once
loading="auto"

Let browser choose

Next lesson: Decoding async

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies