# markdown-it-image-lazy-loading

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

Latest version **2.1.0** (published 2026-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install markdown-it-image-lazy-loading
pnpm add markdown-it-image-lazy-loading
yarn add markdown-it-image-lazy-loading
bun add markdown-it-image-lazy-loading
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2026-09-16 |
| First published | 2019-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 56 |
| Author | Ruan Yifeng |
| Maintainers | ruanyf |
| Keywords | markdown-it-plugin, markdown-it, lazyload |

## Links

- npm: https://www.npmjs.com/package/markdown-it-image-lazy-loading
- Repository: https://github.com/ruanyf/markdown-it-image-lazy-loading
- Issues: https://github.com/ruanyf/markdown-it-image-lazy-loading/issues
- npm.io page: https://npm.io/package/markdown-it-image-lazy-loading

## Dependencies (1)

- [image-size](https://npm.io/package/image-size.md) ^2.0.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 2.1.0 (latest) — 2026-09-16
- 2.0.1 — 2023-12-19
- 2.0.0 — 2023-12-19
- 1.2.0 — 2021-12-21
- 1.1.0 — 2021-04-25
- 1.0.2 — 2019-08-13
- 1.0.1 — 2019-08-13
- 1.0.0 — 2019-08-13

## README

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(`![](example.png "image title")`);
// <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(`![](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.

```javascript
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)](https://web.dev/cls/):

```javascript
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:
```css
img{
    max-width: 100%;
    height: auto;
}
```

## License

MIT

---
_Source: https://npm.io/package/markdown-it-image-lazy-loading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._