ruanyf / markdown-it-image-lazy-loading

a markdown-it plugin supporting Chrome 75's native image lazy-loading

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A markdown-it plugin supporting Chrome 75's native image lazy-loading and async decoding.

Install

$ npm install markdown-it-image-lazy-loading

Usage

const md = require('markdown-it')();
const lazy_loading = require('markdown-it-image-lazy-loading');
md.use(lazy_loading);

md.render(`![](example.png "image title")`);
// <p><img src="example.png" alt="" title="image title" loading="lazy"></p>\n

If you want the decoding="async" attribute, enable the plugin's decoding option.

md.use(lazy_loading, {
  decoding: true,
});

md.render(`![](example.png "image title")`);
// <p><img src="example.png" alt="" title="image title" loading="lazy" decoding="async"></p>\n

The plugin can also add width and height attributes to each image. This can prevent cumulative layout shifts (CLS):

md.use(lazy_loading, {
  image_size: true,

  // Where your images are stored
  base_path: __dirname + 'src/',
});

md.render(`![](example.png "image title")`);
// <p><img src="example.png" alt="" title="image title" loading="lazy" width="100" height="100"></p>\n

To keep images responsive, also include the following CSS:

img{
    max-width: 100%;
    height: auto;
}

License

MIT

About

a markdown-it plugin supporting Chrome 75's native image lazy-loading


Languages

Language:JavaScript 100.0%