Beautiful image placeholders, without the hassle.
Choose-your-own adventure, from pure CSS to SVG…
"Plaiceholder" is a suite of Node.js functions for creating low quality image placeholders (LQIP).
There is no "one-size-fits-all" LQIP strategy, so we offer them all…
~600B when rendered as CSS
~1.2kB when rendered in HTML
~300B asset size
Size TBC (but ~3.6kB if using
Give each strategy a try to see what works best for your individual use-case.
Whilst most strategies offer fast
LCP, it's important to consider the caveats of each:
Won't maintain ratio for images that use
Doesn't (yet) leverage SVG filter primitives
Not the nicest looking. Even though plaiceholder makes an opinionated choice to slightly increase saturation for base64 images under-the-hood, colors can often appear drab
canvas, so it's not ideal to use with above-the-fold content.
Doesn't account for transparency.