@allenlee/rehype-image-process

A rehype plugin for processing image nodes to add blur effect and width/height in compile time

For now, Some properties are specific to nextjs

The idea behind this plugin: https://ironeko.com/posts/how-to-blurred-images-on-load-in-next-js

Installation

npm install @allenlee/rehype-image-process

Options

• srcAsAlt If there no alt exists, insert the transformed src to the alt default: true
• blurDataURLPropertyName The property name of the generated blur image base64 data default: blurDataURL
• placeholderPropertyName The property name of the placeholder (for nextjs only) default: blur
• srcTransform(src per image) Convert src of image before it is inserted to any framework default: (src) => src

Usage

Source

const rehypeImageProcess = require('@allenlee/rehype-image-process');

rehype().use(rehypeImageProcess).process(`
![some alt](/cat.jpg)

dog.jpg
`);

Yields

<img
  src="/cat.jpg"
  alt="some alt"
  width="500"
  height="500"
  sizes="(max-width: 500px) 100vw, 500px"
  blurDataURL="catblurbase64"
  placeholder="blur"
/>

<!-- if you have some plugin can transform the image directly -->
<img
  src="/dog.jpg"
  alt="/dog.jpg"
  width="200"
  height="300"
  sizes="(max-width: 200px) 100vw, 300px"
  blurDataURL="dogblurbase64"
  placeholder="blur"
/>

License

MIT @ Allen Lee