rehype-resolution

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.

Motivation

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

Inserting the srcset attribute

We have an image at three resolutions, [email protected], [email protected], and [email protected]. Let’s assume we don’t control the HTML, maybe it’s generated from Markdown, leaving us with HTML like this.

<img src="img/[email protected]" 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/[email protected],img/[email protected],img/[email protected]" src="img/[email protected]" alt="Dressed as a fairy">

Example

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

unified()
  .use(parse, { fragment: true })
  .use(resolution)
  .use(stringify)
  .process('<img src="[email protected]">', (er, file) => {
    if (er) throw er

    const { contents } = file

    log(contents)
  })

Try it.

$ node example.js
<img src="[email protected]" srcset="[email protected] 1x, [email protected] 2x, [email protected] 3x">

Installing

To install rehype-resolution with npm, do:

$ npm install rehype-resolution

License

MIT License