Spronta
Get started

Free tool

Blurhash generator

Turn any image into a compact placeholder hash — instantly, in your browser. No upload, no signup.

Drop an image here or click to browse

Processed entirely in your browser — nothing is uploaded

Want blurhash automatically? Spronta Images generates blurhash placeholders for every image on your CDN — returned in response headers, ready to use. See pricing →

Why use blurhash?

Layout shift caused by images loading late is one of the most common Core Web Vitals issues. Blurhash solves this by providing a lightweight, visually pleasing placeholder that renders instantly while the real image loads in the background.

Unlike a blurred thumbnail JPEG, a blurhash string is only 20–30 characters. You can store it in your database, embed it in API responses, or inline it in your HTML — no extra network request required. Apps like Mastodon, Signal, and Unsplash use blurhash for smooth image loading experiences.

How this blurhash generator works

  1. Drop an imageDrag a JPEG, PNG, GIF, or WebP into the drop zone or click to browse. Your image stays in the browser — nothing is uploaded.
  2. Adjust detail levelUse the component controls to increase or decrease the X and Y components. More components capture finer detail but produce a longer hash string. 4×3 is a good default.
  3. Copy the blurhash stringClick the copy button to grab the hash. Use it in your frontend framework to render a blurred placeholder while the full image loads.

Blurhash FAQ

What is blurhash?
Blurhash is a compact representation of a placeholder for an image. It encodes the image into a short string (typically 20–30 characters) that can be decoded into a blurred preview. It was created by Wolt and is used by apps like Mastodon, Signal, and many modern websites.
Why use blurhash instead of a tiny image?
A blurhash string is around 20–30 bytes — far smaller than even a 1×1 pixel JPEG. It can be stored inline in your HTML, JSON API responses, or database rows without adding a separate network request. This makes initial page loads faster and eliminates layout shift (CLS).
What are blurhash components?
Components control how much detail the blurhash captures. The X component controls horizontal detail and the Y component controls vertical detail. Values range from 1 to 9. Higher values produce more detailed previews but longer strings. 4×3 is a good balance for most images.
Is my image uploaded anywhere?
No. This tool processes your image entirely in the browser using the Canvas API and the blurhash JavaScript library. Your image never leaves your device.
How do I use blurhash in React or Next.js?
Decode the hash into pixel data using the blurhash library, render it to a canvas or CSS background, and display it while the real image loads. Libraries like react-blurhash handle this automatically. Spronta Images SDK includes built-in blurhash support via the SprontaImage component.
What image formats are supported?
Any format your browser can display: JPEG, PNG, GIF, WebP, AVIF, and SVG. The image is drawn to a Canvas element for pixel extraction, so if your browser can render it, this tool can hash it.
Is this generator free?
Yes, completely free. No signup, no watermarks, no limits. Use it as often as you like.

More free tools