How does loading="lazy" work for images?

Lazy Loading Images in HTML

The loading="lazy" attribute in an <img> element tells the browser to defer loading the image until it is about to enter the viewport. This improves page load performance, reduces bandwidth usage, and speeds up rendering for images that are not immediately visible.

Key Points About lazy Loading

1
Images with loading="lazy" are not fetched until they are near the visible area of the page.
2
Helps reduce initial page load time, especially for pages with many images.
3
Supported in most modern browsers without the need for JavaScript.
4
Can be combined with responsive images and placeholders for better UX.

Example Usage

In short: Use loading="lazy" to defer offscreen images until they are needed, improving performance and reducing unnecessary network requests.

Difficulty: 3/10

Topics: native lazy loading, performance optimization, Core Web Vitals

Scenario Questions

0-2 years experience

1
You're adding images to a long blog article. How would you implement lazy loading for them, and what's the one attribute you need?
2
A teammate added loading='lazy' to every image on a page, including the hero banner. Users complain the hero loads slowly. What's the issue and how do you fix it?
3
You inspect an image with loading='lazy' in DevTools Network tab and see it never loads, even after scrolling. What are two things you'd check?

2-5 years experience

1
Your image gallery uses loading='lazy' but users report a flash of empty space before images appear. What causes this and how do you fix it without removing lazy loading?
2
After enabling native lazy loading site-wide, your LCP metric regressed on product detail pages. Walk me through how you'd diagnose and resolve this.
3
You need to support IE11 for a client. How would you implement a fallback lazy-loading strategy that mirrors native behavior?

5-8 years experience

1
Design a lazy-loading strategy for an infinite-scroll feed with 200+ product images. How do you balance bandwidth savings, perceived performance, and CLS prevention?
2
Your team wants to default all <img> tags to loading='lazy' via a base component. What are the risks of this approach, and what guardrails would you put in place?
3
How would you measure the real-world impact of native lazy loading vs your previous IntersectionObserver-based polyfill across different network conditions?

8+ years experience

1
You're migrating 50+ micro-frontends from a custom JS lazy-loading library to native loading='lazy'. What's your rollout strategy to ensure zero regressions and consistent behavior?
2
Analytics show native lazy loading hurts conversion on mobile checkout pages due to delayed product image renders. How do you investigate, and what org-wide policy would you propose?
3
How would you establish a cross-team imaging standard that defines when to use eager, lazy, or fetchpriority='high' — and how do you enforce it in CI/CD?

Follow-up Questions

❓What happens if you put loading='lazy' on an image that's already in the initial viewport?
❓How does this interact with the fetchpriority attribute?
❓Can you lazy-load a background-image set via CSS?