Project: michaelnisi/rehype-resolution

Package: rehype-resolution@1.0.2

  1. Dependents: 0
  2. Insert srcset attribute into img elements
  1. unified 181
  2. html 124
  3. rehype 88
  4. image 13

Build Status Coverage Status


The rehype-resolution Node.js package provides a rehype plugin for inserting srcset attributes into img elements. rehype is a unified HTML processor.

The srcset attribute of the img element enables responsive images. This plugin inserts a srcset for resolution switching, allowing different resolutions at the same size.

If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using srcset with x-descriptors and without sizes — a somewhat easier syntax!

The rehype-resolution plugin inserts a set of possible image sources (@1x, @2x, and @3x), following Apple’s naming convention for image size and resolution. Users have to produce these images and make them available at the according paths.

The transformation is only applied for file names ending with @1x.*. That’s the marker for the transform. Elements with an existing srcset attribute are ignored.


Generating a static website from Markdown, I want crisp images on all devices.

Inserting the srcset attribute

We have an image at three resolutions, elva@1x.jpg, elva@2x.jpg, and elva@3x.jpg. Let’s assume we don’t control the HTML, maybe it’s generated from Markdown, leaving us with HTML like this.

<img src="img/elva@1x.jpg" alt="Dressed as a fairy">

To let the browser pick the optimal image, this transform inserts the srcset attribute for three resolutions, allowing us to keep referencing the image with a single URI in our Markdown or whatever HTML source we might have.

<img srcset="img/elva@1x.jpg,img/elva@2x.jpg,img/elva@3x.jpg" src="img/elva@1x.jpg" alt="Dressed as a fairy">


Inserts srcset into HTML fragment.

const parse = require('rehype-parse')
const resolution = require('./')
const stringify = require('rehype-stringify')
const unified = require('unified')
const { log } = console

  .use(parse, { fragment: true })
  .process('<img src="logo@1x.png">', (er, file) => {
    if (er) throw er

    const { contents } = file


Try it.

$ node example.js
<img src="logo@1x.png" srcset="logo@1x.png 1x, logo@2x.png 2x, logo@3x.png 3x">


To install rehype-resolution with npm, do:

$ npm install rehype-resolution


MIT License