Turn any image into a tiny BlurHash or ThumbHash string that shows a soft, colorful preview while the real photo loads. Adjust the components, compare the decoded placeholders with the original and copy ready-to-use code. Everything runs in your browser.
Last updated:
Sample image loaded. Choose your own to encode it.
Original BlurHash ThumbHash
Decode an existing BlurHash or ThumbHash
Advertisement
Advertisement
How to use the BlurHash Generator
Choose an image or drop one into the box. A sample sunset is loaded so you can see the result right away.
Set the components. 4 × 3 is the usual choice for landscape photos; more components keep more detail but make the string longer.
Compare the previews of the original, the BlurHash and the ThumbHash, and adjust Punch if the placeholder looks too flat.
Copy the hash to store it next to the image in your database or API.
Copy the code for your framework, or download the placeholder as a small PNG.
BlurHash string length by component count
A BlurHash always contains 1 character for the component count, 1 for the maximum AC value, 4 for the average color (the DC term) and 2 for every other component, so length = 4 + 2 × X × Y.
Components (X × Y)
Characters
Good for
1 × 1
6
Just the average color
3 × 3
22
Square thumbnails and avatars
4 × 3
28
Landscape photos (the common default)
3 × 4
28
Portrait photos
5 × 4
44
Hero images where more structure helps
9 × 9
166
Maximum detail (rarely needed)
How the encoding works
The image is scaled down and each pixel is converted from sRGB to linear light.
For every component pair (i, j) the encoder sums each pixel multiplied by cos(π·i·x / width) × cos(π·j·y / height). This is a small discrete cosine transform, the same idea used inside JPEG.
The first factor is the average color. The others are scaled against the largest one and quantized to 19 levels per color channel.
Everything is written with an 83-character alphabet that is safe in JSON, URLs and HTML attributes.
ThumbHash works in a similar way but converts the colors to a luminance and two color-difference channels first, gives luminance more detail than color, and packs the result into bytes that are usually shown as base64.
Tips for great placeholders
Always reserve the image's space with width and height or CSS aspect-ratio, so the layout does not jump when the photo arrives.
Generate the hash once when the image is uploaded and store it in your database. Decoding is fast; encoding on every page view is wasteful.
Fade the real image in over the placeholder with a short CSS opacity transition for a smooth effect.
For a single static page, a small inline data URL from the Image to Base64 tool is an alternative, but it is much longer than a hash.
Frequently asked questions
What is a BlurHash?
BlurHash is a compact way to describe a blurry version of an image as a short text string, typically 20 to 30 characters. The image is broken into a few cosine waves (similar to how JPEG works), and their colors are stored in a base 83 alphabet. An app or website decodes the string into a soft gradient placeholder that is shown until the real image finishes loading.
How many components should I use?
The components set how many color waves are kept horizontally and vertically. 4 × 3 works well for most landscape photos and 3 × 4 for portraits. Fewer components give a smoother, more abstract blur and a shorter string; up to 9 per axis keep more structure. The string length is 4 + 2 × X × Y characters, so 4 × 3 gives 28 characters.
What is the difference between BlurHash and ThumbHash?
ThumbHash is a newer format that stores a similar blurred preview in about 20 to 30 bytes. It keeps more detail for its size, supports transparency and records the image's approximate aspect ratio inside the hash, while BlurHash needs the width and height stored separately. BlurHash has wider library support across web and mobile frameworks.
How do I use a BlurHash with Next.js Image?
The Next.js Image component expects a data URL in blurDataURL rather than a hash. This tool decodes the BlurHash into a small PNG and gives you that data URL, ready to paste with placeholder set to blur. For many images, store the hash and decode it on the server or at build time.
Is the encoded hash the same as other BlurHash libraries produce?
It follows the published BlurHash algorithm, including sRGB to linear conversion and the base 83 encoding, so the strings decode correctly in any standard library. The image is first scaled down to at most 64 pixels on its longest side, which is common practice; libraries that encode a different size may produce a slightly different but equivalent string.
What does the punch setting do?
Punch multiplies the strength of the color waves when the hash is decoded. Values above 1 make the placeholder more contrasty and saturated; values below 1 make it softer. It does not change the hash itself, only how it is drawn.
Are my images uploaded?
No. Both encoders run in JavaScript on your device. The image is never sent to a server, so you can use the tool for private or unreleased pictures.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.