{"id":17880670,"url":"https://github.com/benjamincharity/rehype-semantic-images","last_synced_at":"2026-01-24T00:17:43.424Z","repository":{"id":220882683,"uuid":"752765877","full_name":"benjamincharity/rehype-semantic-images","owner":"benjamincharity","description":"This unified ecosystem plugin enriches HTML images with semantic elements and customizable features, improving accessibility and performance through options like lazy loading and dynamic source modification.","archived":false,"fork":false,"pushed_at":"2024-02-11T00:13:39.000Z","size":85,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-08T17:45:37.913Z","etag":null,"topics":["figure","image","rehype-plugin","responsive","unified-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/benjamincharity.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-04T18:40:15.000Z","updated_at":"2024-03-11T07:14:08.000Z","dependencies_parsed_at":"2024-02-11T01:24:45.266Z","dependency_job_id":"836ab0c9-14a6-4850-a33e-17c39886b8fe","html_url":"https://github.com/benjamincharity/rehype-semantic-images","commit_stats":null,"previous_names":["benjamincharity/rehype-semantic-images"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Frehype-semantic-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Frehype-semantic-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Frehype-semantic-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Frehype-semantic-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benjamincharity","download_url":"https://codeload.github.com/benjamincharity/rehype-semantic-images/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246918274,"owners_count":20854783,"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":["figure","image","rehype-plugin","responsive","unified-plugin"],"created_at":"2024-10-28T12:27:03.737Z","updated_at":"2026-01-24T00:17:38.371Z","avatar_url":"https://github.com/benjamincharity.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rehype-semantic-images\n\n![test workflow](https://github.com/benjamincharity/rehype-semantic-images/actions/workflows/test.yml/badge.svg)\n[![codecov](https://codecov.io/gh/benjamincharity/rehype-semantic-images/branch/main/graph/badge.svg?token=T3Z18P56LV)](https://codecov.io/gh/benjamincharity/rehype-semantic-images)\n![NPM Version](https://img.shields.io/npm/v/@benjc/rehype-semantic-images)\n\nThis plugin enhances images in HTML documents processed by rehype in the unified ecosystem. It adds semantic elements such as figure, figcaption, and customizable container elements, and supports lazy loading options, custom class names, and IDs. It enables dynamic source set and URL building, which allows developers to improve accessibility, SEO, and performance of web pages. With fine-grained control over image presentation and loading behavior, this plugin provides developers with greater flexibility and customization options.\n\n## Install\n\n```\nnpm i -D @benjc/rehype-semantic-images\n```\n\n## Usage\n\n```typescript\nimport rehypeSemanticImages from \"@benjc/rehype-semantic-images\";\nimport rehype from \"rehype\";\nimport rehypeParse from \"rehype-parse\";\nimport { unified } from \"unified\";\n\nunified()\n  .use(rehypeParse, { fragment: true })\n  .use(rehypeSemanticImages)\n  .process(`\u003cimg src=\"image.jpg\" alt=\"My alt text\" /\u003e`);\n\n// Or with options:\nunified()\n  .use(rehypeParse, { fragment: true })\n  .use(rehypeSemanticImages, {\n    urlBuilder: (src) =\u003e `https://my-cdn.com/${src}`,\n  })\n  .process(`\u003cimg src=\"image.jpg\" alt=\"My alt text\" /\u003e`);\n```\n\n### Input\n\n```html\n\u003cimg src=\"image.jpg\" alt=\"My alt text\" /\u003e\n```\n\n### Output\n\n```html\n\u003cfigure class=\"rsi-figure\"\u003e\n  \u003cdiv class=\"rsi-container\"\u003e\n    \u003cimg class=\"rsi-image\" alt=\"My alt text\" loading=\"lazy\" sizes=\"100vw\" src=\"image.jpg\" srcset=\"image.jpg 1x\" /\u003e\n  \u003c/div\u003e\n  \u003cfigcaption class=\"rsi-figcaption\"\u003eMy alt text\u003c/figcaption\u003e\n\u003c/figure\u003e\n```\n\n## Options\n\n| Option                | Type             | Description                                                                                                                                         |\n| --------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `urlBuilder`          | Function         | A function that takes the `src` of an image and returns a new `src`.                                                                                |\n| `disableLazy`         | Boolean          | If `true`, the `loading` attribute of the `img` element will be set to `\"eager\"`. Otherwise, it will be set to `\"lazy\"`.                            |\n| `defaultSizes`        | String           | The value for the `sizes` attribute of the `img` element.                                                                                           |\n| `elements.img`        | Object           | An object containing additional properties for the `img` element.                                                                                   |\n| `elements.container`  | Object           | An object containing properties for the `div` container element. If `disable` is `true`, the container will not be added.                           |\n| `elements.figcaption` | Object           | An object containing properties for the `figcaption` element. If `disable` is `true`, the `figcaption` will not be added.                           |\n| `elements.figure`     | Object           | An object containing properties for the `figure` element. If `disable` is `true`, the `figure` will not be added.                                   |\n| `srcSetSteps`         | Array of numbers | An array of multipliers for generating the `srcSet` attribute of the `img` element. If not provided or empty, only the original `src` will be used. |\n\nThese options can be passed to the `rehype-semantic-images` plugin as part of the `options` object. For example:\n\n```typescript\nrehypeSemanticImages({\n  defaultSizes: \"(min-width: 960px) 720px, 100vw\",\n  disableLazy: false,\n  elements: {\n    container: { className: \"custom-container\", id: \"containerID\", disable: false },\n    figcaption: { className: \"custom-figcaption\", id: \"figcaptionID\", disable: false },\n    figure: { className: \"custom-figure\", id: \"figureID\", disable: false },\n    img: { className: \"custom-image\", id: \"imageID\" },\n  },\n  srcSetSteps: [1, 2, 3],\n  urlBuilder: (src) =\u003e `https://my-cdn.com/${src}`,\n});\n```\n\nThis will customize the top and bottom links according to the provided options.\n\n## License\n\n[MIT][license] © [benjamincharity][author]\n\n[license]: license\n[author]: https://www.benjamincharity.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamincharity%2Frehype-semantic-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjamincharity%2Frehype-semantic-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamincharity%2Frehype-semantic-images/lists"}