Performance (1/6)
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.