Lazy loading and image placeholders are two ways to make an image-heavy page feel faster. Lazy loading holds back the images nobody can see yet, and a placeholder fills an image's slot while the real file is still on its way. This page explains both, where each one helps, and where each one hurts.
#What lazy loading is
Lazy loading means an image is downloaded when the visitor is about to see it, instead of the moment the page opens. On a long page with thirty images the first screen might need three, and the other twenty seven can wait.
Browsers do this on their own. An image marked with loading="lazy" is held back until it comes within a set distance of the visible part of the page, and every current major browser supports the attribute, as MDN's lazy loading guide describes.
<img src="photo.jpg" alt="A description of the photo" width="1200" height="800" loading="lazy">
The distance is generous on purpose. Chrome starts fetching a lazy image roughly 1,250 pixels before it reaches the screen on a fast connection and 2,500 pixels on a slow one, so the file is usually ready by the time it scrolls into view (web.dev). Native lazy loading needs no script.
WordPress adds loading="lazy" to images in post content automatically, and has done so since version 5.5.
What it saves: the bytes of every image the visitor never scrolls to, and the network time at the start of the page load, which goes to the images that are actually on screen.
#Never lazy load the image at the top of the page
The largest image visible when a page opens, usually the hero or the featured image, is very often what Largest Contentful Paint measures. LCP is one of the Core Web Vitals, and page speed tools score it.
A lazy image is not requested until the browser has worked out that it is in view, so lazy loading the hero makes the most important image on the page arrive later. When WordPress first lazy loaded every content image, archive pages measured roughly 13 to 15 percent slower LCP, and skipping the first images brought the speed back while keeping the savings (web.dev study).
Load the first screen normally and lazy load everything below it.
An image a visitor sees without scrolling gets nothing from lazy loading and loses time to it. The fetchpriority attribute works in the other direction: high tells the browser one image matters more than the rest, and low tells it an image can wait.
#What a low quality image placeholder is
A low quality image placeholder, or LQIP, is a tiny copy of the real image, often a few dozen pixels across, stretched over the image's slot and blurred. It weighs almost nothing, so it appears nearly at once. When the full image has loaded it replaces the preview, usually with a short fade, which is why the effect is called blur-up.
It helps in two ways:
- The wait feels shorter. The visitor sees the colors and the composition of the page straight away instead of a grid of empty boxes. The real image arrives no sooner, but the page reads as loaded earlier.
- Lazy loading looks better. An image that arrives a moment after it scrolls into view shows its preview instead of a hole.
A placeholder on its own does not stop the page jumping. Reserving the space does.
#Width and height stop the page jumping
When the browser does not know how big an image is, it lays the page out as if the image had no height and pushes the text down once the file arrives. That movement is measured as Cumulative Layout Shift, another Core Web Vital.
Giving every image width and height attributes lets the browser work out its proportions and reserve the slot before a single byte of the image has arrived. The numbers do not fix the displayed size, CSS still does that; they only supply the aspect ratio. Optimizing CLS on web.dev covers it in detail. This is the baseline every image should have, with or without a placeholder, and it gives a placeholder a box of the right shape to fill.
#Other placeholder techniques
- Empty reserved box
Width and height plus a neutral background. No preview at all, but no layout shift either.
- Dominant color
The slot is filled with one color taken from the image. The cheapest preview, since it is a single color value, and it says the least about the picture.
- Blurred miniature (LQIP)
The technique described above. It costs a very small extra file, or a little inline data, per image.
- Progressive sharpening
Several previews of increasing sharpness shown in turn before the original. Smoother to watch, at the cost of a few more small requests.
A related technique serves the same image in a smaller modern format, such as AVIF or WebP, through the picture element, with the original as a fallback for browsers that cannot read it.
#The trade-offs
- Lazy loading the wrong image slows the page. Anything on the first screen should load normally.
- Script-based lazy loading has a dependency. Some implementations hold back the image address itself and let a script fill it in when the image comes into view. That gives finer control, for example over slides hidden off the side of a slider, but without JavaScript those images never load.
- Placeholders add a little weight. Each preview is a small extra file or a little inline data, and a blur-up that relies on a script needs that script to run.
- Two mechanisms on one image conflict. A theme feature and an optimization plugin both lazy loading the same images can leave pictures blurred, flashing, or missing. Keep exactly one.
- Search engines need to be able to see the images. Google handles lazy loaded images when they load as they enter the viewport, and its lazy loading guidance lists what it needs.
#How our themes handle it
Our themes offer blurred placeholders, lazy loading and slider-aware image loading through the LQIP Media integration. Its settings, the one-time thumbnail regeneration, and when to switch parts of it off are in its own article.
#Common questions
Does lazy loading hurt SEO?
Not when images load as they come into view. Native lazy loading is plain HTML that search engines understand, and Google documents what a script-based approach has to do in its lazy loading guidance.
Should I lazy load every image?
No. Images a visitor sees without scrolling, and the hero image above all, should load normally. Lazy loading them makes the page slower.
Does a blurred placeholder make images load faster?
No. The full image takes as long as it did before. The placeholder changes what the visitor looks at in the meantime, and together with width and height it keeps the layout still.
Is the loading attribute enough on its own?
For most sites it covers the savings. Placeholders, finer control over sliders and image format fallbacks are what a theme feature or a plugin adds on top of it.
My whole site is slow, not only the images
Images are one part of page speed. Making a WordPress site faster covers the rest, from hosting to caching.
#Still stuck
Open a support ticket and say what you tried and where it stopped. Your product, your domain, a screenshot and the exact message you saw are usually enough to settle it in one reply.
Last updated
