Introduction

Beautiful image placeholders, without the hassle.

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

---

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…

• CSS
  ~600B when rendered as CSS
• SVG
  ~1.2kB when rendered in HTML
• Base64
  ~300B asset size
• Blurhash
  Size TBC (but ~3.6kB if using react-blurhash)

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.
  Doesn't account for transparency.