Detailed explanation
Native image lazy loading uses the loading="lazy" attribute on an <img> element to let the browser defer fetching an image until it is near the visible viewport. For example: <img src="large-photo.jpg" loading="lazy" width="800" height="600" alt="Product photo">. No JavaScript library or scroll-event handler is required. This is useful for product listings, article illustrations, and galleries where many images initially sit below the fold. Deferring these requests reduces initial network traffic and avoids fetching some images that users never scroll far enough to see.
Under the hood, the browser determines when a deferred image should start loading based on its distance from the viewport and browser-specific heuristics, which may account for network conditions. It usually fetches images before they become visible, rather than waiting for their exact entry into the viewport. The attribute is therefore a scheduling hint, not a precise scroll threshold that developers can configure. loading="eager" requests normal loading without this deferral and is the default behaviour when the attribute is omitted. Browsers without support ignore the attribute and load images normally.
Always provide appropriate alternative text and preferably explicit width and height attributes. These dimensions let the browser calculate the image’s aspect ratio and reserve space before the file arrives, reducing layout shifts. Responsive CSS such as max-width: 100%; height: auto; can still resize the image while preserving that ratio. Native lazy loading also works with responsive image selection through srcset and sizes; those attributes determine which resource is appropriate, while loading influences when it is fetched. Lazy loading alone does not compress images or reduce their file sizes.
In an interview, the important judgement is knowing which images should not be lazy-loaded. Keep initially visible, important images—especially a hero image likely to become the Largest Contentful Paint element—on normal loading, because deferring them can worsen perceived performance. For a genuinely critical image, fetchpriority="high" may additionally signal higher request priority, but it is separate from lazy loading. Verify behaviour using browser developer tools: inspect image requests while scrolling and check both loading performance and layout stability.
Key points to remember
- Add loading="lazy" to <img> to defer offscreen image requests without JavaScript.
- The browser controls the loading distance; images usually begin fetching before becoming visible.
- Specify width and height to reserve layout space, and provide appropriate alt text.
- Avoid lazy-loading above-the-fold critical images, particularly the likely LCP image.
- Combine lazy loading with srcset, sizes, and optimised image files for complementary performance benefits.
Common mistakes candidates make
- Applying loading="lazy" to every image, including the main hero image.
- Omitting image dimensions and allowing late-loading images to shift surrounding content.
- Claiming images load only when visible or that loading="lazy" provides a configurable distance threshold.
Likely follow-up questions
How is loading="lazy" different from decoding="async"?
loading="lazy" influences when an image is fetched. decoding="async" hints that the browser may present other content without waiting for image decoding; it does not defer the network request.
Can native HTML lazy loading be applied to CSS background images?
The loading attribute does not apply to CSS background images. If explicit viewport-based deferral is required, use a technique such as IntersectionObserver to apply the background when its element approaches the viewport.
When would you use IntersectionObserver instead?
Use it when you need custom loading thresholds, background-image loading, or additional actions as elements approach the viewport. For ordinary <img> elements, native lazy loading is usually simpler and requires less code.
Interview tip: Show the attribute in a small HTML example, then explain browser-controlled timing, reserved dimensions, and why critical images should load normally.