What does the loading="lazy" attribute do?
The loading="lazy" attribute on the <img> tag enables deferred image loading: that is, the browser does not load the picture right away, but does so only when it appears within the user's viewport (or close to it).
This is a powerful tool for speeding up page loads and saving bandwidth.
1. How loading="lazy" works
By default, when the browser parses HTML:
<img src="photo.jpg" alt="Photo">it immediately starts loading photo.jpg, even if the picture is at the very bottom of the page and the user cannot see it yet.
This slows down loading and wastes bandwidth for nothing.
If you add:
<img src="photo.jpg" alt="Photo" loading="lazy">the browser:
- skips loading the picture at the start,
- waits until the user scrolls the page to the right spot,
- and only then loads the image.
In other words: "lazy loading" = load it when it's actually needed.
2. Usage example
<img src="header.jpg" alt="Main banner">
<img src="gallery1.jpg" alt="Photo 1" loading="lazy">
<img src="gallery2.jpg" alt="Photo 2" loading="lazy">
<img src="gallery3.jpg" alt="Photo 3" loading="lazy">The browser will load header.jpg right away,
and the rest (gallery1-3.jpg) only when scrolling down.
3. Values of the loading attribute
| Value | What it does |
|---|---|
lazy | Loads the image when it is almost within the viewport |
eager | Loads immediately, without waiting for scrolling (default behavior for important images) |
auto | Lets the browser decide on its own (by default most images behave like lazy) |
4. When this is especially useful
- on long pages with many images (blogs, catalogs, galleries);
- in online stores (product cards load only when the user scrolls to them);
- on mobile devices, where saving bandwidth matters;
- on landing pages with a lot of graphics.
5. Advantages
| Advantage | Description |
|---|---|
| Faster page load | Fewer requests at the start |
| Less network load | Images load only "as needed" |
| Bandwidth savings | Especially important on mobile |
| Improved SEO | Google factors in loading speed (Core Web Vitals) |
6. Important nuance
- Do not set
loading="lazy"on images that are visible right away (for example, the logo, a banner in the header), they should load immediately (loading="eager"or no attribute at all). - Works in all modern browsers (Chrome, Edge, Firefox, Safari 15+).
Summary:
| Parameter | Value |
|---|---|
| Attribute | loading |
| Main value | "lazy" |
| What it does | Defers loading images until they appear within the viewport |
| Purpose | Speed up page loading and reduce network load |
| When to use | For images below the "first screen" |
In simple terms:
loading="lazy" tells the browser:
"Don't spend resources on pictures the user cannot see yet. Load them later, when they are actually needed."
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.