How to Lazy Load Images (Native, WordPress and Lazysizes) 2026

Want to lazy load images to speed up your site? Lazy loading means images further down the page load only when a visitor scrolls near them, so the first screen appears faster and you save bandwidth. In 2026 you don’t need a script for this anymore: every modern browser supports native lazy loading with one HTML attribute, and WordPress adds it for you. Here’s how to lazy load images the right way, without hurting your Core Web Vitals.

Quick answer: Add loading="lazy" to images below the fold, set their width and height, and never lazy load your main (LCP) image. Give that hero image fetchpriority="high" instead.

1. Lazy load images with the native loading attribute

Native lazy loading works in Chrome, Edge, Firefox and Safari. Just add the attribute to your image tag:

<img src="photo.jpg" alt="Photo" width="800" height="450" loading="lazy">

It also works for iframes, such as embedded YouTube videos and maps:

<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>

Always include width and height (or a CSS aspect ratio) so the page doesn’t jump as images load. That shifting is measured as Cumulative Layout Shift (CLS). See the MDN guide to lazy loading for the full browser details.

2. Don’t lazy load the LCP image

This is the most common mistake. Your largest above-the-fold image, usually the featured or hero image, is the Largest Contentful Paint (LCP) element in Core Web Vitals. If it’s lazy loaded, the browser waits before fetching it and your LCP gets worse. Load it normally and tell the browser it’s important:

<img src="hero.jpg" alt="Hero" width="1200" height="630" fetchpriority="high">

Google’s web.dev guide recommends lazy loading only images outside the first viewport.

3. Lazy loading in WordPress

WordPress has added loading="lazy" to images automatically since version 5.5. Since WordPress 6.3, it also skips lazy loading for the first images on a page and adds fetchpriority="high" to the image most likely to be the LCP. So on a standard WordPress site, you often don’t need to do anything.

Caching and speed plugins can go further, lazy loading background images, iframes and video thumbnails:

• LiteSpeed Cache (which we use on this site): Page Optimization → Media Settings → Lazy Load Images. Add your logo and hero image classes to the exclude list.
• W3 Total Cache, WP Rocket and Perfmatters have similar lazy load options.

Don’t enable lazy loading in two plugins at once, as they can conflict and break images.

4. Lazy load images with Lazysizes (JavaScript option)

Before native support, we used the lazysizes script, and it’s still useful for background images, responsive images with complex srcset, or extra effects. It’s SEO-friendly because Googlebot can still see the images.

1. Add the script, for example from cdnjs:
   <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>
2. Change src to data-src (and srcset to data-srcset) on images you want to defer.
3. Add the lazyload class:
   <img data-src="image.jpg" data-srcset="image2x.jpg 2x" class="lazyload" alt="Image">

Lazysizes also supports native lazy loading through its nativeLoading plugin, so you get both. For most sites, though, the native attribute alone is simpler and faster.

5. Test your lazy loading

Run your page through PageSpeed Insights or other site speed tests. Check for warnings like “Largest Contentful Paint image was lazily loaded” and “Defer offscreen images”. In Chrome DevTools, open the Network tab, filter by Img and scroll: images should appear only as you reach them.

Frequently asked questions

Is lazy loading good for SEO?

Yes, when done properly. Native lazy loading and lazysizes both let Googlebot find images. Just don’t lazy load the main image, and make sure images have proper src or data-src URLs and alt text.

Should I lazy load all images?

No. Lazy load images below the fold only. Images in the first screen, especially the LCP image and logo, should load immediately.

Does lazy loading work on mobile?

Yes. All modern mobile browsers support the loading attribute, and it saves the most data on mobile connections.