BlurHash Generator - Compact Image Placeholder

How to use this tool

1. Upload an image using the file picker or drag-and-drop.
2. Adjust the X components and Y components sliders if needed.
3. Compare the decoded BlurHash preview and adjust punch if desired.
4. Copy the generated BlurHash string for use in your project.

What is BlurHash?

BlurHash was created by Dag Agren at Wolt. It uses a discrete cosine transform (DCT) to encode an image’s broad color and shape patterns into a compact base83 string. Decoding that string creates a small, blurry placeholder for the time before a full image loads. BlurHash removes much of the fine detail, but it can still reveal broad colors or layout; treat it as a loading preview, not as a privacy boundary.

Integration examples

Choose Encode image to create a hash from a local file, or choose Decode hash to inspect an existing string without the original image. The tool processes files in your browser and does not upload them. Adjust X and Y components to trade a shorter string for more detail, then compare the original with the decoded placeholder. The punch control changes contrast in the preview only; it does not change the copied hash.

Your hash can be decoded in the browser using the blurhash npm package, or on the server using Swift/Kotlin/Go libraries. Frameworks like Next.js Image and Astro also support BlurHash placeholders.

X and Y component parameters

The X and Y component values control how much spatial detail is encoded in the hash, and directly affect the exact output length. The formula is 4 + 2 × (X × Y): two flag characters, four characters for the average color, and two characters for each remaining component. For example, 4 × 3 components produce exactly 28 characters, while 8 × 6 produce 100:

Higher component counts produce longer strings and can preserve more detail, but the visible improvement depends on the image and the size of its placeholder. A 4 × 3 hash is a practical starting point for many photos; use a portrait-shaped component grid for portrait imagery and compare the decoded preview before adopting a larger hash. Hash length grows quickly, so select the smallest grid that looks good in the space where the placeholder will appear.

Performance impact

Decoding a BlurHash and rendering it to a small canvas is usually inexpensive for typical component counts. Keep the image’s intended aspect ratio when you decode so the placeholder does not look stretched. A common loading pattern is:

1. Render the decoded BlurHash as a CSS background-image on a container element.
2. Load the real image behind it with loading="lazy".
3. Once the image loads, fade out the BlurHash canvas or remove it from the DOM.

This approach eliminates layout shift (the space is pre-occupied) and provides a visually pleasant loading experience with near-zero performance overhead.