Image Placeholders (LQIP / BlurHash)
Show a blurred or color-matched placeholder while full images load to eliminate jarring empty space.
Metrics
This technique does not move LCP.
This technique does not move TBT.
This technique can move up to 33% of CLS's share of the Lighthouse score.
This technique does not move FCP.
This technique can move up to 67% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
Low Quality Image Placeholders (LQIP) and BlurHash replace the empty white boxes that appear while images load with a low-fidelity preview — either a tiny blurred thumbnail, a compact algorithmic hash that reconstructs an approximate image, or the image’s dominant color as a solid background. The result is a perceptually complete page from the first frame: content areas have color and form even before full-resolution images arrive, improving perceived load speed and preventing layout instability.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: LCP, TBT, FCP, TTFB.
The Problem
Without placeholders, images appear as empty rectangles — white, grey, or transparent — until the full file downloads. On a slow connection, this empty state can persist for 2–5 seconds. Users see a blank layout that feels broken, even though the content is downloading. For lazy-loaded images, as users scroll the page fills with white boxes before each image snaps into place. This produces visual instability and a sense that the page is still loading long after it is functionally complete.
Performance Impact
CLS
Indirect
pre-sized placeholder containers prevent layout shifts even when image dimensions are unknown
SI
Perceived
Speed Index measures visual completeness — a colored placeholder makes the page look more complete sooner
Risk: Low
incorrect placeholder aspect ratio can cause jarring transitions — match container proportions to the final image
How it works
01
Tiny blurred thumbnail (classic LQIP)
Generate a 10–40 px wide version of each image, encode it as a base64 data URI, and embed it as the
srcin the<img>tag. Apply a CSS blur filter to soften the pixelation. When the full image loads, swap the src or use a CSS transition to reveal it. Total placeholder size: 0.5–3 KB per image.02
BlurHash — compact algorithmic representation
BlurHash encodes the color distribution of an image as a short string (20–40 characters) instead of a full pixel buffer. A JavaScript library decodes the string into a canvas element that renders a blurred, color-accurate preview. Extremely compact — 30 characters represent a full placeholder — at the cost of a decode step in JavaScript.
03
Dominant color placeholder
Extract the single most dominant color from the image and set it as the background of the image container. The simplest approach — requires no JavaScript, no extra files, just a color value — and provides immediate visual feedback that the image area has content. Libraries like Color Thief make extraction trivial.
04
WordPress integration
Plugins like Smush, BunnyCDN Optimizer, and Flying Images can generate LQIP thumbnails on upload. For BlurHash, the
wpblurorblurhash-for-wpplugins store hash strings in post meta and inject them into<img>data attributes for client-side decoding.
Code Example
<!-- Image loads instantly empty, then 'pops' into place -->
<img src="/wp-content/uploads/photo.jpg" alt="Photo" loading="lazy"><!-- LQIP: blurred thumbnail shows immediately, full image fades in -->
<img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..."
data-src="/wp-content/uploads/photo.jpg"
alt="Photo"
class="lazyload"
style="filter:blur(20px); transition:filter 0.3s;"
onload="this.style.filter='none'; this.src=this.dataset.src;">
<!-- Dominant color: simplest approach, no JavaScript -->
<div style="background-color: #a78b72; aspect-ratio: 16/9;">
<img src="/wp-content/uploads/photo.jpg" alt="Photo" loading="lazy" style="width:100%;">
</div>For production WordPress, use a lazy loading library (lazySizes) with LQIP support. The base64 placeholder is embedded in HTML — keep the thumbnail dimensions very small (10–20px) to avoid inflating HTML size.
Limitations
- Embedding base64 LQIP thumbnails in HTML increases page HTML size. Each LQIP placeholder adds 0.5–3 KB. On a page with 50 images, this can add 25–150 KB to the initial HTML document.
- BlurHash requires JavaScript to decode — users with JavaScript disabled see no placeholder.
- Incorrect image aspect ratios in placeholders cause layout shifts when the full image loads with different proportions. Always match the placeholder container’s aspect ratio to the final image.
Common Mistakes
Using very large LQIP thumbnails to get better placeholder quality
An LQIP thumbnail at 10–20 px wide with a CSS blur filter looks indistinguishable from one at 40 px wide. Larger thumbnails add more bytes to the HTML. Keep placeholder images at 10–20 px — the blur hides all the pixelation.
Applying LQIP to above-fold images
Above-fold images should load at full quality immediately with fetchpriority="high". LQIP is designed for below-fold lazy-loaded images where a placeholder fills the gap during deferred loading. Applying LQIP to the hero image replaces a fast-loading high-quality image with a blurry one unnecessarily.