---
title: Overview
description: Compare WebP, BlurHash, and ThumbHash output using measured examples, then choose the representation that fits your frontend.
seo:
  image: /og/overview.png
---

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.

:::tip[Start with WebP]
The default tiny WebP works as an image source with no client decoder. Reach for a native hash when you need the smaller payload, or when ThumbHash's aspect-ratio and alpha metadata are worth writing decoder code for.
:::

## 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.

<PlaceholderComparison />

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](https://evanw.github.io/thumbhash/) 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](https://github.com/MarkusPalcer/blurhash.net) provides the ImageSharp-compatible C# BlurHash encoder and decoder used by the package.
- [BlurHash for JavaScript](https://github.com/woltapp/blurhash/tree/master/TypeScript) verifies native hashes independently in the backoffice preview.
- [ThumbHash](https://github.com/evanw/thumbhash) documents the algorithm and ships the official JavaScript decoder.
- The bundled C# ThumbHash port comes from [pull request 50](https://github.com/evanw/thumbhash/pull/50), pinned to its reviewed commit. See [License and attribution](/license).

## 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](/quickstart), then use the [Delivery API guide](/delivery-api) to consume the property.