Suggest an editImprove this articleRefine the answer for “What does the loading="lazy" attribute do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`loading="lazy"`** is an `<img>` tag attribute that enables deferred image loading: the browser loads the picture only when it comes near the user's viewport, not right away. **Key point:** it speeds up the page's initial render and saves bandwidth, so it should be used for images below the "first screen", but not for ones that are visible immediately.Shown above the full answer for quick recall.Answer (EN)ImageThe `loading="lazy"` attribute on the `<img>` tag enables **deferred image loading**: that is, the browser **does not load the picture right away**, but does so **only when it appears within the user's viewport** (or close to it). This is a powerful tool for **speeding up page loads** and **saving bandwidth**. --- ### 1. How `loading="lazy"` works By default, when the browser parses HTML: ```html <img src="photo.jpg" alt="Photo"> ``` it **immediately** starts loading `photo.jpg`, even if the picture is **at the very bottom of the page** and the user cannot see it yet. This slows down loading and wastes bandwidth for nothing. --- If you add: ```html <img src="photo.jpg" alt="Photo" loading="lazy"> ``` the browser: - skips loading the picture at the start, - waits until the user **scrolls the page** to the right spot, - and only then **loads the image**. In other words: "lazy loading" = load it when it's actually needed. --- ### 2. Usage example ```html <img src="header.jpg" alt="Main banner"> <img src="gallery1.jpg" alt="Photo 1" loading="lazy"> <img src="gallery2.jpg" alt="Photo 2" loading="lazy"> <img src="gallery3.jpg" alt="Photo 3" loading="lazy"> ``` The browser will load `header.jpg` right away, and the rest (`gallery1-3.jpg`) only **when scrolling down**. --- ### 3. Values of the `loading` attribute | Value | What it does | |---|---| | `lazy` | Loads the image when it is almost within the viewport | | `eager` | Loads immediately, without waiting for scrolling (default behavior for important images) | | `auto` | Lets the browser decide on its own (by default most images behave like `lazy`) | --- ### 4. When this is especially useful - on **long pages** with many images (blogs, catalogs, galleries); - in **online stores** (product cards load only when the user scrolls to them); - on **mobile devices**, where saving bandwidth matters; - on **landing pages** with a lot of graphics. --- ### 5. Advantages | Advantage | Description | |---|---| | Faster page load | Fewer requests at the start | | Less network load | Images load only "as needed" | | Bandwidth savings | Especially important on mobile | | Improved SEO | Google factors in loading speed (Core Web Vitals) | --- ### 6. Important nuance - Do not set `loading="lazy"` on **images that are visible right away** (for example, the logo, a banner in the header), they should load immediately (`loading="eager"` or no attribute at all). - Works in all modern browsers (Chrome, Edge, Firefox, Safari 15+). --- ### Summary: | Parameter | Value | |---|---| | Attribute | `loading` | | Main value | `"lazy"` | | What it does | Defers loading images until they appear within the viewport | | Purpose | Speed up page loading and reduce network load | | When to use | For images below the "first screen" | --- **In simple terms:** `loading="lazy"` tells the browser: > "Don't spend resources on pictures the user cannot see yet. > Load them later, when they are actually needed."For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.