YouTip

# HTML `` loading Attribute The `loading` attribute on an `` element specifies whether the browser should load an image immediately or defer its loading until the user scrolls near it. This native lazy-loading capability helps optimize page load times, reduce bandwidth usage, and improve overall performance without relying on complex JavaScript libraries. --- ## Syntax ```html ``` --- ## Attribute Values | Value | Description | | :--- | :--- | | `eager` | **Default.** Loads the image immediately, regardless of where it is positioned on the page (even if it is off-screen). | | `lazy` | Defers loading of the image until it reaches a calculated distance from the viewport (as the user scrolls down). | --- ## Code Example In the following example, the first two images load immediately when the page is opened. The subsequent images are configured with `loading="lazy"`, meaning they will only be downloaded and rendered when the user scrolls down near their position. ```html ``` --- ## Best Practices & Considerations To ensure the best user experience and performance when using native lazy loading, keep the following points in mind: ### 1. Always Include `width` and `height` Attributes When using `loading="lazy"`, always define explicit `width` and `height` attributes (or use CSS aspect-ratio) on your `` tags. This allows the browser to calculate the image's aspect ratio and reserve the correct layout space before the image actually downloads, preventing sudden layout shifts (Cumulative Layout Shift, or CLS) when the image loads. ```html ``` ### 2. Avoid Lazy Loading Above-the-Fold Images Do not apply `loading="lazy"` to images that are visible in the viewport immediately upon page load (such as hero images, logos, or top banners). Doing so can delay the rendering of these critical visual elements, negatively impacting your site's **Largest Contentful Paint (LCP)** metric. Keep these images set to `loading="eager"` (or omit the attribute, as `eager` is the default). ### 3. Browser Support Native image lazy loading is widely supported across all modern web browsers, including Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari, and Opera. If a legacy browser does not support the `loading` attribute, it will simply ignore it and load the image immediately (falling back to default `eager` behavior) without breaking your page.