Tutorial · images · Published 2026-08-16 · 3 min read
LQIP low-quality image placeholders
LQIP low-quality image placeholders: what they are, how to build them, and when they help or hurt perceived performance.
What an LQIP is
LQIP (low-quality image placeholder) is the technique of shipping a tiny, blurred version of the image first, then swapping in the full-resolution image once it loads. The tiny version is often a few hundred bytes: a solid, a scaled-to-1px version, or a poster-size blur. The goal is to remove the empty gray rectangle while an image scrolls up, so the page "feels" loaded and the CLS stays near zero because the placeholder carries the same dimensions.
It is distinct from lazy loading (see the lazy loading guide), which waits to fetch until the image nears the viewport; LQIP is about *what shows* before and during that fetch. The two compose: lazy an image that, on intersection, first paints the blur, then swaps the sharp source.
<img
src="data:image/svg+xml;base64,..." <!-- 1x1 blur or tiny JPEG -->
data-src="/img/hero.jpg"
width="1280"
height="720"
alt="Hero"
>How to build the placeholder
There are three families; pick by your pipeline:
| Approach | Strong for | Cost |
|---|---|---|
Blurred base64 JPEG (scale to ~12-20px, quality 30) | Small fixed set of images, easy to embed | ~1-3 KB per image, inflates HTML |
SVG filter blur over a scaled raster (<svg> with a filter) | Crisp edges in the placeholder, no base64 bloat | Needs the raster data as a data URI too |
Solid color placeholder via CSS background-color | Cheapest (0 placeholder bytes), but no shape | Shows a washed patch, not the photo |
The core scaling rule: give the placeholder the final box by sizing the wrapper to the image's intrinsic ratio. A box with aspect-ratio and width: 100% stays the same height from placeholder to sharp image, which is what keeps the layout stable. The aspect ratio guide pairs with this.
.lqip { width: 100%; aspect-ratio: 16 / 9; background: #ddd center/cover; }Load it without hurting
- Add
class="lazy"and the sizes/srcset setup so the network for the real image still follows the viewport, not the placeholder. - Use a shared placeholder strategy: generating the blur per image at build time (a processing pipeline handles it) beats at-render base64 per request.
- Keep the placeholder on a
data-*attribute. Do not put the 1px blur in thesrcwhileloading="lazy"and expect the browser to swap: lazy swaps thesrcwhen the element enters the viewport; a JS-observedIntersectionObserverswap is the deterministic pattern.
When LQIP is the wrong call
Every byte of placeholder HTML you ship is a byte of site weight. The case where a sharp color block wins over a blur: a monochrome hero, a logo, and background images (no LQIP, just a background-color with image-set). The case where LQIP genuinely earns its bytes: image-heavy landing pages where the eye tracks to the photo and a flat gray gap reads as broken. Measure the delta: the web performance audit and the LCP guide quantify whether the placeholder made first paint feel faster or just added weight. In all cases the sharp image itself matters more, which is the point of the image compression guide.