ThumbHash Generator

ThumbHash: the modern image placeholder format

ThumbHash is a very compact placeholder format for images, created by Evan Wallace — co-founder and former CTO of Figma — and released as open source in 2023. It targets the same problem as BlurHash (showing a meaningful preview while the full image loads) but produces smaller strings, better visual quality, and supports the alpha channel for transparent assets.

Like BlurHash, ThumbHash relies on a Discrete Cosine Transform (DCT) to keep only the lowest-frequency components of the image. Its bit packing is significantly more efficient: typical hashes are 10 to 25 characters long when encoded as base64, versus 25 to 35 for BlurHash, while the decoded preview generally looks better — especially for photographs and dark scenes.

What ThumbHash improves over BlurHash

• Smaller payload: ~25 bytes vs ~30 bytes for an equivalent BlurHash, with arguably better quality.
• Better dominant-color reproduction: ThumbHash explicitly preserves the average color and the boundary tone.
• Alpha channel support: it can represent semi-transparent PNGs and WebPs — BlurHash cannot.
• Aspect ratio baked in: you do not need to store width and height alongside the hash.
• Faster decode: about 3 ms on a mid-range mobile device, versus 5 ms for BlurHash.

Encoding flow

The reference implementation is published on github.com/evanw/thumbhash with a live demo at thumbhash.com. The typical pipeline is identical to BlurHash:

// Node.js encode
import { rgbaToThumbHash } from 'thumbhash'
import sharp from 'sharp'
const { data, info } = await sharp(buf)
  .resize(100, 100, { fit: 'inside' })
  .ensureAlpha().raw().toBuffer({ resolveWithObject: true })
const hash = rgbaToThumbHash(info.width, info.height, data)
const b64 = Buffer.from(hash).toString('base64')

Official ports cover JavaScript, TypeScript, Python, Swift, Java, Rust, Go and PHP. The encoder expects an image already downscaled to at most 100×100 — anything larger is wasted CPU.

Migrating from BlurHash to ThumbHash

There is no in-place migration: BlurHash and ThumbHash strings are not interchangeable. The standard playbook is:

• Add a new column (for example thumb_hash) without dropping the existing BlurHash.
• Re-encode lazily — generate the ThumbHash the next time the image is touched, or batch in the background.
• Fall back to BlurHash when the new field is null, and remove the old column once coverage is complete.
• Both formats are tiny (~30 bytes), so storing both during the transition costs essentially nothing.

Adoption and modern image pipelines

Adoption is still emerging but accelerating. Cloudinary announced ThumbHash support in 2024, Imgix is evaluating it, and several Next.js plugins already wrap it as a drop-in replacement for the built-in placeholder="blur" behavior. For dark-mode interfaces, ThumbHash is particularly valuable because its background-color extraction makes it easy to dim or invert the placeholder before the image arrives.

FAQ

Does ThumbHash replace BlurHash? It is positioned as a successor — same author-friendly model, smaller strings, better quality and transparency support — but BlurHash remains battle-tested and perfectly fine for existing projects.

Is adoption strong yet? It is growing fast: Cloudinary already supports it natively and major open-source libraries ship encoders. Expect it to become a default in 2026.

What is the minimum string size? About 10 characters in base64 for a very small image. Typical photographs land between 18 and 25 characters.

Does it handle transparency? Yes — unlike BlurHash, ThumbHash encodes the alpha channel, making it ideal for logos, stickers and product cutouts.

Should I encode full-resolution or thumbnails? Always pre-resize to at most 100×100 before encoding. The DCT only captures low frequencies, so larger inputs just waste CPU.