Better image loading, generated in Umbraco.

Generate a tiny WebP, BlurHash, or ThumbHash when an Image changes. Store it once, expose one self-describing string, and keep image processing out of public requests.

Get started View on GitHub

dotnet add package TheBuilder.BlurPlaceholder

For Umbraco CMS 17.1 and later

Generated once, stored with the image. No image processing during public requests, no required browser decoder, and no separate placeholder service.

One field, three representations

Choose the smallest frontend contract that fits your stack. The default WebP works anywhere an image URL works.

Tiny WebP

Browser-ready data URL · no decoder required

BlurHash

Compact, configurable native hash

ThumbHash

Aspect ratio, color, and alpha metadata

Compare formats and payload sizes

Built around the media lifecycle

Placeholder generation belongs next to the source image—not in every frontend that consumes it.

Generated on save

Create the placeholder when an Image changes and store it with the media item. Public requests do no image processing.

Backfilled safely

Process existing images once per output configuration, with resumable maintenance and targeted retries for transient failures.

Delivered as one string

Opt into blurPlaceholder through the Delivery API and pass the default WebP value straight to your image component.

One frontend-ready field

Request blurPlaceholder explicitly through the Delivery API. The default WebP value can go straight into an image component, while native hashes remain self-describing when a server-side decoder is worth it.

Read the guide

Delivery API responseJSON

{
  "name": "Alpine lake",
  "url": "/media/alpine-lake.jpg",
  "blurPlaceholder": "data:image/webp;base64,UklGR..."
}

Generate once. Deliver everywhere.

Install the package, save an image, and request the generated field only where your frontend needs it.

Read the quickstart Umbraco Marketplace