{"id":16701786,"url":"https://github.com/michaelnisi/rehype-resolution","last_synced_at":"2025-04-10T04:12:23.164Z","repository":{"id":57352567,"uuid":"174985540","full_name":"michaelnisi/rehype-resolution","owner":"michaelnisi","description":"Insert srcset attribute into img elements","archived":false,"fork":false,"pushed_at":"2019-03-11T16:39:51.000Z","size":51,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-24T05:34:46.164Z","etag":null,"topics":["image","rehype-plugin","resolution","responsive"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michaelnisi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-11T11:24:40.000Z","updated_at":"2023-07-10T13:09:18.000Z","dependencies_parsed_at":"2022-09-16T08:11:19.450Z","dependency_job_id":null,"html_url":"https://github.com/michaelnisi/rehype-resolution","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelnisi%2Frehype-resolution","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelnisi%2Frehype-resolution/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelnisi%2Frehype-resolution/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelnisi%2Frehype-resolution/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaelnisi","download_url":"https://codeload.github.com/michaelnisi/rehype-resolution/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154994,"owners_count":21056543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","rehype-plugin","resolution","responsive"],"created_at":"2024-10-12T18:45:37.997Z","updated_at":"2025-04-10T04:12:23.144Z","avatar_url":"https://github.com/michaelnisi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://secure.travis-ci.org/michaelnisi/rehype-resolution.svg)](http://travis-ci.org/michaelnisi/rehype-resolution)\n[![Coverage Status](https://coveralls.io/repos/github/michaelnisi/rehype-resolution/badge.svg?branch=master)](https://coveralls.io/github/michaelnisi/rehype-resolution?branch=master)\n\n# rehype-resolution\n\nThe **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.\n\nThe [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.\n\n\u003e 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!\n\nThe **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.\n\nThe 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.\n\n## Motivation\n\nGenerating a static website from Markdown, I want crisp images on all devices.\n\n## Inserting the srcset attribute\n\nWe 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.\n\n```html\n\u003cimg src=\"img/elva@1x.jpg\" alt=\"Dressed as a fairy\"\u003e\n```\n\nTo 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.\n\n```html\n\u003cimg srcset=\"img/elva@1x.jpg,img/elva@2x.jpg,img/elva@3x.jpg\" src=\"img/elva@1x.jpg\" alt=\"Dressed as a fairy\"\u003e\n```\n\n## Example\n\nInserts `srcset` into HTML fragment.\n\n```js\nconst parse = require('rehype-parse')\nconst resolution = require('./')\nconst stringify = require('rehype-stringify')\nconst unified = require('unified')\nconst { log } = console\n\nunified()\n  .use(parse, { fragment: true })\n  .use(resolution)\n  .use(stringify)\n  .process('\u003cimg src=\"logo@1x.png\"\u003e', (er, file) =\u003e {\n    if (er) throw er\n\n    const { contents } = file\n\n    log(contents)\n  })\n```\n\nTry it.\n\n```\n$ node example.js\n\u003cimg src=\"logo@1x.png\" srcset=\"logo@1x.png 1x, logo@2x.png 2x, logo@3x.png 3x\"\u003e\n```\n\n## Installing\n\nTo install **rehype-resolution** with [npm](https://www.npmjs.com), do:\n\n```\n$ npm install rehype-resolution\n```\n\n## License\n\n[MIT License](https://raw.github.com/michaelnisi/rehype-resolution/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelnisi%2Frehype-resolution","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaelnisi%2Frehype-resolution","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelnisi%2Frehype-resolution/lists"}