v3.0.0

plaiceholder@3.0: Final Release

Note

The 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 🖤

Features

• New color return for getting an image's "dominant" color
• New pixels return for getting each raw pixel's rgba values
• Transparent images no longer have their alpha channel removed by default
• Support for EXIF orientation (via autoOrient option)
• New and improved docs

Breaking Changes

Read the migration guide for further information.

• ESM only
• File paths or external URLs are no longer supported – getPlaiceholder now expects a Buffer
  (see the migration guide for examples)
• blurhash no longer returned
• img → metadata

Note

If no major issues are reported in the coming weeks, this repository will be archived and issues closed.

v2.5.0

It's a big one! 🚀

Announcements

Plaiceholder's hosting is now fully sponsored by @vercel 🖤

Huge thanks to @leerob for sorting this out

Features

• Up to 30% smaller Base64 placeholders by default (thanks for the recommendation @sebastienbarre)
• Allow Custom Dir by @joe-bell and @JaeSeoKim in #212
  • i.e. you're not confined to ./public
• Expose Sharp Options by @joe-bell, @kruserr and @joeyhage in #214
  • Plaiceholder now allows you to customize transparency, brightness, saturation and more!

Docs & Examples

• Add Remix Example by @joe-bell in #208
• Use class-variance-authority in examples by @joe-bell in #204
• Various Docs Fixes/Improvements by @joe-bell in #207 and #215

Full Changelog: v2.4.0...v2.5.0

v2.4.0

What's Changed

• Fix CSS if the source contains transparency by @skirsten in #197
• Add sharp to @plaiceholder/tailwindcss's peerDependencies by @joe-bell in adf88de

Internal

• Migrate to PNPM by @joe-bell in #202

New Contributors

• @skirsten made their first contribution in #197

Full Changelog: v2.3.0...v2.4.0

v2.3.0

What's Changed

Lots of security bumps 🔒

• chore(deps): syncpack prettier, react|-dom, sharp, tailwindcss by @JeromeFitz in #170
• chore(deps): bump algoliasearch-helper from 3.4.4 to 3.6.2 by @dependabot in #174
• chore(deps): bump tar from 4.4.13 to 4.4.19 by @dependabot in #175
• chore(deps): bump path-parse from 1.0.6 to 1.0.7 by @dependabot in #177
• chore(deps): bump next from 12.0.0 to 12.0.5 by @dependabot in #179
• chore(deps): bump shelljs from 0.8.4 to 0.8.5 by @dependabot in #180
• chore(deps): bump follow-redirects from 1.14.1 to 1.14.7 by @dependabot in #181
• chore(deps-dev): bump postcss from 8.2.9 to 8.2.13 by @dependabot in #182
• chore(deps): bump nanoid from 3.1.23 to 3.2.0 by @dependabot in #183
• chore(deps): bump trim-off-newlines from 1.0.1 to 1.0.3 by @dependabot in #186
• chore(deps): bump next from 12.0.5 to 12.0.9 by @dependabot in #188
• chore(deps): bump node-fetch from 2.6.2 to 2.6.7 by @dependabot in #185

Full Changelog: v2.2.0...v2.3.0

v2.2.0

Features

• @plaiceholder/next: add support for Next.js 12 (thanks @JeromeFitz!)

Bug Fixes

• Miscellaneous security updates for dependencies

v2.1.0

Features

• @plaiceholder/tailwindcss: add support for tailwindcss@2.2.0 (5efe472)

v2.0.3

Bug Fixes

• @plaiceholder/next: add sharp to webpack externals (76a49be)

v2.0.2

Bug Fixes

• @plaiceholder/tailwindcss: lock Tailwind peerDependency range (due to reliance on experimental JIT engine) (08a1760)

v2.0.1

Bug Fixes

• plaiceholder: add missing return types (e434e63)

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");