What is a BlurHash and an LQIP placeholder?
A BlurHash is a compact string that describes a blurry version of your image, while an LQIP (low quality image placeholder) is a tiny base64 image that the browser paints instantly. Both techniques fill the empty space before your full-size image arrives. Visitors see colors and shapes immediately, so the page feels fast and stable.
This generator encodes both formats in your browser. You drop in images, and the tool returns the hash, the data URI, the average color and copy-ready code for HTML, React and Next.js.
BlurHash vs LQIP vs average color: which one fits your project?
| Method | Typical size | Needs JavaScript? | Best for |
|---|---|---|---|
| BlurHash | 20–30 characters | Yes, to decode | APIs, databases, feeds, galleries |
| LQIP (base64) | 300–900 bytes | No | Static sites, blogs, Next.js blurDataURL |
| Average color | 7 characters | No | Fallback background behind either method |
How to generate a blur placeholder in four steps
- Add your JPG, PNG, WebP, AVIF or GIF images.
- Set the BlurHash components (4×3 works for most landscape photos) and the LQIP width.
- Click Generate Placeholders.
- Choose a tab, copy the code and paste it into your project.
How blur-up placeholders support Core Web Vitals
Placeholders help most when you pair them with explicit width and height attributes or a CSS aspect-ratio. The browser then reserves the space and avoids layout jumps, which protects your Cumulative Layout Shift score. Be precise about the limits, though: a placeholder improves perceived speed, and it does not shorten your Largest Contentful Paint. Keep your hero image eager-loaded, and reserve native lazy loading for below-the-fold images.
Best practices for lazy loading images
- Compress the full image first with the Image Compressor, then add the placeholder.
- Match dimensions with the Image Resizer so the browser never downloads more pixels than it displays.
- Serve modern formats. The All-in-One Image Converter turns PNG and JPG into WebP or AVIF.
- Write descriptive alt text on the real image and leave the placeholder
alt=""witharia-hidden="true". - Use
decoding="async"andloading="lazy"on every non-critical image. - Need lossless files for design work? Try the Bulk JPG to PNG Converter.
Image SEO: what Google expects
Google rewards helpful, people-first content, so write alt text for people, not for keyword counts. Google can index lazy-loaded images when you use standard <img src> markup, as its image SEO guidance describes. Never put the real image URL only inside JavaScript, and never hide it behind a scroll event that crawlers cannot trigger. Include the real image in the HTML, and the placeholder stays a pure visual enhancement.
About the BlurHash algorithm
BlurHash applies a discrete cosine transform to a downscaled copy of your image. It keeps a few low-frequency components, quantizes them and writes them in base 83. You can read the open specification and reference implementations in the official BlurHash repository, or compare results with the BlurHash project page. This tool follows that specification, so the strings it produces decode in any compatible library.
Frequently asked questions
What is a BlurHash?
A BlurHash is a short string, usually 20–30 characters, that encodes a blurry preview of an image. Your page decodes it into a small canvas and shows it while the full image loads.
What is LQIP?
LQIP stands for Low Quality Image Placeholder. It is a tiny version of the image, often 20 pixels wide, embedded as a base64 data URI so the browser paints it instantly without an extra request.
BlurHash or LQIP: which should I use?
Use LQIP when you want zero JavaScript and the best visual fidelity. Use BlurHash when you store hashes in a database or JSON API and want a few bytes per image instead of a 300–900 byte data URI.
How many components should I choose?
Start with 4×3 for landscape photos and 3×4 for portrait photos. More components add detail but make the string longer and the decode slower.
Do blur placeholders improve Core Web Vitals?
They improve perceived speed and prevent layout shift when you also set width, height or aspect-ratio. They do not shorten LCP by themselves, and you should never lazy-load your LCP image.
Does this tool upload my images?
No. The tool reads, resizes and encodes every image inside your browser. Nothing leaves your device.