REHYPE BASE64 IMAGE SWAPPER

With this rehype plugin you can swap out base64 encoded images with any string you want.

A common use case is to extract the base64 encoded images from the HTML returned from a CMS and replace them with a placeholder image, a template tag or a CDN URL. The plugin will also extract the base64 encoded images, so you can upload them to a CDN or save them to disk.

Typescript support? Yes, this plugin is written in Javascript with JSDoc and the types are included.

Installation

npm install rehype-base64-image-swapper

Usage

import { rehype } from 'rehype';
import rehypeBase64ImageSwapper from 'rehype-base64-image-swapper';

const html = `
<div>
  <img
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVR42mP8z8BQz0AEYBxVSF+FABJADveWkH6oAAAAAElFTkSuQmCC"
    alt="red"
  />
  <img
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVR42mNk+M9Qz0AEYBxVSF+FAAhKDveksOjmAAAAAElFTkSuQmCC"
    alt="green"
  />
  <img
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVR42mNkYPhfz0AEYBxVSF+FAP5FDvcfRYWgAAAAAElFTkSuQmCC"
    alt="blue"
  />
  <img src="some-image.png" alt="non base64 image" />
</div>
`;

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function replaceWithCDNPath(content) {
  const vFile = await rehype()
    .use(rehypeBase64ImageSwapper, {
      src: async (encodedImage) => {
        await sleep(1000);
        return `https://cdn.example.com/image.png`;
      },
    })
    .process(html);

  console.log(String(vFile));
}

replaceWithCDNPath(html);

Options

Option	Type	Description
src	string or function	The string or function that will replace the base64 encoded image. The function will receive the base64 encoded image as the first argument.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Development

• Clone it

git clone https://github.com/devlulcas/rehype-base64-image-swapper

• Install dependencies

npm install

• Run tests

npm test

• Update the exported types

npm run tsc