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