## Image placeholders and lazy loading URL: https://hub.jkdevstudio.com/knowledge-base/performance/lqip-media-integration Updated: 2026-09-06 Summary: Show a blurred preview while an image loads, stop the page from jumping, and know when to switch it off. Instead of an empty rectangle where an image will be, the reader sees a blurred miniature of it, which then resolves into the full photo. The miniature is a tiny copy of the image, small enough to arrive almost instantly, shown while the real one loads. ## Why this is not decoration Two reasons, and both are measurable. **The page stops jumping.** The space for each image is claimed from the start, so text does not slide down when the photo finally arrives. That is [Cumulative Layout Shift](https://web.dev/articles/cls), one of the Core Web Vitals every page speed tool scores you on. **The page looks loaded sooner.** The reader sees the composition immediately rather than a grid of empty rectangles, and the same page subjectively feels faster than one without placeholders. ## Lazy loading, which comes with it Images below the fold are not downloaded at all until the reader scrolls to them. The placeholder holds their place for the whole time. The result: opening a page pulls down exactly what is visible, instead of the entire gallery at once. The images themselves are served as a `` with modern formats offered first, so a browser that understands AVIF or WebP takes the smaller file and everything else falls back to what you uploaded. ## Settings There are few of them, on the integration page in the theme settings. They cover how the placeholders behave rather than requiring a decision per image. The placeholder miniatures are generated from your existing image sizes, which is why [thumbnail regeneration](/knowledge-base/tutorial/wordpress-image-sizes) affects them. ## When to switch it off An honest boundary: if you already run a separate image optimization plugin with its own lazy loading, two mechanisms on the same image conflict with each other. The usual symptom is images that never resolve, or that flash. Keep one of them. Which one does not matter much, as long as it is only one. ## Integrations are part of the theme
**This integration is licensed with the theme, not on its own.** Integrations are premium functionality for customers running a Pro license of one of our themes. They are written against our themes and expect them, and we cannot support or take responsibility for what one does inside somebody else's theme. See [how theme integrations work](/knowledge-base/integration/how-theme-integrations-work).
## Common questions
Does this make my images smaller? Not on disk: it changes when and in which format they load, while compressing the originals is a different job that an optimization plugin does.
Will search engines see my images? Yes, lazy loading is a standard technique that crawlers have handled for years, and the images are ordinary markup rather than something assembled in JavaScript.
My placeholders are missing on some images The placeholder is generated from a registered image size, so an image uploaded before that size existed has no miniature to show and needs its thumbnails regenerated.
Does it work on background images? It applies to images the theme renders as images, and a CSS background is not one of those, which is worth knowing before wondering why a hero section behaves differently.
Images do not load at all Test for a conflict with another lazy loading mechanism first: deactivate the other plugin's lazy loading and reload, and if the images come back then that was it. Two mechanisms on one image is the single most common cause here, and the fix is to keep exactly one of them.
## Still stuck [Open a support ticket](https://hub.jkdevstudio.com/support) with a link to the page and the names of any optimization or caching plugins you run.