rehype-picture

rehype plugin to wrap images in pictures.

Install

npm:

npm install rehype-picture

Use

var unified = require('unified')
var report = require('vfile-reporter')
var parse = require('rehype-parse')
var stringify = require('rehype-stringify')
var picture = require('rehype-picture')

unified()
  .use(parse, {fragment: true})
  .use(picture, {
    jpg: {webp: 'image/webp'},
    png: {svg: 'image/svg+xml'}
  })
  .use(stringify)
  .process('<img src="cat.jpg">\n<img src="logo.png">', function(err, file) {
    console.error(report(err || 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

rehype().use(picture[, 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.

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, organisation, or community you agree to abide by its terms.

License

MIT © Titus Wormer