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.