Online Tool Store
Blurhash Generator
Encode an image into a BlurHash — a 20-30 character string that expands into a blurred placeholder while the real image loads. Paste, drop, or browse an image, tune the component counts, decode an existing hash, and download the placeholder as a PNG. Runs entirely in your browser.
This works right here on your device — nothing gets sent out.
Source
Decoded placeholder
Decode-time only; not stored in the hash.
A BlurHash is a string you store next to an image and expand into a blurred placeholder at render time — so the layout can show something meaningful before the real image arrives, without a second network request. Your client needs a decoder to display it; the data URI button gives you a ready-made image instead, which needs no decoder but is larger. Nothing is uploaded.
How to use it
- Drop in an image, choose a file, or paste one with Ctrl+V — a sample is already encoded so you can see the shape of the output.
- Leave the detail at 4 × 3 unless you have a reason to change it.
- Copy the hash and store it in the same row or record as the image itself.
- Decode it in your client, or use the data URI or download buttons if you would rather not add a decoder.
What you actually get
The length is fixed by the component counts, at four characters of header plus two per component. That makes the size entirely predictable before you encode anything:
1 × 1 6 characters flat average colour 3 × 3 22 characters rough light and dark regions 4 × 3 28 characters the usual default 9 × 9 166 characters diminishing returns
Twenty-eight bytes is small enough that it costs nothing to include in the JSON response that lists your images — smaller than most single HTTP headers. That is the whole point of the format: the placeholder arrives with the metadata, in the request you were already making, so there is no second round trip before the page can show something. The transform also runs in linear light rather than on raw sRGB bytes: averaging gamma-encoded values directly produces the characteristically muddy, too-dark blur you sometimes see. The effect is easiest to see at one component, where the hash is nothing but an average — a test gradient with sRGB byte average rgb(130, 110, 95) decodes to rgb(147, 116, 103) at 1 × 1, and the linear result is the one that is physically correct, matching what you would measure if you defocused a camera pointed at the image. At higher component counts the gap in the overall average closes to about one or two levels out of 255.
FAQ
Can I use the hash directly in an <img> tag?
No, and this is the thing people are most often surprised by. A BlurHash is not an image format — it is 20 to 30 characters that a decoder expands into pixels. Your app needs a decoder to display it. If you want something that works with no decoder at all, use the data URI or download-as-PNG buttons instead: both give you a real PNG of the blurred placeholder, which is larger but drops straight into an src attribute or a file on disk.
How many components should I use?
Four across and three down is the common default and is what this tool starts with. Below that you lose the sense of where things are in the frame; above it the hash grows quickly for very little visible gain, because the result is going to be blurred anyway. Nine by nine is 166 characters — six times the length of a 4×3 for a placeholder nobody looks at closely.
Why does a 1×1 hash look brighter than my image?
Because the average is computed in linear light, not on the sRGB bytes. Encoding a test gradient whose sRGB channels average rgb(130, 110, 95) gives a 1×1 hash that decodes to rgb(147, 116, 103). That is not a bug — averaging gamma-encoded values directly is the mistake, and it is why naively averaged thumbnails often look muddy. The linear average is the perceptually correct one.
Does the contrast slider change the hash?
No. Punch is applied at decode time, so the string is identical whatever you set it to. It is included here because most decoder libraries expose the same parameter and it is useful to see its effect before you pick a value in your own code.
Does a BlurHash keep transparency?
No. The format has no alpha channel, so a transparent PNG encodes as though it were flattened onto whatever the canvas held. For images with real transparency a placeholder colour is usually a better choice than a blur.
Is my image uploaded?
No. It is decoded, downsampled and transformed in the page. Both the encoder and decoder here are plain arithmetic running in your browser, with no request made at any point.
Why show a blurred placeholder instead of a spinner?
A placeholder that matches the image's colours and rough composition does two useful things. It reserves the correct space, so nothing shifts when the image lands — which is the main cause of layout-shift complaints in image-heavy pages. And it gives the eye something plausible immediately, which makes the load feel shorter than an equivalent wait against a grey box, because there is something to look at rather than something to wait for.
How we compare
| Feature | Online Tool Store | Command-line encoders | Image CDN placeholders |
|---|---|---|---|
| Image never leaves your device | ✓ | ✓ | ✗ |
| Nothing to install | ✓ | ✗ | ✓ |
| Decodes an existing hash to check it | ✓ | Separate command | ✗ |
| Shows the round-trip colour error | ✓ | ✗ | ✗ |
| Also exports a decoder-free data URI | ✓ | With extra steps | ✓ |
| Loads an image by drag, browse, or clipboard paste | ✓ | File path only | Drag or browse only |
| Encodes a whole library in one pass | ✗ | ✓ | ✓ |
| Runs automatically on upload | ✗ | ✓ | ✓ |
Use this to understand the format, tune component counts, and generate hashes for a handful of images. Once you are encoding every upload, that belongs in your pipeline — a build step or an upload handler — not in a browser tab. This tool is the place to work out what you want before you write that code.