rehype-picture

rehype plugin to wrap images in pictures.

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

npm:

npm install rehype-picture

Use

import {unified} from 'unified'
import {reporter} from 'vfile-reporter'
import rehypeParse from 'rehype-parse'
import rehypePicture from 'rehype-picture'
import rehypeStringify from 'rehype-stringify'

unified()
  .use(rehypeParse, {fragment: true})
  .use(rehypePicture, {
    jpg: {webp: 'image/webp'},
    png: {svg: 'image/svg+xml'}
  })
  .use(rehypeStringify)
  .process('<img src="cat.jpg">\n<img src="logo.png">')
  .then((file) => {
    console.error(reporter(file))
    console.log(String(file))
  })

Yields:

no issues found
<picture><source srcset="cat.webp" type="image/webp"><img src="cat.jpg"></picture>
<picture><source srcset="logo.svg" type="image/svg+xml"><img src="logo.png"></picture>

API

This package exports no identifiers. The default export is rehypePicture.

unified().use(rehypePicture[, options])

Options is an object mapping extensions (without dot, .) to search for on <img> elements to “sources”. Sources are objects mapping replacement extensions (without dot, .) to mime types.

So, if the following options are given:

{
  jpg: {webp: 'image/webp'},
  png: {svg: 'image/svg+xml'}
}

…that means jpg and png are the searched for extensions, which when found are wrapped in <picture> elements. The values at those keys are the <source> elements inserted in the picture.

Security

Although this plugin should be safe to use, always be careful with user input. For example, it’s possible to hide JavaScript inside images (such as GIFs, WebPs, and SVGs). User provided images open you up to a cross-site scripting (XSS) attack.

Contribute

See contributing.md in rehypejs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer