rehype plugin to wrap images in pictures
Last updated 8 months ago by wooorm .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rehype-picture 
SYNC missed versions from official npm registry.


Build Coverage Downloads Size Sponsors Backers Chat

rehype plugin to wrap images in pictures.



npm install rehype-picture


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

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


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>


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.


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.


See in rehypejs/.github for ways to get started. See 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.


MIT © Titus Wormer

Current Tags

  • 3.0.0                                ...           latest (8 months ago)

7 Versions

  • 3.0.0                                ...           8 months ago
  • 2.0.0                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           4 years ago
Maintainers (2)
Today 0
This Week 1
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (3)
Dev Dependencies (11)
Dependents (0)

Copyright 2014 - 2016 © |