rehype plugin to set local image size properties to img tag.
This can be used to improve Cumulative Layout Shift: Images without dimensions
npm install rehype-img-size
Say we have the following file, index.md:
And our script, example.js, looks as follows:
const unified = require('unified')
const parse = require('remark-parse')
const remark2rehype = require('remark-rehype')
const stringify = require('rehype-stringify')
const vfile = require('to-vfile')
const rehypeImgSize = require('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.contents)
})Now, running node example yields:
<p><img src="img.png" alt="" width="640" height="480"></p>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.
Directory to resolve image file path. This is useful when Markdown files and image files are located in the separate directories.
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' } ]
],MIT © ksoichiro
