Strategies
CSS
Converts a specified image Buffer
into a low-res placeholder, outputted as a set of linear-gradient
s (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.