Skip to content

BlurHash / ThumbHash

Encodes an image into a short BlurHash or ThumbHash string for use as a loading placeholder.

A BlurHash is twenty-odd characters that decode into a blurred version of an image — short enough to sit in a database column next to the URL and travel in the same JSON, so the layout can show something recognisable before the photo arrives.

🔒 Runs entirely in your browserblurhashplaceholderwebperformance
Fill
1200 by 630 placeholder

SVG data URI

580 byte

Percent-encoded rather than base64: about 25% smaller, and you can still read it. Paste straight into background-image: url("…")

How to use it

  1. Drop an image, or paste a hash

    Both directions work on the same panel: an image gives you a hash, a hash gives you the decoded preview.

  2. Choose the component counts

    A hash is 4 + 2·x·y characters, so 4×3 is 28. More components means more detail and a longer string; four by three is the usual default.

  3. Use punch on a flat photograph

    It scales the variation without moving the average colour, which rescues a low-contrast image that would otherwise decode to a flat rectangle.

Common questions

Why is the source downscaled to 32px first?

Because everything above that frequency is discarded by the transform anyway. Encoding at full resolution spends a hundred million basis evaluations to produce the same 28 characters.

I only need an average colour.

Then take the first six characters of the hash — that is exactly what they encode, so a page that only needs a background colour does not have to decode anything.

BlurHash or ThumbHash?

BlurHash is the one with libraries everywhere and is what this page emits. ThumbHash is shorter for the same quality and carries alpha, but you need a decoder on the client either way — pick the one your stack already has.

Feed it from

Placeholder Image

Generates a solid or gradient placeholder at any size with the dimensions drawn on it.

Runs entirely in your browser

Average & Dominant Colour

Returns one representative colour for an image — mean, median or most frequent — as a colour asset.

Runs entirely in your browser

PNG Compressor

Quantises the palette and rewrites the deflate stream to shrink a PNG without changing its dimensions.

Runs entirely in your browser

JPEG Compressor

Re-encodes a JPEG at a chosen quality with a live before/after size and a difference view.

Runs entirely in your browser

Next

These accept what this tool produces, so the result can go straight in.

Average & Dominant Colour

Returns one representative colour for an image — mean, median or most frequent — as a colour asset.

Runs entirely in your browser

Image Resizer

Resizes by pixels, percentage or a target longest edge, with aspect-ratio lock and batch presets.

Runs entirely in your browser

Placeholder Image

Generates a solid or gradient placeholder at any size with the dimensions drawn on it.

Runs entirely in your browser

Base64 Encoder & Decoder

Encodes and decodes Base64 and Base64URL for text or files, handling UTF-8 correctly.

Runs entirely in your browser

Base64 to Image

Decodes a Base64 string or data URI back into a viewable, downloadable image.

Runs entirely in your browser

Colour Format Converter

Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.

Runs entirely in your browser