BlurHash Generator
Encode any image into a compact BlurHash string for lightweight placeholders, and decode BlurHash codes back into a live preview. Free, fast, and 100% client-side.
Loading tool...
What is BlurHash Generator?
The BlurHash Generator encodes any image into a compact BlurHash string — a tiny base83 representation of the image’s dominant colors and gradients — and decodes BlurHash strings back into a smooth, blurred preview rendered live on a canvas. BlurHash is the industry-standard placeholder format (created by Wolt) used to show an instant visual hint of an image while the full file downloads, dramatically improving perceived load performance.
Key Benefits
- Show instant image placeholders instead of blank boxes or spinners
- Hash strings are tiny (20-30 chars) — trivial to store in a database or CMS field
- Compatible with the official blurhash libraries for web, iOS, and Android
- Adjustable detail level lets you trade quality for string length
- Fully client-side — images never leave your browser
Common Use Cases
- •Generating blurDataURL-style placeholders for a Next.js or React image gallery
- •Storing compact image previews in an API or database response
- •Previewing how an existing BlurHash string will look before shipping it
- •Tuning the component count for the best quality-to-length ratio for your layout
- •Learning how BlurHash encoding works by encoding and comparing hashes
How to Use the BlurHash Generator
- Upload an Image: Pick any JPG, PNG, or WebP image. It is processed entirely in your browser — nothing is uploaded to a server.
- Set the Component Count: Choose 1-9 X components. More components capture finer detail but produce a longer hash string; 4 is a good default.
- Copy the BlurHash String: The encoded hash appears instantly with its length in characters. Copy it into your app, CMS, or database field.
- Decode and Preview: Paste any BlurHash string (yours or a sample) into the decoder field to render the blurred placeholder preview on a live canvas.
Key Features
- Encode any uploaded image into a compact BlurHash string in one click
- Decode BlurHash codes back into a live canvas preview instantly
- Adjustable component count (1-9) to balance quality against string length
- Copy-ready hash with length readout and original image side-by-side comparison
- Pure client-side canvas processing — no uploads, no APIs, works offline
- Bilingual EN/TH interface with sample hashes to try instantly
Frequently Asked Questions
What is a BlurHash string used for?
A BlurHash is a very short string (typically 20-30 characters) that represents the overall colors and gradients of an image. Apps display the decoded blur as an instant placeholder while the full image loads, which makes interfaces feel much faster.
How many components should I use?
The component count controls how much detail the hash captures. 1-2 components give a flat average color, 3-4 capture broad gradients (the common default), and 6-9 preserve finer structure at the cost of a longer string. Start with 4 and adjust to taste.
Are my images uploaded to a server?
No. Encoding and decoding run entirely in your browser using canvas pixel processing. Your images never leave your device, and the tool works offline once the page is loaded.
Which libraries are compatible with these hash strings?
The output follows the standard BlurHash base83 format from Wolt, so it works with the official blurhash, blurhash-react, and Next.js Image placeholder libraries, as well as native iOS and Android BlurHash implementations.
Why does my decoded preview look blocky or too smooth?
The preview is reconstructed from the frequency components stored in the hash, so it can only be as detailed as the component count allows. Re-encode the source image with more components for a closer match, or fewer for a softer blur.