ThumbHash Generator

What is ThumbHash (in one paragraph)

ThumbHash (by Evan Wallace) is a tiny visual fingerprint of an image — typically around 25 bytes. Store it inline with your data (JSON, database row, HTML) and decode it to a miniature placeholder shown while the real image loads. It's the modern answer to the blurred-placeholder pattern: same instant-paint UX as BlurHash, but with more detail, more accurate colors, the aspect ratio baked in, and support for transparency — all in a similar number of bytes. The official demo at evanw.github.io/thumbhash shows the idea live; this page generates the hash.

ThumbHash vs BlurHash — the honest comparison

Both solve the same problem — something meaningful on screen before the image arrives — and they trade off honestly:

ThumbHash wins on fidelity: it encodes the aspect ratio (so layouts don't shift), handles alpha/transparency (BlurHash renders it against black), and produces more accurate colors with more detail in roughly the same size. Its parameters are automatic — no tuning. BlurHash wins on ecosystem and string-safety: a plain ASCII string that drops into URLs and JSON with zero fuss, plus configurable detail via its component counts and a huge installed base of decoders. New placeholder pipelines usually pick ThumbHash; existing BlurHash infrastructure has no reason to migrate. We ship a BlurHash generator too — generate both and compare on your own images.

Where the hash goes in your app

The typical pipeline: generate at build time (this page for one-offs, the thumbhash npm package in your build script for hundreds), ship the base64 string with your image metadata (API response, database row, static JSON), then decode client-side while the real image loads — via thumbHashToDataURL into an <img> src, a Next.js blurDataURL, or components like nextjs-thumbhash and Expo Image that accept the hash directly. Because the aspect ratio is embedded, the placeholder also reserves the exact layout box — no content shift when the real image lands.

How to use this generator

1. Drop an image on the page. Click the box or drag the file in — JPG, PNG (transparency works!), WebP, anything the browser opens.
2. Generate. One click encodes the hash, shows the decode preview, byte count and average color.
3. Copy base64 or hex. Base64 for shipping in JSON/APIs; hex for debugging.
4. Decode it in your app. Use the official thumbhash package to turn the string back into a placeholder at runtime.
5. Check any hash. Paste a ThumbHash into the checker below to preview what it decodes to — including its aspect ratio and average color.

Real-world use cases

• Next.js image placeholders — decode to a data URL and feed it as blurDataURL; no layout shift, instant paint.
• Chat and feed apps — tiny hashes travel with message payloads; previews render before media downloads.
• Marketplaces and galleries — every tile paints instantly, then sharpens as images arrive.
• Transparent PNGs and logos — the one placeholder format that keeps the alpha channel.
• Offline-first apps — hashes cached with metadata render placeholders with zero network.

Tips

• Generate once, ship everywhere. The hash is deterministic — same image, same bytes, every time.
• Don't pre-shrink your source. The encoder downsamples internally; feed the best quality you have.
• Use base64 in JSON. It's the compact, standard encoding — hex is for humans debugging.
• Pair with width/height metadata. The aspect ratio is embedded, but explicit dimensions still help your layout code.
• Test with transparency. Drop a transparent PNG in above and watch the preview — that's the BlurHash-killer feature.

The bottom line

~25 bytes that make every image feel instant — with the aspect ratio and transparency included. Generate it here, ship it with your data, decode it on the client.