Overview

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

Use this page to compare the package’s actual output formats and payloads. The landing page owns the product overview and backoffice preview; this page focuses on the technical choice your frontend needs to make.

Compare the three approaches

Every result below was produced by this package with its documented defaults. The tiny images are enlarged and blurred with CSS, which is how a placeholder is normally presented. The source set deliberately includes 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 separate the compact native hash from the optional decoded WebP representation. A data URL also includes roughly one-third base64 overhead plus its MIME prefix; the table reports both binary WebP bytes and total data URL characters.

Which approach should I choose?

Approach	Best when	Advantages	Trade-offs
Tiny WebP	You want a browser-ready `blurDataURL` with no runtime library.	Simplest integration; predictable dimensions and output; works anywhere an image URL works.	Usually larger than a native hash; aspect ratio must still come from the media metadata.
BlurHash	You want a very short configurable text value and already have a decoder.	Compact text; adjustable X/Y component detail; broad ecosystem support.	Requires client decoding when stored natively; does not encode aspect ratio or alpha.
ThumbHash	Aspect ratio, accurate average color, or transparency matters.	Encodes aspect ratio and alpha; strong color reproduction; compact binary representation.	Requires client decoding when stored natively; algorithm detail is not configurable.
Hash decoded to WebP	You prefer the hash’s reconstructed look but cannot ship a decoder.	Browser-ready output while preserving the BlurHash or ThumbHash aesthetic.	Removes most of the native hash’s payload advantage; server output is larger than the raw hash.

ThumbHash’s upstream documentation describes its aspect-ratio, color, detail, and alpha advantages over BlurHash. BlurHash remains attractive when its tunable component grid or larger decoder ecosystem is more important.

Libraries and attribution

blurhash.net provides the ImageSharp-compatible C# BlurHash encoder and decoder used by the package.
BlurHash for JavaScript is used by the Backoffice preview for independent native-hash verification.
ThumbHash documents the algorithm, official JavaScript decoder, and interactive ThumbHash demo.
The integrated C# ThumbHash port is attributed to pull request 50 and pinned to its reviewed commit. See License and attribution.

Stored value

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

Prefix	Representation
`data:image/webp;base64,`	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 field.