Tiny WebP
Browser-ready data URL · no decoder required
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.
dotnet add package TheBuilder.BlurPlaceholderFor Umbraco CMS 17.1 through 18.x
Generated once, stored with the image. No image processing during public requests, no required browser decoder, and no separate placeholder service.
One property, three representations
Pick the smallest value your frontend can work with. The default WebP works anywhere an image URL works.
BlurHash
Compact, configurable native hash
ThumbHash
Aspect ratio, color, and alpha metadata
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 property
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.
GET /umbraco/delivery/api/v2/media/item/{mediaId}?expand=properties[$all]&fields=properties[blurPlaceholder]{
"name": "Alpine lake",
"url": "/media/n1hbay0t/alpine-lake.jpg",
"properties": {
"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.
More from TheBuilder
Focused packages for modern Umbraco projects.
Web Analytics
Shows the traffic from Vercel Web Analytics or Plausible in the Umbraco backoffice, for the whole site and for each page.
AI Image Disclosure
Reads the C2PA Content Credentials on uploaded images and flags the ones that say they were made or edited with AI.
App Translations
Lets editors change the next-intl or i18next messages in your app from Umbraco. Your app fetches the changes when it runs.
API OIDC
Lets frontends call the Delivery API and your own endpoints with an OIDC token from their hosting platform, instead of a shared API key.
Schema City
Shows your Document Types as a city in the backoffice, with the links between them, and flags schema problems before they ship.
Umbraco Rich Text
Renders the rich text JSON from the Umbraco Content Delivery API with React. You decide how each block and node is rendered.