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
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.
Example Usage
In short: Use loading="lazy" to defer offscreen images until they are needed, improving performance and reducing unnecessary network requests.