@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.

Choose your own

BlurHash

blurhashToCssGradientString. Bytes: 603 Gzipped 165

Gradient CSS

background-image: radial-gradient(at 0 0,#a07b66,#00000000 50%), radial-gradient(at 33% 0,#b69383,#00000000 50%), radial-gradient(at 67% 0,#c49183,#00000000 50%), radial-gradient(at 100% 0,#a04a13,#00000000 50%), radial-gradient(at 0 50%,#c1b7ae,#00000000 50%), radial-gradient(at 33% 50%,#dad1cf,#00000000 50%), radial-gradient(at 67% 50%,#c2acb1,#00000000 50%), radial-gradient(at 100% 50%,#8d463d,#00000000 50%), radial-gradient(at 0 100%,#d2d6cc,#00000000 50%), radial-gradient(at 33% 100%,#eceeed,#00000000 50%), radial-gradient(at 67% 100%,#cccbd1,#00000000 50%), radial-gradient(at 100% 100%,#867772,#00000000 50%)

blurhashToDataUri. Bytes: 142. GZipped 126

BMP URI

data:image/bmp;base64,Qk1aBAAAAAAAADYAAAAoAAAABAAAAAMAAAABABgAAAAAACQAAAATCwAAEwsAAAAAAAAAAAAAzNbS7e7s0cvMcneGrrfBz9HasazCPUaNZnugg5O2g5HEE0qg

Dominant color