markdown-it-image-size

Automatically adds width and height attributes to img tags rendered by markdown-it.

How to use

const MarkdownIt = require("markdown-it");
const { markdownItImageSize } = require("markdown-it-image-size");

const mdRenderer = MarkdownIt();
mdRenderer.use(markdownItImageSize);

[!IMPORTANT]
Using Vite? Import markdown-it-image-size with require and not with import.

Why

Browsers use the width and height attributes to determine aspect ratios of images. If the attributes are set, the browser can reserve space for the image even though it's not finished loading yet, thus preventing cumulative layout shifts after images load.