What is BlurHash?

BlurHash was created by Dag Agren at Wolt. It uses a DCT (Discrete Cosine Transform) to encode the low-frequency components of an image into a compact base83 string. Because only low frequencies are stored, the result is always a blurry preview - never a recognisable reproduction of private content.

Integration examples

The hash string can be decoded in the browser using the blurhash npm package, or on the server using Swift/Kotlin/Go libraries. Frameworks like Next.js Image and Astro also support BlurHash placeholders.

X and Y component parameters

The X and Y component values control how much spatial detail is encoded in the hash, and directly affect the length of the output string:

Components (X × Y)	Hash length (approx.)	Detail level	Typical use
2 × 2	~20 chars	Minimal - solid color gradient	Tiny thumbnails, avatar placeholders
4 × 3	~30 chars	Default - recognizable blur	General images, blog photos
6 × 4	~40 chars	Good - distinct shapes visible	Hero images, product photos
8 × 6	~55 chars	High - fine detail in blur	When longer hash is acceptable

Higher component counts produce longer hash strings but more detailed blurs. The tradeoff between string length and visual quality peaks around 4×3 for most images - additional components add length with diminishing returns in perceived quality.

Performance impact

Decoding a BlurHash and rendering it to a canvas takes under 1 millisecond in JavaScript for typical component counts. The recommended implementation is:

Render the decoded BlurHash as a CSS background-image on a container element.
Load the real image behind it with loading="lazy".
Once the image loads, fade out the BlurHash canvas or remove it from the DOM.

This approach eliminates layout shift (the space is pre-occupied) and provides a visually pleasant loading experience with near-zero performance overhead.