Beautiful image placeholders, without the hassle.
Choose-your-own adventure, from pure CSS to SVG…
plaiceholder@3.0: Final Release
The plaiceholder project is feature complete and will now be kept in maintenance mode.
Read the migration guide for further information.
If this project has been useful to you, please consider sponsoring my work (opens in a new tab).
Overview
"Plaiceholder" is a suite of server-side functions for creating low quality image placeholders (LQIP).
There is no "one-size-fits-all" LQIP strategy, so we offer them all…
- Color
It's just a color - CSS
~600B when rendered as CSS - SVG
~1.2kB when rendered in HTML - Base64
~300B asset size
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:
- Color
Plain; not the most exciting. - CSS
Won't maintain ratio for images that useobject-fit - SVG
Doesn't (yet) leverage SVG filter primitives (opens in a new tab) - 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