markdown-exit-image

Erase images CLS automatically with this Markdown Exit plugin.

• 🖼️ Automatically sets width and height on images to prevent Cumulative Layout Shift (CLS).
• 💤 Adds loading="lazy" for better performance.
• 🎨 Generates a blurhash for each image and applies it as a background placeholder for smooth loading.

Based on the article Markdown Exit Breaks the Rules With Async Rendering.

Installation

pnpm add -D markdown-exit-image

Usage

Note

Contributions, through issues or pull requests, to extend support for other frameworks are welcome!

import { image } from 'markdown-exit-image'

md.use(image, {
  // Options
})

Options

publicFolder

• Type: string
• Default: "public"

The path to the public folder where the images are stored.

Warning

This plugin requires images to be stored locally. Please, open an issue if you need support for remote images.

Sponsors

License

MIT License © 2025-PRESENT Estéban Soubiran