Lazy Loading Images: When It Helps and When It Hurts
Lazy loading means the browser waits to download an image until the visitor is about to see it. Used well, it saves data and makes pages feel faster. Used everywhere, it can make your most important image appear later than it should. This guide explains where it helps and where it hurts.
What lazy loading is and how it works
Normally a browser starts downloading every image on a page almost immediately, even ones far below the screen that the visitor may never scroll to. Lazy loading changes that: images far from the viewport are fetched only when the visitor scrolls near them.
Modern browsers support this natively. Add loading="lazy" to an img element, for example <img src="photo.jpg" loading="lazy" width="800" height="600" alt="...">, and the browser takes care of the rest. WordPress adds this attribute to images by default.
Benefits and risks
Benefits
- Pages load their important content sooner, because fewer files compete for bandwidth at the start.
- Visitors who never scroll do not download images they never see, which saves data.
- Long articles, galleries and product lists become noticeably lighter.
Risks
- Lazy loading the first large image delays it and can worsen Largest Contentful Paint.
- Without dimensions, images pop in and push the content around, which raises layout shift.
- If images load too late, visitors see blank gaps while scrolling quickly.
- Some JavaScript lazy loading libraries hide the real image address from search engines.
The aim is to defer only what the visitor will not see straight away.
Where to use it and where not to
| Image | Lazy load? | Why |
|---|---|---|
| Hero or banner at the top | No | It is usually the LCP element and should load first |
| First image in a visible carousel slide | No | The visitor sees it immediately |
| Images further down the article | Yes | They are not needed until the visitor scrolls |
| Product grid beyond the first row | Yes | Saves bandwidth on long lists |
| Images inside hidden tabs or accordions | Yes | They are not visible until opened |
As a rule, images in the first screen of the page load normally, and everything else can be lazy.
Step by step: set it up correctly
- 1List the images on the page and mark which ones are visible without scrolling.
- 2Leave those without
loading="lazy". For the main image, addfetchpriority="high"as well. - 3Add
loading="lazy"to the rest. - 4Add
widthandheight(or a CSS aspect ratio) to every image. Resize Image shows the exact pixel size of each file. - 5Make each file light. Compress with Compress Image so images are cheap when they do load.
- 6Check plugins and themes. Some optimization plugins lazy load everything. Make sure the first image is excluded.
- 7Test on a phone with a throttled connection and scroll. Images should appear just before you reach them.
Native lazy loading or a JavaScript library?
- Native
loading="lazy": the simplest and safest choice. No extra code, supported by modern browsers, and search engines can find the images. It offers less control over how early images start loading. - A JavaScript library: gives control over thresholds and placeholders, but adds code to maintain and can hide image addresses from crawlers if the real URL is not in the HTML.
For most sites, native lazy loading is the right default.
Common mistakes
- Lazy loading the hero image. This is the most common and most costly mistake. See the guide to Core Web Vitals and images.
- Skipping dimensions, which causes layout shifts when images appear.
- Putting the real image address only in a data attribute, which search engines may not follow.
- Assuming lazy loading replaces optimisation. A heavy file is still heavy when it loads, so also resize and compress.
Frequently asked questions
Does lazy loading hurt SEO?
Native lazy loading does not hurt SEO, because search engines can find the images. Problems arise when the real image address is hidden in JavaScript, or when the main image is lazy loaded and slows down the page.
Should I lazy load every image?
No. Images visible on the first screen, especially the main one, should load normally. Lazy load the rest.
What does loading="lazy" do?
It tells the browser to delay downloading an image until the visitor scrolls near it. It works natively in modern browsers without any JavaScript.
Why do my lazy loaded images cause the page to jump?
The browser does not know the image size until it loads, so it cannot reserve space. Add width and height attributes, or a CSS aspect ratio, to every image.
Does WordPress lazy load images by default?
Recent versions add loading="lazy" to images automatically and try to avoid it on the first image. Check your page's HTML, since themes and plugins can change this.