Generate a BlurHash from a PNG

20–30 character hash · decoded preview shown · batch · nothing uploaded

A BlurHash is a short string — around 20 to 30 characters — that encodes a blurred version of an image. Store it beside the image record, render it instantly while the real file loads, and your layout never flashes grey. Drop images here to get the hash, plus a decoded preview of exactly what it will look like.

Read the preview, not the hash

The download rows below the button aren't the point of the output — they're the hash decoded back into an image, rendered by the same maths a client library will run. That's the honest test of whether a hash is good enough: if the preview reads as your photo, blurred, then your placeholder works. If it's a muddy brown smear, no amount of client-side tuning will save it, and you should raise the detail settings or pick a different crop.

Choosing the detail components

The two numbers are how many cosine components are stored across and down. 4×3 is the usual recommendation and produces a ~28-character hash. Going to 6×4 captures noticeably more structure at around 45 characters. 1×1 stores nothing but the average colour, which is a perfectly reasonable choice if all you want is a tasteful background tint.

Match the aspect: a wide banner benefits from more horizontal components (say 6×2), a portrait from more vertical ones (3×5). Beyond about 7×7 the string is long enough that you may as well ship a genuine 20×20 thumbnail.

Using it

Store the string in your database next to the image URL and send both in your API response. Decode it client-side with the blurhash package on npm, BlurHashDecoder on iOS, or the Android/Kotlin port, then swap in the real image on load. It costs you about 30 bytes per record and removes the entire class of layout-shift complaints.

FAQ