You added lazy loading to images, and now some images do not appear. Or they load late, break the layout, or fail on mobile. Lazy loading is useful, but it can break images if configured incorrectly. This guide explains why lazy loading breaks images and how to fix it.
What lazy loading does
Lazy loading delays loading images until they are needed. This reduces initial page weight and speeds up loading.
How it works:
— images below the fold are not loaded initially;
— they load when they approach the viewport;
— this saves bandwidth and improves performance.
But lazy loading can break images if the browser does not load them correctly.
Why lazy loading breaks images
Problems occur when:
— images never enter the viewport;
— JavaScript fails to trigger loading;
— the placeholder is missing;
— the LCP image is lazy-loaded;
— the browser does not support lazy loading.
These issues can cause images to disappear, load late, or break the layout.
Reason 1: LCP image lazy-loaded
The most common issue. The main image above the fold is lazy-loaded, which delays LCP and can make the image appear late or not at all.
What to check:
— which image is LCP;
— is it lazy-loaded;
— does it load immediately.
The fix: remove lazy loading from the LCP image. Use preload and fetchpriority="high".
Use lazy loading images checker to see which images are lazy-loaded.
Reason 2: missing placeholder
Without a placeholder, the image area collapses until the image loads. This causes layout shift.
What to check:
— is there a placeholder;
— are width and height set;
— is aspect ratio defined.
The fix: set width and height, or use aspect-ratio in CSS.
Reason 3: JavaScript fails
If lazy loading relies on JavaScript and it fails, images may never load.
What to check:
— is lazy loading native or JavaScript-based;
— are there JavaScript errors;
— does lazy loading work without JavaScript.
The fix: use native loading="lazy" where possible. Add fallbacks for JavaScript-based lazy loading.
Reason 4: images never enter viewport
Images in hidden tabs, carousels or off-screen containers may never load.
What to check:
— are images in hidden containers;
— do they load when container is shown;
— is lazy loading triggered correctly.
The fix: trigger loading when container becomes visible. Use Intersection Observer or similar.
Reason 5: browser does not support lazy loading
Older browsers may not support native lazy loading. Images may not load.
What to check:
— which browsers are supported;
— does native lazy loading work;
— is there a fallback.
The fix: use a polyfill or JavaScript-based lazy loading for older browsers.
How to diagnose lazy loading issues
A practical sequence:
— check which images are lazy-loaded;
— check LCP image;
— check placeholders;
— check JavaScript errors;
— check hidden containers;
— test in different browsers.
If images do not load, the issue is likely in lazy loading configuration. For a broader audit, SEO audit can help verify images, Core Web Vitals and performance in one place.
How to fix lazy loading issues
Fix steps:
— remove lazy loading from LCP image;
— add placeholders;
— use native lazy loading;
— trigger loading for hidden containers;
— add fallbacks for older browsers;
— test after changes.
FAQ
Why does lazy loading break images?
Most often because the LCP image is lazy-loaded, placeholders are missing, JavaScript fails, or images never enter the viewport.
Should I lazy-load the LCP image?
No. The LCP image should load immediately. Use preload and fetchpriority="high".
Does lazy loading affect SEO?
Indirectly. If images break or LCP is delayed, Core Web Vitals suffer, affecting rankings.
What is native lazy loading?
It is loading="lazy" in the img tag. Supported by modern browsers.
Can lazy loading cause layout shift?
Yes, if placeholders or dimensions are missing. Set width and height to prevent shift.
Why do images in carousels not load?
Because they are in hidden containers. Trigger loading when the container becomes visible.
Do older browsers support lazy loading?
Not all. Use a polyfill or JavaScript-based lazy loading for older browsers.
How do I check if images are lazy-loaded?
Use a lazy loading checker or inspect the HTML for loading="lazy".
Can lazy loading break other resources?
Yes. Lazy loading can be applied to iframes and videos too. Check all resources.
What if only some images break?
Check those images for lazy loading configuration, placeholders and container visibility.
