How does loading="lazy" work for images?

Q: How does loading="lazy" work for images?

The `loading="lazy"` attribute in an ` ` 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. Images with `loading="lazy"` are not fetched until they are near the visible area of the page. Helps reduce initial page load time, especially for pages with many images. Supported in most modern browsers without the need for JavaScript. Can be combined with responsive images and placeholders for better UX. In short: Use `loading="lazy"` to defer offscreen images until they are needed, improving performance and reducing unnecessary network requests.

Difficulty: 3/10

native lazy loading, performance optimization, Core Web Vitals

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.

Scenario Questions

0-2 years experience

1You're adding images to a long blog article. How would you implement lazy loading for them, and what's the one attribute you need?
2A 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?
3You 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?

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?