Skip to main content

Introduction

Beautiful image placeholders, without the hassle.

Choose-your-own adventure, from pure CSS to SVG…

Try the Studio

Overview#

"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…

Give each strategy a try to see what works best for your individual use-case.

Tradeoffs#

Whilst most strategies offer fast DOMContentLoaded and LCP, it's important to consider the caveats of each:

  • CSS
    Won't maintain ratio for images that use object-fit
  • SVG
    Doesn't (yet) leverage SVG filter primitives
  • Base64
    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
  • Blurhash
    Uses canvas, so it's not ideal to use with above-the-fold content.