Blurhash + ThumbHash Generator
Generate Blurhash and ThumbHash placeholder codes for any image.
Overview
The Blurhash + ThumbHash Generator produces tiny placeholder codes that let your front-end render a blurred preview of an image before the full asset finishes loading. Upload a picture and the tool returns both a Blurhash string (around 20-30 characters) and a ThumbHash string, ready to drop into HTML, JSON, or a database column.
It's aimed at teams shipping image-heavy feeds — social apps, e-commerce galleries, blog cards — where layout shift hurts Core Web Vitals. Compared with low-quality image placeholders, these compact hashes ship as text, render instantly, and avoid the extra HTTP round trip a separate thumbnail would require.
How it works
Blurhash encodes an image as a small set of DCT (discrete cosine transform) basis coefficients. The first coefficient stores the average colour and the rest capture coarse low-frequency variation; the output is base83-packed into a short ASCII string. At decode time the components are reversed back into a smooth, ambient-coloured image that mimics the original's palette.
ThumbHash is a newer alternative that uses a similar DCT but reserves bits for alpha, better preserves aspect ratio, and produces a slightly larger but visually richer preview — often perceptibly closer to the original than Blurhash. Both encoders downsample the source first so generation stays fast even on multi-megapixel uploads.
Examples
Photo (1920x1080) → Blurhash: LEHV6nWB2yk8pyo0adR*.7kCMdnj
Photo (1920x1080) → ThumbHash: HBkSHYSIeHiPiHh4eIhsh0hwiH
Square avatar → Blurhash: L6PZfSi_.AyE_3t7t7R**0o#DgR4
Square avatar → ThumbHash: 1QcSHQRnh493V4dIh4eXh1h4kJUI
Landscape banner → use the Blurhash for instant-rendering CSS,
the ThumbHash for richer above-the-fold previews.
FAQ
Which should I pick — Blurhash or ThumbHash?
ThumbHash gives a closer approximation to the original and supports alpha, but the string is slightly longer. Blurhash has wider library support across iOS, Android, React and Vue.
How big are the strings?
Blurhash is typically 20-30 ASCII characters depending on component count. ThumbHash is around 30-35 characters base64-encoded. Both fit comfortably in a database column or JSON payload.
Can I decode these in the browser?
Yes — both formats have lightweight JavaScript decoders (a few KB) that render to a <canvas> element. Render the placeholder, then swap in the real image when it loads.
Does it work on PNGs with transparency?
ThumbHash preserves alpha. Blurhash flattens against an opaque background, so transparent regions appear as the average background colour.
What's the maximum input size?
Inputs are downsampled before encoding so very large images work fine, but consider sending a 1024 px-wide pre-resize for the best generation speed.