A markdown-it plugin supporting Chrome 75's native image lazy-loading and async decoding.
Install
$ npm install markdown-it-image-lazy-loading
Usage
Load it in ES module.
import markdownit from 'markdown-it';
import lazy_loading from 'markdown-it-image-lazy-loading';
const md = markdownit();
md.use(lazy_loading);
md.render(`![](example.png "image title")`);
// <p><img src="example.png" alt="" title="image title" loading="lazy"></p>\n
Or load it in CommonJS module.
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