BYTETOOLS

BlurHash Generator

Generate a BlurHash string for any photo and preview exactly how the blurred placeholder will look, with adjustable component counts.

Drop a photo to generate its BlurHashEncoded in your browser with the published algorithm — nothing is uploaded

A BlurHash is a short string that stands in for a photo while it loads. Drop an image to get one, or paste an existing hash below to see what it looks like.

Preview an existing hash

Nothing to preview yet — paste a hash above.

What is the BlurHash Generator?

A BlurHash is a short string — usually around 30 characters — that encodes a blurred version of an image.

  • Faithful implementation of the published BlurHash encoder and decoder
  • Component counts adjustable from 1 to 9 on each axis with a live preview
  • Side-by-side original and decoded placeholder so you can judge the trade-off
  • Paste-a-hash preview for checking hashes you already store
  • Copyable HTML data attribute and react-blurhash snippet
  • Runs locally in your browser — no image or hash is uploaded

How to use the BlurHash Generator

  1. 1

    Drop a photo onto the upload area.

  2. 2

    Adjust the horizontal and vertical component sliders — 4 × 3 is the usual choice for landscape photos.

  3. 3

    Compare the original with the decoded placeholder shown next to it.

  4. 4

    Copy the hash, or copy the ready-made HTML and react-blurhash snippet below it.

  5. 5

    Paste any other BlurHash into the preview box at the bottom to see what it looks like.

About the BlurHash Generator

A BlurHash is a short string — usually around 30 characters — that encodes a blurred version of an image. Store it next to the image in your database and you can render a smooth, colour-accurate placeholder the instant a page loads, instead of a grey box or a layout that jumps when the photo finally arrives.

This tool implements the published encoder exactly: pixels are converted from sRGB to linear light, projected onto a cosine (DCT) basis of the component counts you choose, quantised, and packed into base-83 characters. It then decodes its own output and draws it beside the original, so you can see what your visitors will actually see while tuning the component counts.

You can also paste a hash you already have to preview it. Everything runs in your browser on a small thumbnail of the image — the encoder is a full discrete cosine transform, so working on a downscaled copy keeps it instant — and no image or hash is ever uploaded.

Frequently asked questions

What is a BlurHash used for?

It is a tiny string you store alongside an image so your app can draw a blurred stand-in immediately, before the real photo downloads. Because it is only about 30 characters it fits comfortably in a database row or an API response.

How many components should a BlurHash have?

Four horizontal by three vertical is the usual default and looks good for most landscape photos. More components capture more detail but make the string longer, and beyond about six per axis the extra detail rarely justifies the length.

How long is a BlurHash string?

The length is fixed by the component counts: four characters plus two per component, so a 4 × 3 hash is exactly 28 characters. This tool shows the length next to each hash it generates.

Is BlurHash better than a low-quality image placeholder?

It is far smaller. A tiny JPEG placeholder still costs a request or a base64 blob of a few kilobytes, while a BlurHash is a few dozen bytes you already have in the payload. The trade-off is that it can only ever show soft colour shapes, never recognisable detail.

Is my photo uploaded to generate the hash?

No. The image is downscaled and encoded entirely inside your browser using a canvas and plain JavaScript, so it never leaves your device.

Related tools