Overview

Compare WebP, BlurHash, and ThumbHash output using measured examples, then choose the representation that fits your frontend.

Blur Placeholder can store three kinds of value, and each one trades payload size against how much work your frontend has to do. This page shows the measured difference so you can choose before you configure anything.

Measured output

Every result below came from this package running its documented defaults. The tiny images are enlarged and blurred with CSS, which is how a placeholder is normally presented. The source set covers landscape, portrait, and transparent artwork.

Wide alpine lake at sunrise

2.8 MB source

Tiny WebP placeholder for Wide alpine lake at sunrise — **Tiny WebP**146 B WebP · 219 data URL characters

BlurHash placeholder for Wide alpine lake at sunrise — **BlurHash**37 B native · 140 B decoded WebP`blurhash:LRB;FGH;obI[.AR%WTazpLjEoIbb`

ThumbHash placeholder for Wide alpine lake at sunrise — **ThumbHash**38 B native · 132 B decoded WebP`thumbhash:WdcJJYZwhmd+d3d7iHZqpJ918mlF`

Tall bird-of-paradise plant in a greenhouse

2.6 MB source

Tiny WebP placeholder for Tall bird-of-paradise plant in a greenhouse — **Tiny WebP**136 B WebP · 207 data URL characters

BlurHash placeholder for Tall bird-of-paradise plant in a greenhouse — **BlurHash**37 B native · 116 B decoded WebP`blurhash:LGCiv%kXIp%2_2%2S3x[~CoNI:xa`

ThumbHash placeholder for Tall bird-of-paradise plant in a greenhouse — **ThumbHash**38 B native · 126 B decoded WebP`thumbhash:FAkKBQRXaK+o6Gdoh4d3VzChYkn5`

Paper hot-air balloon with transparency

1.0 MB source

Tiny WebP placeholder for Paper hot-air balloon with transparency — **Tiny WebP**332 B WebP · 467 data URL characters

BlurHash placeholder for Paper hot-air balloon with transparency — **BlurHash**37 B native · 146 B decoded WebP`blurhash:LkFE1Ss:0zRk=yoLI:ayI:WVs:oL`

ThumbHash placeholder for Paper hot-air balloon with transparency — **ThumbHash**46 B native · 442 B decoded WebP`thumbhash:ZGmCDQA1uwKNZWlmRgd4WcEGCJeLdnVZZw==`

The measurements keep the compact native hash separate from the optional decoded WebP. A data URL also carries roughly one-third base64 overhead plus its MIME prefix, so the table reports binary WebP bytes alongside total data URL characters.

Which output should I choose?

Output	Best when	Advantages	Trade-offs
Tiny WebP	You want a browser-ready `blurDataURL` and no runtime library.	Works anywhere an image URL works, with predictable dimensions.	Larger than a native hash, and aspect ratio still has to come from the media metadata.
BlurHash	You want a short text value and already have a decoder.	Compact text with an adjustable X/Y component grid, plus decoders in most languages.	Needs a decoder when stored natively, and encodes neither aspect ratio nor alpha.
ThumbHash	Aspect ratio, average color, or transparency matters.	Encodes aspect ratio and alpha, and reproduces color more accurately.	Needs a decoder when stored natively, and its detail level is fixed.
Hash decoded to WebP	You want a hash’s reconstructed look but cannot ship a decoder.	Browser-ready output that keeps the BlurHash or ThumbHash appearance.	Gives up most of the native hash’s size advantage.

The ThumbHash project page compares the two algorithms directly and shows where ThumbHash wins on aspect ratio, color, and alpha. BlurHash is still the better fit when you want its tunable component grid or its wider set of decoders.

Libraries and attribution

blurhash.net provides the ImageSharp-compatible C# BlurHash encoder and decoder used by the package.
BlurHash for JavaScript verifies native hashes independently in the backoffice preview.
ThumbHash documents the algorithm and ships the official JavaScript decoder.
The bundled C# ThumbHash port comes from pull request 50, pinned to its reviewed commit. See License and attribution.

Stored value

The property holds one self-describing string, never a JSON envelope:

Prefix	Representation
`data:image/webp;base64,`	A direct tiny WebP, or a hash reconstructed and encoded as WebP.
`blurhash:`	Native BlurHash text.
`thumbhash:`	Base64-encoded native ThumbHash bytes.

Continue with the Quickstart, then use the Delivery API guide to consume the property.