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