Skip to content

rehype plugin to set local image size properties to img tag.

License

Notifications You must be signed in to change notification settings

ksoichiro/rehype-img-size

Repository files navigation

rehype-img-size

main codecov npm

rehype plugin to set local image size properties to img tag.

This can be used to improve Cumulative Layout Shift: Images without dimensions

Install

npm install rehype-img-size

Use

Say we have the following file, index.md:

![](img.png)

And our script, example.js, looks as follows:

import {unified} from 'unified'
import parse from 'remark-parse'
import remark2rehype from 'remark-rehype'
import stringify from 'rehype-stringify'
import * as vfile from 'to-vfile'
import rehypeImgSize from 'rehype-img-size'

unified()
  .use(parse)
  .use(remark2rehype)
  .use(rehypeImgSize)
  .use(stringify)
  .process(vfile.readSync('index.md'), function(err, file) {
    if (err) throw err
    console.log(file.value)
  })

Now, running node example yields:

<p><img src="img.png" alt="" width="640" height="480"></p>

See examples/esm directory for the entire code.

You can also keep using this as a CommonJS package. See examples/cjs directory.

API

rehype().use(rehypeImgSize[, options])

Add width and height properties to img tag which refers local image file. This plugin read the target file to know the size of the image, so file path must be able to resolve.

Supported formats depend on image-size.

options
options.dir

Directory to resolve image file path. This is useful when Markdown files and image files are located in the separate directories.

nuxt/content

If you use this plugin for nuxt/content, you can use it by configuring your nuxt.config.js like below:

content: {
  markdown: {
    rehypePlugins: [
      [ 'rehype-img-size', { dir: 'static' } ]
    ],

License

MIT © ksoichiro

About

rehype plugin to set local image size properties to img tag.

Topics

Resources

License

Stars

Watchers

Forks