The basic idea
Normally a browser fetches every image on the page right away. With lazy loading, images below the visible area are fetched later, as the visitor approaches them. Page weight at the start drops, and mobile users on weak connections get content sooner.
Modern browsers support this natively through the loading attribute on image and iframe tags. You add loading="lazy" and the browser handles the timing.
Never lazy load the main image at the top
The largest visible element, often a hero photo, should load as fast as possible. Delaying it makes your Largest Contentful Paint worse, since the browser waits to discover the image. Many site builders apply lazy loading to every image by default, including the first one.
For the hero image, use loading="eager" or leave the attribute off. Some setups also support fetchpriority="high" to tell the browser this file matters most.
Where lazy loading shines
It suits galleries, long blog posts, product grids, team pages and footers with logos. It also works on embedded videos and maps, which are heavy. A map placed low on the contact page does not need to load until someone scrolls to it.
For video, a common approach shows a thumbnail with a play button. The real player loads only on click. That can remove several hundred kilobytes from the first load.
Avoid layout jumps
Lazy loaded images can cause text to shift when they appear, unless the browser knows their size in advance. Always include width and height attributes, or set an aspect ratio in CSS, so space is reserved. This protects your layout stability.
Also provide alt text for each image. Lazy loading does not change accessibility needs.
How to check it works
Open the Network tab in your browser tools, filter by images, and reload without scrolling. You should see only the top images downloading. Scroll slowly and watch more appear. If everything loads at once, the feature is not active.
Plugins and themes sometimes load their own lazy loading script on top of the native feature. Having both can cause flicker or images that never appear. Pick one method and turn off the other.
Lazy loading and background images
The native loading attribute works on image and iframe tags, not on pictures set as CSS backgrounds. Many page builders use backgrounds for rows and sections, so those images load right away regardless. If a section background is large, either swap it for an image tag or use a builder setting that defers it.
This is also why a page can feel heavy even after you turn lazy loading on. Check the Network tab to see which big files still arrive at the start, and deal with them one at a time.
Finally, remember that a long page of lazy loaded images can feel jumpy if the visitor scrolls quickly and the files arrive late. Loading slightly before images enter the screen, which browsers do automatically, and keeping files small together keep the experience smooth on slow connections.
Common questions
Does lazy loading hurt SEO?
Not when done properly with standard attributes. Search engines can see images that load as they scroll into view. Avoid hiding images behind clicks with no real image tag.
Should every image be lazy loaded?
No. Leave the first screen of images alone and lazy load the ones below.
Does it work on old browsers?
Browsers that do not support it simply load images normally, so nothing breaks.
This guide is general information. Search engines change how they work and their guidelines; check Google's current documentation for your situation. Nobody can guarantee a ranking.