Free tool

BlurHash and LQIP Placeholder Generator

Turn any image into a ~30-character BlurHash string that decodes in milliseconds — the blurred placeholder you see on Instagram or Mastodon while media loads. Instant decoded preview, component tuning and ready-to-paste HTML, CSS or React snippets.

Drop an image here or click to choose

Sampled at 100 px wide in your browser: the image never leaves your device.

Decoded preview
Load an image to generate the hash
<div class="blurhash-container">
  <canvas id="placeholder" width="32" height="24"></canvas>
  <img src="foto.jpg" onload="this.style.opacity=1" style="opacity:0;transition:opacity .3s" />
</div>
<style>
.blurhash-container { position: relative; }
.blurhash-container img { position: absolute; inset: 0; width: 100%; height: 100%; }
</style>
<script type="module">
import { decode } from "blurhash";
const ctx = document.getElementById("placeholder").getContext("2d");
const img = ctx.createImageData(32, 24);
img.data.set(decode("LEHV6nWB2yk8pyo0adR*.7kCMdnj", 32, 24));
ctx.putImageData(img, 0, 0);
</script>
import { Blurhash } from "react-blurhash";

<Blurhash
  hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
  width={256}
  height={192}
  resolutionX={32}
  resolutionY={24}
  punch={1}
/>;

Built by

Miguel Ángel Colorado Marin (MACM)

Full-Stack Developer · Guadalajara, España

I develop web apps, digital tools and full projects — from design to deployment.

GitHubLinkedInBuy me a coffee
Contact me

An LQIP placeholder avoids the white flash when an image loads slowly: you show a 30-character blurred version, like Instagram or Mastodon do. This tool implements the full BlurHash algorithm in your browser: the image is sampled at 100 px wide (nothing is uploaded), converted to linear space and decomposed into DCT-II cosine components quantised in Base83. The decoder is byte-identical to Wolt's official package — verified with an automated test bank — and the encoder follows the reference algorithm by taking the maximum over absolute values, which yields higher-fidelity hashes than the npm package on images whose AC range is mostly negative. Tune 4×3 components for photos, fewer for more compact placeholders.

Features

  • ✓Full BlurHash encode and decode implemented from scratch
  • ✓Live decoded preview with adjustable component count (1-9 × 1-9)
  • ✓Ready snippets: HTML+CSS blur-up technique and a React component
  • ✓Validator: paste any hash and it decodes instantly
  • ✓Verified against Wolt's official package: byte-identical decode and higher encode fidelity

How to generate a BlurHash placeholder?

  1. 1

    Upload or drop the image

    It's sampled at 100 px and encoded instantly; the image never leaves your browser.

  2. 2

    Tune the components

    More components (6×4 or 8×5) capture more detail; 4×3 or 3×2 suits most photos.

  3. 3

    Check the preview

    The canvas shows the decoded result: if key features are lost, increase the component count.

  4. 4

    Copy the hash or a snippet

    Store the hash with your image or copy the HTML+CSS blur-up snippet or the ready React component.

Frequently asked questions

What are components X and Y and how many should I use?

The hash stores the image as a sum of cosine components: X across the width, Y across the height. 4×3 (the default) captures a normal photo in ~30 characters. More components = more detail but longer hashes and slower decoding. Flat images are fine with 1×1; logos with hard edges benefit from 8×8.

Where do I store the hash and when does it decode?

Store the hash next to the image URL (an extra database column or a data- attribute). It decodes on the client in milliseconds — it's a tiny cosine matrix, no image needed — and renders into a canvas or a tiny PNG with CSS blur on top. When the real image arrives, it fades in over the placeholder.

Is it identical to the official blurhash package?

The decoder is: byte-for-byte identical, automatically verified against the official npm package. The encoder follows the reference algorithm by taking the AC energy maximum over absolute values; where the npm package produces lower-fidelity hashes (it quantises the range without the absolute value), the placeholder here keeps more detail. The hash structure is the same standard, readable by any BlurHash decoder.

Related tools

Image Compressor

Batch compress with quality control.

Palette from Image

Dominant colors with k-means.

Favicon Generator

Favicons from image or text/emoji, 8 sizes.

Embed BlurHash Placeholder Generator on your site

Add BlurHash Placeholder Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.

<iframe
  src="https://miguelacm.es/embed/blurhash-placeholder"
  width="100%"
  height="700"
  frameborder="0"
  title="BlurHash Placeholder Generator — miguelacm.es"
></iframe>
View embed in new tab →
View source on GitHub