TL;DR: a blur placeholder isn't decoration — it's a Cumulative Layout Shift fix disguised as a loading effect, since a correctly-sized placeholder reserves the image's exact space before the real file arrives. Pair this guide with Character Counter, Encoding Converter, Text Difference and AI Hidden Characters.

LQIP (Low Quality Image Placeholder) is a tiny, heavily compressed version of the real image — often 20×20 pixels or smaller, a few hundred bytes — shown blurred and scaled up while the full-resolution file loads.

Illustration of LQIP and blur placeholders workflow in CharCount
A practical guide to LQIP and blur placeholders with CharCount tools.

The real problem LQIP solves: layout shift, not aesthetics

Without a placeholder that reserves the image's final dimensions, the page renders with no space for the image, then jumps everything below it downward the moment the file arrives — Cumulative Layout Shift (CLS), one of Google's Core Web Vitals, penalizes exactly this. A same-aspect-ratio placeholder (blurred or not) occupies the correct space from the first paint, so nothing moves when the real image loads — the blur is a nice-to-have on top of the actual fix, which is reserving space.

How a tiny image gets embedded instantly

LQIP placeholders are typically embedded as base64-encoded data URIs directly in the HTML — <img src="data:image/jpeg;base64,..."> — so the placeholder renders with zero additional network requests, which matters because the whole point is showing something before the real image's request even resolves. Because the source image is tiny (often under 1KB before encoding), the base64 overhead — roughly 33% larger than the raw bytes — is negligible for a placeholder despite being wasteful for a full-size image.

LQIP vs. a solid dominant-color placeholder

A blurred micro-thumbnail carries more visual information (rough shapes, color distribution) than a single dominant-color rectangle, but it also means more setup work — generating and storing a tiny image per photo, versus computing a single average color. For a photo-heavy gallery where the image itself is the point, LQIP's extra fidelity is usually worth it; for smaller UI images or icons, a flat color placeholder does the CLS-prevention job with less overhead.

A workflow for adding placeholders correctly

  1. Set an explicit width and height (or CSS aspect-ratio) on every image tag — this is what actually reserves space; the placeholder image itself doesn't do this on its own.
  2. Generate the tiny placeholder at the image's true aspect ratio, not a fixed size that doesn't match — a mismatched ratio produces a shift when the real image swaps in.
  3. Embed the placeholder as a base64 data URI for zero-request loading, reserved for genuinely small placeholder images only.
  4. Test with the browser's network throttling — a placeholder's value only shows up when the real image is slow to arrive.

Common mistakes to avoid

  • Adding a blur effect without also setting explicit dimensions — the blur alone does nothing for layout shift.
  • Using a placeholder with a different aspect ratio than the real image, which causes a shift anyway when it's replaced.
  • Base64-embedding a full-size image "for consistency", inflating page weight for no placeholder benefit.
  • Treating LQIP purely as a visual effect and missing that its actual job is reserving layout space.

The blur is what users notice; the dimension reservation underneath it is what actually protects your Core Web Vitals score.