Rehype Image Placeholder
Markdown plugin for Rehype that gets the image size and Base64 placeholder from local images.
Install
npm i rehype-image-placeholder
Motivation
I made this plugin because I couldn't get rehype-img-size to work with XDM and I wanted to get the image size and a placeholder to be used with next/image for Next.js.
I tried to make it work for most use cases where you're using a local image but keep in mind it's meant to be used with Next.js.
If you want to tweak it to your needs I made the code easy to understand, so you can change and include it as a file in your project or create your own npm package if you want.
Use
import rehypeImagePlaceholder from 'rehype-image-placeholder'
Then pass the plugin wherever you pass your rehype plugins.
// markdown plugins
const options: BundleMDXOptions = {
xdmOptions(options) {
options.rehypePlugins = [
// image dimensions and placeholder
[rehypeImagePlaceholder, { dir: 'public' }],
]
return options
},
}
If you have an image inside your Markdown file you can get the image size and placeholder from it.
![Image](/images/post/image.webp)
<img
alt="Image"
src="image.webp"
width="800"
height="486"
blurDataURL="data:image/webp;base64,UklGRk4AAABXRUJQVlA4IEIAAAAQAgCdASoQAAoABUB8JbACdH8AEbuDDOK4AP7yszUBap18govyq3Pair3NvsX8x2frpAb1maqGtRnXWs2JajooQAA="
/>
These props are then passed to your <Image />
component that replaces the one in your Markdown.
function Image({ src, alt, width, height, blurDataURL }) {
return (
<NextImage
src={src}
alt={alt}
width={width}
height={height}
loading="lazy"
placeholder="blur"
blurDataURL={blurDataURL}
/>
)
}
You can have a look at a Next.js Markdown blog as an example.