Strategies

CSS

Converts a specified image Buffer into a low-res placeholder, outputted as a set of linear-gradients (in the form of a JavaScript style object).

Pros: Fast DOMContentLoaded and LCP
Cons: ? (Still figuring out)

For a "blurred" effect, extend the returned styles with filter: blur(<value>) and transform: scale(<value>).

Installation

npm i @plaiceholder/css

Example

import fs from "fs";
import path from "path";
import { promisify } from "util";
import { getPixelsCSS } from "@plaiceholder/css";
const image = await promisify(fs.readFile)(
  path.join("path", "to", "your", "image.jpg")
);
const css = await getPixelsCSS(image);
console.log(css);
// Outputs
// {
//   backgroundImage: "…"
//   backgroundPosition: "…"
//   backgroundSize: "…"
//   backgroundRepeat: "…"
// }

SVG

Converts a specified image Buffer into a low-res placeholder, outputted as an SVG.

Pros: Fast DOMContentLoaded and LCP
Cons: ? (Still figuring out)

For a "blurred" effect, extend the returned SVG's styles with filter: blur(<value>) and transform: scale(<value>).

💡

Although it returns the SVG in the format of React.createElement() arguments, you are not constrained to using React.js.

e.g. See the 11ty example.

Installation

npm i @plaiceholder/svg

Example

import fs from "fs";
import path from "path";
import { promisify } from "util";
import { getPixelsSVG } from "@plaiceholder/svg";
const image = await promisify(fs.readFile)(
  path.join("path", "to", "your", "image.jpg")
);
const svg = await getPixelsSVG(image);
console.log(svg);
// Outputs
// [
//   "svg",
//   { ...props }
//   [
//     [
//       "rect",
//       { ...childProps }
//     ],
//     ...etc
//   ]
// ]

Base64

Converts a specified image Buffer into a low-res image, encoded as Base64 string.

Pros: Fast DOMContentLoaded and LCP
Cons: ? (Still figuring out)

For a "blurred" effect, add filter: blur(<value>) and transform: scale(<value>) styles to the image.

Installation

npm i @plaiceholder/base64

Example

import fs from "fs";
import path from "path";
import { promisify } from "util";
import { getBase64 } from "@plaiceholder/base64";
const image = await promisify(fs.readFile)(
  path.join("path", "to", "your", "image.jpg")
);
const base64 = await getBase64(image);
console.log(base64);
// Outputs
// data:image/jpeg;base64,/9j/2wBDAAYEBQY…

Blurhash

Converts a specified image Buffer into a low-res image, encoded as Blurhash string accompanied by its width and height

Pros: Lightweight, fast DOMContentLoaded and LCP
Cons: As it uses canvas, it's not ideal to use Blurhash for above-the-fold content.

This can be passed into a library such as [react-blurhash][react-blurhash].

Installation

npm i @plaiceholder/blurhash

Example

import fs from "fs";
import path from "path";
import { promisify } from "util";
import { getBlurhash } from "@plaiceholder/blurhash";
const image = await promisify(fs.readFile)(
  path.join("path", "to", "your", "image.jpg")
);
const blurhash = await getBlurhash(image);
console.log(blurhash);
// Outputs
//  {
//    hash: "U.QSL{%1bdxtR...",
//    height: 32,
//    width: 32
//  }

🧪 Experimental

Blurhash to CSS

See the blurhash-to-css repo for further details.