Base64 image placeholder

Name: Base64 image placeholder
Availability: InStock
Author: leonardstruck

Generates a base64-encoded placeholder image for Payload upload collections and stores it in a text field.

Community 17 63/wk Unlicense v1.2.0

Installation

$ pnpm add payload-base64-plugin

About

This plugin adds a `base64` text field to Payload upload collections and populates it automatically when a file is uploaded. On each `beforeChange` hook it reads the incoming file and runs it through the `plaiceholder` library (which uses sharp) to produce a small, blurred base64 data URL. The result is stored on the document, so frontends can render an instant low-quality placeholder while the full image loads. It is a fork of the `payload-blurhash-plugin`, with the encoding swapped from blurhash strings to base64. By default it attaches to every collection that has an `upload` config. You can restrict it to specific slugs via the `collections` option. Three options are exposed: `collections` to target specific upload collections, `size` (an integer from 4 to 64, default 4) controlling the placeholder dimensions, and `removeAlpha` (default true) to strip the alpha channel. It targets Payload 1.x and requires sharp as a peer dependency. One limitation: it processes one upload field per collection and writes a single `base64` field, so it is not suited to collections needing multiple placeholders per document. The admin webpack config is patched to alias the package to a mock during bundling, which keeps the server-only sharp dependency out of the admin bundle.