markdown-it-image-lazy-loading

This is a plugin that makes images load faster and more efficiently on web pages. When you write markdown with images, this tool automatically adds special instructions to those images telling the browser to load them only when they're about to appear on screen — rather than downloading every image upfront, which can slow things down.

Here's how it works: you write markdown the normal way (like ![](image.png)), and the plugin converts it to HTML with an extra attribute that says loading="lazy". Modern browsers understand this instruction and will defer loading images until a user actually scrolls near them. The plugin can also optionally add decoding="async", which tells the browser it's okay to decode the image asynchronously without blocking other work.

Optionally, the plugin can measure your actual image files and automatically add width and height attributes to each image tag. This prevents a common problem on the web called "layout shift," where content jumps around as images load in. By telling the browser an image's dimensions ahead of time, it reserves the right amount of space, keeping the page stable as you read.

This is useful for anyone building a website or blog that displays lots of images — like a photo gallery, documentation site, or news article — and wants it to feel snappy and responsive. Instead of manually editing HTML or figuring out image dimensions yourself, you just use normal markdown and let the plugin handle the optimization behind the scenes. It's a small addition to your build process that can noticeably improve page performance.