markdown-it-image-lazy-loading

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

Install

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

Usage

Load it in ES module.

`javascript
import markdownit from 'markdown-it';
import lazy_loading from 'markdown-it-image-lazy-loading';

const md = markdownit();
md.use(lazy_loading);
md.render();
//

\n
`

Or load it in CommonJS module.

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

md.render();
//

\n
`

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

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

md.render();
//

\n
`

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

`javascript
md.use(lazy_loading, {
image_size: true,

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

md.render();
//

\n
`

To keep images responsive, also include the following CSS:
`css
img{
max-width: 100%;
height: auto;
}
``

License

MIT