@unpic/placeholder playground

This is a library for generating low quality image placeholders by extracting the dominant color from image or server-side rendering a BlurHash. These are displayed while an image is loading, and give better appearance and can help reduce the LCP time. It can render a Blurhash to either a set of CSS gradients, or a tiny BMP image data URI. These are usually both around 150 bytes in size, and can be applied as a CSS background image to the img element. For more details, see the docs.

Try it out by clicking one of the examples or choosing your own image. The placeholder images are then displayed below.

blurhashToCssGradientString. Bytes: 603 Gzipped 165

Gradient CSS

blurhashToDataUri. Bytes: 142. GZipped 126


Dominant color