BlurHash is a compact string representation of a blurred image placeholder, created by Wolt (a Finnish food delivery company). It works by encoding an image's color information into a short ASCII string using a Discrete Cosine Transform (DCT). When decoded, this string produces a smooth, blurred approximation of the original image. The result is a tiny string (typically 20–40 characters) that can be stored in a database, sent via API, or embedded directly in HTML, allowing applications to show beautiful placeholder images while the full-resolution image loads.

The X and Y components control the level of detail preserved in the BlurHash. Higher values capture more detail, resulting in a longer hash string. Component X (1–9) controls horizontal detail, while Component Y (1–9) controls vertical detail. The default values of 4×3 produce a balanced 20–30 character hash suitable for most use cases. For very simple images or smaller placeholders, you can use lower values like 2×2. For images with complex gradients or important vertical structures, consider increasing Y.

No. BlurHash is a lossy, one-way compression algorithm. The encoding process discards most of the image's fine details, preserving only the broad color gradients and luminance patterns. When you decode a BlurHash, you get a smooth, blurred approximation — not the original sharp image. This is intentional: BlurHash is designed as a lightweight placeholder, not an image compression format. The original image must be stored separately and loaded afterward.

A BlurHash string length is determined by the formula: 4 + 2 × X × Y characters. With the popular default components of X=4 and Y=3, the hash is 28 characters long (e.g., LKO2?U%2Tw=w]~RBVZRi};RPxuwH). With X=2 and Y=2, it's just 12 characters. At maximum components (9×9), the hash reaches 166 characters. Most applications use 4×3 or 3×2 for an ideal balance of quality and compactness.

BlurHash offers several advantages over traditional Low Quality Image Placeholders (LQIP): it's a short string (not a separate image file), requires no extra HTTP request to load the placeholder, can be embedded directly in JSON API responses or HTML attributes, and is decodable entirely client-side with a tiny library. Compared to solid-color or gradient placeholders, BlurHash provides a much more accurate preview. However, for very simple images, a CSS gradient might suffice. For most web and mobile apps, BlurHash strikes an excellent balance between quality, size, and ease of implementation.

To use BlurHash in a web app: (1) Encode your images to BlurHash strings server-side (using libraries for Node.js, Python, Go, PHP, or Ruby) or client-side using the blurhash npm package. (2) Store the hash string alongside your image metadata in your database or CMS. (3) Decode the hash on the client using the official blurhash JavaScript library, which decodes to pixel data you can render on a canvas. Popular frameworks like React, Vue, and Svelte have dedicated BlurHash components available. You can also use this online tool to generate hashes manually for static sites.

BlurHash works with any image format that can be rendered to a canvas or decoded to raw pixel data — including JPEG, PNG, WebP, AVIF, BMP, TIFF, and SVG. The encoding process operates on raw RGBA pixel arrays, so the source format doesn't affect the hash quality. However, note that SVG images with transparency or complex vector gradients may produce slightly different results than raster images. For best results, use images with natural color gradients and avoid images that are entirely text or have extreme contrast.

Yes, completely free. BlurHash is open-source software released under the MIT License by Wolt. This means you can freely use it in personal projects, commercial applications, SaaS products, and enterprise software without any licensing fees or attribution requirements. The algorithm itself is also unencumbered by patents. Both the reference implementation and the algorithm specification are freely available on GitHub under the woltapp/blurhash repository.

The punch parameter (default: 1.0) adjusts the contrast and saturation of the decoded BlurHash preview. Values above 1.0 increase contrast, making colors more vivid and shadows deeper — this can make the placeholder look more dramatic. Values below 1.0 produce a softer, more muted preview. Punch is purely a rendering parameter; it does not affect the hash string itself. Most applications use the default of 1.0, but you can tune it to match your design's aesthetic.

BlurHash achieves extreme compression ratios. A typical 100 KB JPEG image can be represented by a ~28-character BlurHash string (about 28 bytes), achieving a 3,500:1 compression ratio. Even compared to a tiny 2 KB thumbnail, BlurHash is ~70× smaller. This dramatic size reduction makes it ideal for scenarios where bandwidth is limited, such as mobile apps, slow network connections, or API responses containing hundreds of image references. The trade-off is that only a blurred approximation is preserved — but that's exactly the intended use case.