v2.0.0

Key Changes

• 🔥 90% less CSS by default
• 🌐 Remote image support
• 📏 Size customisation
• 🧹 Improvements to DX and docs
• 🆕 A brand new Tailwind JIT plugin

See the new plaiceholder.co/docs for more

Migration

@plaiceholder/css

-- import { getPixelsCSS } from "@plaiceholder/css";
-- import { getImage } from "@plaiceholder/next";
--
-- const src = "/assets/images/preview/preview.jpg";
-- const img = await getImage(src);
-- const pixelsCSS = await getPixelsCSS(img);

++ import { getPlaiceholder } from "plaiceholder";
++ const { css } = getPlaiceholder("/assets/images/preview/preview.jpg");

@plaiceholder/svg

-- import { getPixelsSVG } from "@plaiceholder/svg";
-- import { getImage } from "@plaiceholder/next";
--
-- const src = "/assets/images/preview/preview.jpg";
-- const img = await getImage(src);
-- const pixelsSVG= await getPixelsSVG(img);

++ import { getPlaiceholder } from "plaiceholder";
++ const { svg } = getPlaiceholder("/assets/images/preview/preview.jpg");

@plaiceholder/base64

-- import { getBase64 } from "@plaiceholder/base64";
-- import { getImage } from "@plaiceholder/next";
--
-- const src = "/assets/images/preview/preview.jpg";
-- const img = await getImage(src);
-- const base64= await getBase64(img);

++ import { getPlaiceholder } from "plaiceholder";
++ const { base64 } = getPlaiceholder("/assets/images/preview/preview.jpg");

@plaiceholder/blurhash

-- import { getBlurhash } from "@plaiceholder/blurhash";
-- import { getImage } from "@plaiceholder/next";
--
-- const src = "/assets/images/preview/preview.jpg";
-- const img = await getImage(src);
-- const blurhash= await getBlurhash(img);

++ import { getPlaiceholder } from "plaiceholder";
++ const { blurhash } = getPlaiceholder("/assets/images/preview/preview.jpg");