Lazy loading delays images until a visitor scrolls near them, and responsive images (srcset) let the browser download a smaller file on small screens. WordPress does both automatically: it has added srcset to images since version 4.4, native lazy loading since 5.5, and fetchpriority for the main image since 6.3. Your job is to upload images large enough for the biggest display size but not huge, make sure the first visible image is not lazy-loaded, and avoid plugins or page builders that break these defaults.
- Lazy-load everything below the fold, never the hero image.
- srcset lets phones download small files and big screens get sharp ones.
- WordPress creates several sizes of every image you upload.
- Background images set in CSS skip both features, so use them carefully.
- Upload sensible sizes with the free Image Compressor.
One page, two very different downloads
Imagine two visitors opening the same blog post at the same moment: one on a 27-inch monitor in an office in Gulshan, one on a budget Android phone on a bus to Mymensingh. Without responsive images, both download the same 1920-pixel images, and the phone user waits and pays for data they never see. Without lazy loading, both download all 25 images in the post, even though most people stop reading halfway.
With srcset and lazy loading working properly, the phone gets small files and only the images actually scrolled to. Same page, a fraction of the data.
How lazy loading works
Images get the attribute loading="lazy". The browser then waits to download them until they are close to appearing on screen. It is built into modern browsers, so no JavaScript plugin is needed.
| Image | Lazy-load? |
|---|---|
| Hero or banner at the top | No. Load it immediately with high priority |
| Logo in the header | No |
| Images further down the article | Yes |
| Product grid below the first row | Yes |
| Footer images and badges | Yes |
How srcset works
When you upload an image, WordPress creates several copies at different widths (such as thumbnail, medium, large and some extra sizes). In the page, it lists them in a srcset attribute with a sizes hint, and the browser picks the smallest file that still looks sharp on that screen.
<img src="photo-1024.jpg"
srcset="photo-300.jpg 300w, photo-768.jpg 768w, photo-1024.jpg 1024w, photo-1536.jpg 1536w"
sizes="(max-width: 768px) 100vw, 768px"
width="1024" height="683" loading="lazy" alt="...">Getting it right in WordPress
- Upload a sensible originalAbout 1920 to 2560 pixels wide for large images, already compressed. WordPress makes smaller sizes from it.
- Insert images normallyUse the image block or your page builder’s image widget rather than pasting HTML, so WordPress can add srcset.
- Check the heroView the page source or run PageSpeed Insights. The first large image should not have loading=”lazy” and ideally has fetchpriority=”high”.
- Watch your pluginsIf a speed plugin also lazy-loads images, make sure it excludes the first images and does not double up.
- Keep width and heightThese attributes reserve space so the layout does not jump while images load.
Common problems
- Blurry images: the uploaded original was too small, so WordPress has no large version to offer.
- Slow LCP: the hero image is lazy-loaded. See images and LCP.
- Layout shift: missing width and height attributes.
- Huge uploads folder: very large originals multiplied by many generated sizes. Compress before uploading.
Related guides
Read our WordPress image optimisation guide and ideal image sizes for websites. Need help with a slow WordPress site? Get a quick quote.
Sources
Frequently asked questions
Does WordPress lazy-load images automatically?
Yes. Since WordPress 5.5, images get native lazy loading by default, and newer versions avoid lazy-loading the first large image.
Should I lazy-load my hero image?
No. The first visible image should load immediately, ideally with high fetch priority, or your LCP score suffers.
What is srcset?
An HTML attribute that lists several sizes of the same image so the browser can download the smallest one that looks sharp on the current screen.
Why are my WordPress images blurry?
Usually the uploaded original was too small. Upload a large enough image (around 1920 to 2560 pixels for big images) and let WordPress create smaller sizes.
Do background images support lazy loading?
Not natively. CSS background images do not get srcset or loading=”lazy”, so use them carefully for large photos.
Shrink photos for websites, email and forms in seconds, privately in your browser.
Guides for this tool
Guide · 3 min readLossy vs Lossless Compression: Which Should You Use for Images?
Guide · 3 min readHow to Email Large Photos: Make Images Small Enough to Send
Guide · 3 min readHow to Send High-Quality Photos on WhatsApp (HD and Original)
Guide · 3 min readWordPress Image Optimisation: Speed Up Your Website (2026 Guide)Want a tool, website or app like this for your business?
Every free tool on this site is designed and coded by Tanvir H, a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience and 650+ projects for clients worldwide. Fast, mobile-first, search-optimised websites that turn visitors into customers.
- 650+ projects
- 7+ years
- 4.9★ rating
- Govt. registered freelancer
