Blur placeholder generator: BlurHash and LQIP

How to use the blur placeholder generator

1. Add your images. Drop in one or more images. A sample photo is loaded first so you can compare the placeholder types straight away.
2. Compare the four placeholders. The previews show the original next to its BlurHash, a tiny image, a three-colour gradient and its average colour, at the same aspect ratio.
3. Tune the detail. More BlurHash components capture more shapes but make the string longer. A wider tiny image is sharper but adds bytes to your page.
4. Copy or export. Choose which code to show, then copy it. Export all saves every image’s hash, data URI, gradient and colour to a JSON file you can use in a build script or CMS.

Why placeholders help

When a page loads, images arrive last. Without a placeholder, people see empty boxes or text that jumps as each image appears. A blurred preview in the right colours fills the space instantly, makes the page feel faster and, combined with a fixed aspect ratio, prevents layout shift.

BlurHash, LQIP or a gradient?

BlurHash squeezes an image into a short string of about 20–30 characters, ideal for storing in a database or API response; it needs a small script to turn it back into pixels. A tiny image (LQIP, low-quality image placeholder) is a 16px wide version embedded as a data URI, usually a few hundred bytes, that works with plain CSS and no JavaScript. A gradient or single colour costs almost nothing and suits grids of thumbnails where detail doesn’t matter.

How BlurHash works

BlurHash breaks the image into a handful of smooth waves of colour, a little like how JPEG compression works, and keeps only the strongest few. The number of components across and down sets how many waves are kept. Decoding rebuilds a smooth, blurry image from them at any size.

Frequently asked questions