peartools

ThumbHash Generator

Turn an image into a tiny ThumbHash. A compact placeholder that keeps the average color, aspect ratio, and transparency, and is usually smaller than a BlurHash. Get the Base64 hash and a ready preview. Everything happens in your browser, so nothing is uploaded.

Drag and drop an image here, or

JPG, PNG, WebP, and GIF work. Up to 25 MB. Nothing is uploaded.

What is a ThumbHash?

A ThumbHash is a very small piece of data, usually around 20 to 25 bytes, that stores a blurred preview of an image. It does the same job as a BlurHash: show a smooth, colored blur while the real image loads. ThumbHash is the newer design of the two.

The difference is what it packs in. A ThumbHash also carries the image's average color, its rough aspect ratio, and an alpha channel for transparency. That means one hash is often enough to reserve the right space and handle cutout PNGs, with no extra fields to store.

Because it is raw bytes rather than text, you usually store a ThumbHash as a Base64 string. This tool shows that string, plus a preview image built from the hash so you can see exactly what your visitors would.

ThumbHash compared to BlurHash and LQIP

  • ·Smaller than BlurHash. For most images the hash is shorter, which adds up across a big catalog.
  • ·Keeps transparency. Cutout PNGs and logos get a placeholder with a real alpha channel.
  • ·Carries color and shape. The average color and aspect ratio come built in.
  • ·Needs a decoder. Like BlurHash, but unlike an LQIP, you render it with a small library on the client.
  • ·Try both. See what the BlurHash generator produces for the same image.

How to use it

  1. 1

    Add your image

    Drag a JPG, PNG, or WebP onto the box or pick a file. It is read in your browser and never uploaded. The tool shrinks it to at most 100 pixels, which is all ThumbHash needs.

  2. 2

    Get the ThumbHash

    The tool encodes the image into a compact ThumbHash and shows it as a Base64 string, usually only 20 to 25 bytes, along with a ready-to-use preview image built from the hash.

  3. 3

    Check the preview

    The decoded placeholder sits next to your original so you can see the blur, the average color, and the transparency it captured before you ship it.

  4. 4

    Copy what you need

    Copy the Base64 hash to store with your image, or copy the preview data URL if you want a placeholder you can use with no decoder at all.

How to decode a ThumbHash on the web

Turn the Base64 string back into bytes, then let the library build an image URL you can use as the placeholder:

import { thumbHashToDataURL } from "thumbhash";

// The Base64 string from this tool, back to raw bytes.
const hash = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));

// A ready-to-use image for the placeholder.
const url = thumbHashToDataURL(hash);
imgElement.src = url; // show it, then swap in the full image on load.

The same library also gives you the average color and aspect ratio from the hash, and there are ports for Swift, Rust, Go, and other languages.

When to choose ThumbHash

ThumbHash fits best when size and transparency matter. These are the cases where it shines:

  • ·Developers who want the smallest hash. ThumbHash is usually smaller than a BlurHash for the same image and still looks good, so it is a strong pick when you store a placeholder for every image in a large catalog.
  • ·Apps with transparent images. Unlike BlurHash, ThumbHash keeps an alpha channel, so logos and cutout PNGs get a placeholder that respects their transparency instead of a solid block.
  • ·Teams that want the aspect ratio built in. A ThumbHash carries the image's rough aspect ratio and average color, so you can reserve the right space and set a background color without storing extra fields.
  • ·Anyone comparing placeholder formats. If you already use BlurHash, this is a quick way to see what ThumbHash produces for the same image and decide whether the smaller size is worth switching.

Frequently asked questions

What is a ThumbHash?
A ThumbHash is a compact binary hash, usually around 20 to 25 bytes, that stores a blurred preview of an image. It is a newer take on the same idea as BlurHash, and it also encodes the average color, the rough aspect ratio, and transparency, which BlurHash does not.
How do I generate a ThumbHash from an image?
Add your image here and the tool encodes a ThumbHash in your browser. It shows the hash as a Base64 string plus a preview image built from that hash. Copy the string to store with your image. Nothing is uploaded.
ThumbHash vs BlurHash: which should I use?
Both show a blur while an image loads. ThumbHash is usually smaller, keeps transparency, and carries the aspect ratio and average color, so it needs fewer extra fields. BlurHash has been around longer and has more libraries. If you are starting fresh and want the smallest placeholder, ThumbHash is a good default. You can try both on our BlurHash generator to compare.
Why is the ThumbHash shown as Base64?
A ThumbHash is raw bytes, not text, so it is not printable on its own. Base64 turns those bytes into a safe string you can put in JSON, a database column, or an API response. Your decoder converts the Base64 back to bytes before rendering.
How do I decode a ThumbHash on my site?
Use the thumbhash library. Convert your Base64 string back to a byte array, then call the helper that turns a ThumbHash into a data URL, or into raw RGBA pixels you paint to a canvas. There are ports for JavaScript, Swift, Rust, and more.
Are my images private?
Yes. The whole process runs in your browser. Your image is never uploaded to a server or saved anywhere, and once the page has loaded you can even use it offline.