https://github.com/michaelnisi/rehype-resolution
Insert srcset attribute into img elements
https://github.com/michaelnisi/rehype-resolution
image rehype-plugin resolution responsive
Last synced: about 1 year ago
JSON representation
Insert srcset attribute into img elements
- Host: GitHub
- URL: https://github.com/michaelnisi/rehype-resolution
- Owner: michaelnisi
- License: mit
- Created: 2019-03-11T11:24:40.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-11T16:39:51.000Z (over 7 years ago)
- Last Synced: 2025-03-24T05:34:46.164Z (over 1 year ago)
- Topics: image, rehype-plugin, resolution, responsive
- Language: JavaScript
- Size: 49.8 KB
- Stars: 12
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://travis-ci.org/michaelnisi/rehype-resolution)
[](https://coveralls.io/github/michaelnisi/rehype-resolution?branch=master)
# rehype-resolution
The **rehype-resolution** [Node.js](https://nodejs.com) package provides a [rehype](https://github.com/rehypejs/rehype) plugin for inserting `srcset` attributes into `img` elements. **rehype** is a [unified](https://unified.js.org) HTML processor.
The [srcset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset) attribute of the `img` element enables [responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/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](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/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, `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.
```html
```
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.
```html
```
## Example
Inserts `srcset` into HTML fragment.
```js
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('
', (er, file) => {
if (er) throw er
const { contents } = file
log(contents)
})
```
Try it.
```
$ node example.js
```
## Installing
To install **rehype-resolution** with [npm](https://www.npmjs.com), do:
```
$ npm install rehype-resolution
```
## License
[MIT License](https://raw.github.com/michaelnisi/rehype-resolution/master/LICENSE)