@unpic/placeholder

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

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

Dominant color

Choose your own

BlurHash

blurhashToCssGradientString. Bytes: 603 Gzipped 172

Gradient CSS

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

blurhashToDataUri. Bytes: 142. GZipped 126

BMP URI

data:image/bmp;base64,Qk1aBAAAAAAAADYAAAAoAAAABAAAAAMAAAABABgAAAAAACQAAAATCwAAEwsAAAAAAAAAAAAAzNbS7e7s0cvMcneGrrfBz9HasazCPUaNZnugg5O2g5HEE0qg

LQIP. Bytes: 0. GZipped 0

LQIP URI

Dominant color

imageToCssGradient. Bytes: 0. GZipped 20

CSS Gradient

background-image:

CSS Variables. Bytes: 0. GZipped 20

CSS Variables

Shared CSS Class