70 lines
1.7 KiB
Markdown
70 lines
1.7 KiB
Markdown
A markdown-it plugin supporting Chrome 75's [native image lazy-loading](https://addyosmani.com/blog/lazy-loading/) and [async decoding](https://github.com/whatwg/html/pull/3221).
|
|
|
|
## 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(``);
|
|
// <p><img src="example.png" alt="" title="image title" loading="lazy"></p>\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(``);
|
|
// <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.
|
|
|
|
```javascript
|
|
md.use(lazy_loading, {
|
|
decoding: true,
|
|
});
|
|
|
|
md.render(``);
|
|
// <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)](https://web.dev/cls/):
|
|
|
|
```javascript
|
|
md.use(lazy_loading, {
|
|
image_size: true,
|
|
|
|
// Where your images are stored
|
|
base_path: __dirname + 'src/',
|
|
});
|
|
|
|
md.render(``);
|
|
// <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:
|
|
```css
|
|
img{
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
```
|
|
|
|
## License
|
|
|
|
MIT
|