---
sidebar_position: 1
slug: /
hide_title: true
---

import IntroHeader from "../src/components/IntroHeader";

# Introduction

<IntroHeader
  headline="Beautiful image placeholders, without the hassle."
  tagline="Choose-your-own adventure, from pure CSS to SVG…"
  link={{ label: "Try the Studio", href: "https://plaiceholder.co" }}
/>

---

## 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**](/usage#css)  
  ~600B when rendered as CSS
- [**SVG**](/usage#svg)  
  ~1.2kB when rendered in HTML
- [**Base64**](/usage#base64)  
  ~300B asset size
- [**Blurhash**](/usage#blurhash)  
  Size TBC (but ~3.6kB if using [`react-blurhash`](https://bundlephobia.com/package/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**](/usage#css)  
  Won't maintain ratio for images that use `object-fit`
- [**SVG**](/usage#svg)  
  Doesn't (yet) leverage [SVG filter primitives](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur)
- [**Base64**](/usage#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**](/usage#blurhash)  
  Uses `canvas`, so it's not ideal to use with above-the-fold content.
