{"id":15396789,"url":"https://github.com/axe312ger/metalsmith-adaptive-images","last_synced_at":"2026-03-07T02:33:48.220Z","repository":{"id":57295487,"uuid":"71166318","full_name":"axe312ger/metalsmith-adaptive-images","owner":"axe312ger","description":"DEPRECATED: A plugin for Metalsmith to create adaptive images via srcset and styles properties","archived":false,"fork":false,"pushed_at":"2019-01-21T03:30:03.000Z","size":179,"stargazers_count":9,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-03T03:54:13.831Z","etag":null,"topics":["metalsmith","metalsmith-plugin","srcset"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/axe312ger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-17T17:59:55.000Z","updated_at":"2019-01-21T03:30:05.000Z","dependencies_parsed_at":"2022-08-30T18:30:09.187Z","dependency_job_id":null,"html_url":"https://github.com/axe312ger/metalsmith-adaptive-images","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/axe312ger/metalsmith-adaptive-images","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axe312ger%2Fmetalsmith-adaptive-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axe312ger%2Fmetalsmith-adaptive-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axe312ger%2Fmetalsmith-adaptive-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axe312ger%2Fmetalsmith-adaptive-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/axe312ger","download_url":"https://codeload.github.com/axe312ger/metalsmith-adaptive-images/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axe312ger%2Fmetalsmith-adaptive-images/sbom","scorecard":{"id":219829,"data":{"date":"2025-08-11","repo":{"name":"github.com/axe312ger/metalsmith-adaptive-images","commit":"43356a3f9b9a4c4da92926f517507d0c4a6c5893"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/14 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 23 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-17T02:15:20.509Z","repository_id":57295487,"created_at":"2025-08-17T02:15:20.509Z","updated_at":"2025-08-17T02:15:20.509Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30206070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"online","status_checked_at":"2026-03-07T02:00:06.765Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["metalsmith","metalsmith-plugin","srcset"],"created_at":"2024-10-01T15:34:55.561Z","updated_at":"2026-03-07T02:33:48.201Z","avatar_url":"https://github.com/axe312ger.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DEPRECATION NOTICE:\n\nI am no more able to provide maintenance for this plugin. If you want to take ownership or get more information, please have a look here: https://github.com/axe312ger/metalsmith-adaptive-images/issues/62\n\n---\n\n# metalsmith-adaptive-images\n\n\u003e A plugin for [Metalsmith](http://www.metalsmith.io/) to create adaptive images via `\u003cimg srcset=\"...\" styles=\"...\"/\u003e`. It works well along with [metalsmith-project-images](https://github.com/hoetmaaiers/metalsmith-project-images).\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://axe312.mit-license.org)\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)\n[![Build Status](https://img.shields.io/circleci/project/axe312ger/metalsmith-adaptive-images/prototype.svg?maxAge=2592000)](https://circleci.com/gh/axe312ger/metalsmith-adaptive-images)\n[![CodeCov Badge](https://img.shields.io/codecov/c/github/axe312ger/metalsmith-adaptive-images.svg?maxAge=2592000)](https://codecov.io/gh/axe312ger/metalsmith-adaptive-images)\n![David](https://img.shields.io/david/axe312ger/metalsmith-adaptive-images.svg)\n![David](https://img.shields.io/david/dev/axe312ger/metalsmith-adaptive-images.svg)\n[![semantic-release](https://img.shields.io/badge/%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n## Introduction\n\nProviding images on websites nowadays can be tricky. You need to consider many different device sizes with good to to very bad connection speed.\n\nSo you will end up serving multiple versions of your images\nwith different dimensions. Also you need to tell the browser which image to pick for a breakpoint. The article [Don’t ruin your \u0026lt;img\u0026gt; - by Anthony Ng](https://medium.freecodecamp.com/you-need-to-stop-making-these-6-mistakes-with-your-img-s-e242c02d14be#.og235f7wq\n) explains very well, what you need to keep in mind while serving images in today's web.\n\nThis plugin will create a map of images, containing metadata to properly output images with srcset and styles attributes.\n\nIt is up to you what to do with these informations. You can generate a gallery in your layout engine or use it your javascript to provide sharp images.\n\nFor simplicity, this module also provides a replace plugin, which replaces all\nmatching images with their adaptive clones within html files.\n\n## Install\n\n```js\nnpm install --save metalsmith-adaptive-images\n```\n\n## Preparation\n\nFirst you need to load your images into metalsmith, you could use [metalsmith-project-images](https://github.com/hoetmaaiers/metalsmith-project-images) for this.\n\nTo resize your images, you could use one of the following plugins for this:\n* [metalsmith-sharp](https://github.com/axe312ger/metalsmith-sharp) - full sharp api integration\n* [metalsmith-image-resizer](https://github.com/kenhoff/metalsmith-image-resizer) - simple sharp integration\n* [metalsmith-convert](https://github.com/tomterl/metalsmith-convert) - old but good imagemagick\n\nAlso consider to compress your images. The [metalsmith-imagemin](https://github.com/ahmadnassri/metalsmith-imagemin) plugin should be a good bet here.\nIf you are looking for a very fast but effective JPEG compressor, I can really recommend to use [mozjpeg](https://github.com/imagemin/imagemin-mozjpeg).\n\n## Usage\n\nIf your environment does not support the import syntax, see further below.\n\nThe module consists of 2 metalsmith plugins and one method for rendering adaptive images. All of them can be used separately.\n\nThe `processImages` plugin expects an array of images within the metadata of a file.\nAs soon as a matching metadata key is found, the plugin will create a new map of images with proper objects with the parsed and generated metadata.\n\nIt also provides the plugin `replaceImages` to replace all images with their adaptive cousins in your html.\n\nWith `renderImage` you will get a adaptive image based on the provided url and the given configuration.\n\n```js\nimport Metalsmith from 'metalsmith'\nimport images from 'metalsmith-project-images'\nimport AdaptiveImages from 'metalsmith-adaptive-images'\n\n// Initialize your instance of the plugin.\n// This allows you to use multiple configurations.\nconst adaptiveImages = AdaptiveImages({\n  ... your configuration here ...\n})\n\n// Example #1: Enhance your image metadata\nMetalsmith('/path/to/project')\n  // Use metalsmith-project-images to locate images and add to file metadata.\n  .use(images({}))\n  // Use the plugin to attach metadata.\n  // The default options match the ones of metalsmith-project-images.\n  .use(adaptiveImages.processImages)\n  .use(markdown()) // Generate html files out of your markdown\n  .use(layouts(...)) // Apply layouts to your files and add adaptive images manually.\n  .build()\n\n// Example #2: Simply replace images\nMetalsmith('/path/to/project')\n  .use(markdown()) // Generate html files out of your markdown\n  .use(adaptiveImages.replaceImages) // Replace images based on the given configuration above.\n  .build()\n```\n\nEvery document with attached images like this:\n```js\nfiles: {\n  'example.md': {\n    ...,\n    images: [ 'images/example.jpg', ... ]\n  }\n}\n```\n\nWill be transformed into this:\n```js\nfiles: {\n  'example.md': {\n    ...,\n    images: [ 'images/example.jpg', ... ]\n    imagesMap: {\n      'example.jpg': {\n        src: 'images/example-960.jpg',\n        srcset: 'images/example-1440.jpg 1440w, images/example-960.jpg 960w, images/example-480.jpg 480w',\n        sizes: '(min-width: 960px) 960px, 100vw',\n        name: 'example.jpg'\n      },\n      ...\n    }\n  }\n}\n```\n\n### Node 6\n```js\nconst AdaptiveImages = require('metalsmith-adaptive-images')\n```\n\n### Node 4\nA version for the LTS version of node is also supplied. You can require it like this:\n\n```js\nconst AdaptiveImages = require('metalsmith-adaptive-images/dist/node4')\n```\n\nFor further examples can be found in the test directory.\n\n## Options\n\nIf you got confused and need help to pick the correct options, this article about [srcset and sizes](https://bitsofco.de/the-srcset-and-sizes-attributes/) may help you.\n\nDefault options:\n```js\n{\n  imagesKey: 'images',\n  mapKey: 'imagesMap',\n  imageWidths: [1440, 960, 480],\n  imageSizes: ['(min-width: 960px) 960px', '100vw'],\n  defaultSize: 960,\n  namingPattern: '{dir}{name}-{size}{ext}', // foo/bar-200.jpg,...\n  srcsetPattern: '{url} {size}w' // foo/bar-200.jpg 200w,...\n  htmlFileGlob: '**/*.html',\n  htmlImageSelector: 'img'\n}\n```\n\n### imagesKey\n\nThe file metadata key where to look for images. [metalsmith-project-images](https://github.com/hoetmaaiers/metalsmith-project-images) uses `images` here, so does this plugin.\n\n### imagesMap\n\nThe file metadata key where to store the map of image objects.\n\n### imageWidths\n\nBase value for the srcset attribute. This array represents the different image sizes, you want to provide. Together with the `srcsetPattern` option the srcset attribute will be generated.\n\nMake sure to define from biggest to lowest size to prevent issues with some browsers.\n\n```js\n{\n  imageWidths: [2880, 1440, 960, 480, 320]\n}\n```\n\n### imageSizes\n\nValues for the sizes attribute. This tells the browser, which size the image will have on the site. The values will be basically just combined to one string.\n\n```js\n{\n  imageSizes: ['(min-width: 960px) 1440px', '100vw'],\n}\n```\n\n### defaultSize\n\nDefault size to select. The renderer will use this to set the src attribute and\nso should you. Older browsers will use this as fallback when they do not support\nthe srcset attribute.\n\n```js\n{\n  defaultSize: 960\n}\n```\n\n### namingPattern\n\nNaming pattern for the actual image file names.\n\nSupported placeholders:\n* `{dir}`: Directory of file followed by slash\n* `{base}`: Full filename with extension\n* `{name}`: Filename without extension\n* `{ext}`: File extension with leading dot\n* `{size}`: The width of the current srcset breakpoint\n\n```js\n{\n  namingPattern: '{dir}/{name}-{size}{ext}'\n}\n```\n\n### srcsetPattern\n\nPattern of the generated srcset syntax. The default should fit for most usecases.\n\nSupported placeholders:\n* `{url}`: The url of the image to serve for this breakpoint\n* `{size}`: The width of the current srcset breakpoint\n\n```js\n{\n  srcsetPattern: '{url} {size}w'\n}\n```\n\n### htmlFileGlob\n\nGlob to match html files whose images are going to be replaced by the replaceImages\nplugin. All [minimatch](https://github.com/isaacs/minimatch) features are supported.\n\n```js\n{\n  htmlFileGlob: 'galleries/*.html'\n}\n```\n\n### htmlImageSelector\n\nSelector to select images within the html files. Almost any jQuery selector\npattern is support. See [cheerio selectors](https://github.com/cheeriojs/cheerio#selectors)\ndocumentation for more details.\n\n```js\n{\n  htmlImageSelector: 'aside.gallery img'\n}\n```\n\n## Methods\n\n\n### `processImages(files, metalsmith, done)`\n\nMetalsmith plugin to process the images found in the metadata of your files. Transforms an array of images to a proper map (object) with all information needed for adaptive display.\n\nThanks to this function, you can easily access your images within your page JS or in your templates to work with them.\n\n### `replaceImages(files, metalsmith, done)`\n\nMetalsmith plugin to replace the images.\n\nIt will use [cheerio](https://cheerio.js.org/) to scan all html files for images and add the srcset and sizes attribute to them.\n\nChange the `htmlFileGlob` or\n`htmlImageSelector` option if you have special needs.\n\n### `renderImage(src, attrs = {})`\n\nRenders a adaptive image with srcset and sizes attribute based on your configuration.\n* `src` is the path to the image.\n* `attrs` is an object containing extra attributes for the image tag.\n\nI found myself often using just this feature of the plugin, since the methods above are not needed in every case.\n\n```js\nconst adaptiveImages = AdaptiveImages()\nadaptiveImages.renderImage('images/example.jpg', {\n  alt: 'alternative text',\n  title: 'title text'\n})\n```\n\nOutput since we did not pass any options:\n\n```html\n\u003cimg\n  src=\"images/example-960.jpg\"\n  srcset=\"images/example-1440.jpg 1440w, images/example-960.jpg 960w, images/example-480.jpg 480w\"\n  sizes=\"(min-width: 960px) 960px, 100vw\"\n  alt=\"alternative text\" title=\"title text\"/\u003e\n```\n\n## Development\n\nThis project follows the [standard](https://github.com/feross/standard) coding and the [conventional changelog](https://github.com/conventional-changelog/conventional-changelog-angular/blob/master/convention.md) commit message style. Also it is configured to never decrease the code coverage of its tests.\n\nAlso make sure you check out all available npm scripts via `npm run`.\n\n## Contributing\n\nPull requests and stars are always welcome. For bugs and feature requests, [please create an issue](https://github.com/axe312ger/metalsmith-adaptive-images/issues/new).\nBut before doing anything, please read the [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxe312ger%2Fmetalsmith-adaptive-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxe312ger%2Fmetalsmith-adaptive-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxe312ger%2Fmetalsmith-adaptive-images/lists"}