A compact string encoding the low-frequency content of an image — its blurred shape and colours. It is designed to be stored next to an image URL and rendered instantly as a placeholder while the full image loads.

How long is a BlurHash string?

Four characters plus two per component, so a 4 by 3 hash is 28 characters and a 1 by 1 hash is 6. More components mean more detail and a longer string.

How many components should I use?

Four by three is the usual choice for photographs. Portraits sometimes benefit from three by four, and a flat graphic can look fine at two by two. Nine is the maximum on each axis.

Is BlurHash better than a tiny JPEG placeholder?

It avoids a second network request, which is the main advantage — the hash travels inside the JSON you already fetched. A tiny JPEG preserves more detail but costs a request or a larger inline payload.

Is my image uploaded to generate the hash?

No. The image is drawn to a canvas and encoded in your browser, so photographs you drop in never leave your device.

BlurHash Generator

Turn an image into a BlurHash string, and decode any hash back into the blurred preview it describes.

The BlurHash Generator runs entirely in your browser. Images you drop in are encoded on your device and never uploaded.

Open the Placeholder Image Generator

About BlurHash Generator

A BlurHash is a twenty-odd character string that stores the blurred shape of an image — enough to show a recognisable placeholder while the real picture downloads, instead of an empty grey box that shifts the layout when it fills. The encoder projects the image onto a small set of cosine basis functions, quantises the coefficients and packs them into base-83 characters, which is why the result fits comfortably in a JSON payload next to the image URL. This tool encodes an image you drop in, decodes any hash back to a preview so you can check what a stored string actually looks like, and hands you the snippet for React, HTML or your API response.

Features

Encodes any PNG, JPEG or WebP into a BlurHash string
Component sliders from 1 to 9 on each axis, with the string length shown
Decodes any valid hash back to a preview, not just ones you just made
Punch control to exaggerate the contrast of the blur
Average colour of the hash, ready to use as a background
Validation that explains exactly why a hash is malformed
Snippets for React, an HTML data attribute and a JSON payload
The whole encode runs on a downsampled copy, so it is instant

How to use the BlurHash Generator

Drop in an image, or paste an existing hash to decode it
Adjust the component sliders — four by three suits most photographs
Copy the hash and store it alongside the image URL
Grab the React or HTML snippet for the rendering side

Example

Input

photo.jpg · 4 × 3 components

Output

LEHV6nWB2yk8pyo0adR*.7kCMdnj
Average colour #8a7f6e · 28 characters

Twenty-eight characters is a smaller payload than most image URLs, and it renders instantly with no second request.

Common errors & troubleshooting

A stored hash fails to decode. — The length has to match the component counts encoded in the first character — 4 + 2 × x × y. A truncated string, or one that has been through a form that stripped characters, fails this check, and the tool says which.
The placeholder looks nothing like the image. — Too few components. One by one stores only an average colour; three or four on each axis is where a photograph becomes recognisable, at the cost of a slightly longer string.
The blur looks washed out compared with the original. — Raise the punch value when decoding. It exaggerates the contrast around the average colour, which usually reads better as a placeholder even though it is less faithful.

Frequently asked questions

What is a BlurHash?: A compact string encoding the low-frequency content of an image — its blurred shape and colours. It is designed to be stored next to an image URL and rendered instantly as a placeholder while the full image loads.
How long is a BlurHash string?: Four characters plus two per component, so a 4 by 3 hash is 28 characters and a 1 by 1 hash is 6. More components mean more detail and a longer string.
How many components should I use?: Four by three is the usual choice for photographs. Portraits sometimes benefit from three by four, and a flat graphic can look fine at two by two. Nine is the maximum on each axis.
Is BlurHash better than a tiny JPEG placeholder?: It avoids a second network request, which is the main advantage — the hash travels inside the JSON you already fetched. A tiny JPEG preserves more detail but costs a request or a larger inline payload.
Is my image uploaded to generate the hash?: No. The image is drawn to a canvas and encoded in your browser, so photographs you drop in never leave your device.

Related tools

Image Optimizer — Re-encode and shrink images (JPEG/WebP/PNG), optionally resizing.
Placeholder Image Generator — Make placeholder images at any size, as SVG, PNG or a data URI.
Image Color Palette Extractor — Extract a dominant color palette from an image as HEX, RGB and HSL with CSS variables.
Base64 Image Encoder / Decoder — Convert images to Base64 Data URIs with ready-made HTML and CSS snippets, or decode a Data URI back to a downloadable image.
Image Format Converter — Convert images between PNG, JPEG and WebP entirely in your browser.
Image Color Picker — Upload an image and pick colors from any pixel to get HEX, RGB and HSL values, in your browser.