What lazy-loading changes
A browser normally discovers image elements as it reads a page and begins fetching their files when it can. Adding loading="lazy" to an image asks the browser to defer its download until the image is near the viewport. The browser decides what counts as “near,” so lazy-loading is not a promise that a request will wait until the image is visible. Its value is simpler: images far down a page may not compete with the content a visitor wants to see first.
Consider a long product guide with a heading, one prominent image, and twenty illustrated steps. Loading all twenty-one images immediately could use bandwidth on steps the visitor never reaches. Deferring the later illustrations can reduce initial network work. But applying the same setting to every image, including the prominent one, may delay the very content that makes the page feel ready.
Load immediately when the image matters at the start
Images visible in the initial viewport are usually poor lazy-loading candidates. That includes a hero image, a product photo beside the page title, or a chart that explains the opening text. On many pages, a large visible image can be the element used to measure Largest Contentful Paint (LCP). If its request starts late, that measurement—and the visitor’s experience—can suffer.
For these images, leave off loading="lazy" or set loading="eager". If one image is especially important, fetchpriority="high" can provide an additional priority hint, but use it sparingly: marking many images as high priority makes the hint less useful. Also check how the image is discovered. An image in the initial HTML is generally easier for the browser to find early than one inserted later by JavaScript.
“Above the fold” is not a fixed line. A desktop layout may show a photo immediately while a narrow phone layout places it below several paragraphs. If the same image is important on common screen sizes, a small amount of extra downloading may be preferable to delaying it for some visitors.
Defer images people reach by scrolling
Images well below the first screen are good candidates for loading="lazy". Typical examples include photos in later article sections, cards deep in a listing, and thumbnails in a long gallery. Native lazy-loading is a practical starting point because it requires only an attribute on each img element and lets the browser choose when to request the file.
Be cautious with images just below the initial viewport. If a visitor is likely to scroll to them immediately, delaying the request can leave a blank space or placeholder. Test these borderline cases on a slower connection and a narrow screen rather than relying on a desktop preview. The right choice depends on the page layout and how people use it.
Lazy-loading does not replace image optimization. Serve appropriately sized files, use responsive image options such as srcset and sizes where useful, and choose a suitable format and compression level. A deferred oversized image is still oversized when it finally downloads.
Keep the layout stable while images arrive
Reserve space for every image, including lazy-loaded ones. Set width and height attributes that reflect its aspect ratio, or establish an aspect ratio in CSS. The browser can then lay out the page before the file arrives. Without reserved space, later images may push text and controls around as a visitor scrolls.
A placeholder can show where an image will appear, but it should not become an obstacle. Avoid effects that hide an already downloaded image until an animation finishes, especially for prominent content. If an image carries meaning—a diagram, for example—give it useful alternative text. Loading behavior should not determine whether someone can understand the page.
Check the result, not just the attribute
Test a page with the viewport sizes and connection conditions your audience might use. In browser developer tools, watch when image requests begin and whether a visible image waits longer after lazy-loading is added. Compare the experience at the top of the page and during a quick scroll. If a prominent image appears late, load it eagerly; if distant images download before they are needed, consider deferring them.
Native lazy-loading is not equally applicable to every visual. CSS background images do not use the img loading attribute, and images added by scripts may have their own timing and discovery problems. Start with the simplest approach for ordinary img elements, then consider more involved loading logic only when a specific layout needs it. The goal is not to maximize the number of lazy-loaded images. It is to deliver the images people need now without making them wait for images they might never see.
