Beautiful image placeholders, without the hassle.
Choose-your-own adventure, from pure CSS to SVG…
firstname.lastname@example.org: Final Release
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).
"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…
It's just a color
~600B when rendered as CSS
~1.2kB when rendered in HTML
~300B asset size
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:
Plain; not the most exciting.
Won't maintain ratio for images that use
Doesn't (yet) leverage SVG filter primitives (opens in a new tab)
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