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:
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.
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