{"id":21331121,"url":"https://github.com/trigensoftware/flexis-srcset","last_synced_at":"2025-07-12T09:31:32.483Z","repository":{"id":38290207,"uuid":"140057758","full_name":"TrigenSoftware/flexis-srcset","owner":"TrigenSoftware","description":"Highly customizable tool for generating responsive images.","archived":false,"fork":false,"pushed_at":"2023-01-18T22:02:12.000Z","size":6547,"stargazers_count":2,"open_issues_count":24,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-09-24T11:47:38.809Z","etag":null,"topics":["picture","responsive-images","srcset"],"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/TrigenSoftware.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-07-07T06:10:34.000Z","updated_at":"2023-11-06T19:47:18.000Z","dependencies_parsed_at":"2023-02-10T18:30:22.065Z","dependency_job_id":null,"html_url":"https://github.com/TrigenSoftware/flexis-srcset","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrigenSoftware%2Fflexis-srcset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrigenSoftware%2Fflexis-srcset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrigenSoftware%2Fflexis-srcset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrigenSoftware%2Fflexis-srcset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TrigenSoftware","download_url":"https://codeload.github.com/TrigenSoftware/flexis-srcset/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225812131,"owners_count":17527939,"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":["picture","responsive-images","srcset"],"created_at":"2024-11-21T22:29:25.615Z","updated_at":"2024-11-21T22:29:26.376Z","avatar_url":"https://github.com/TrigenSoftware.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @flexis/srcset\n\n[![NPM version][npm]][npm-url]\n[![Node version][node]][node-url]\n[![Dependencies status][deps]][deps-url]\n[![Build status][build]][build-url]\n[![Coverage status][coverage]][coverage-url]\n[![Dependabot badge][dependabot]][dependabot-url]\n[![Documentation badge][documentation]][documentation-url]\n\n[npm]: https://img.shields.io/npm/v/@flexis/srcset.svg\n[npm-url]: https://npmjs.com/package/@flexis/srcset\n\n[node]: https://img.shields.io/node/v/@flexis/srcset.svg\n[node-url]: https://nodejs.org\n\n[deps]: https://david-dm.org/TrigenSoftware/flexis-srcset.svg\n[deps-url]: https://david-dm.org/TrigenSoftware/flexis-srcset\n\n[build]: https://img.shields.io/github/workflow/status/TrigenSoftware/flexis-srcset/CI.svg\n[build-url]: https://github.com/TrigenSoftware/flexis-srcset/actions\n\n[coverage]: https://img.shields.io/coveralls/TrigenSoftware/flexis-srcset.svg\n[coverage-url]: https://coveralls.io/r/TrigenSoftware/flexis-srcset\n\n[dependabot]: https://api.dependabot.com/badges/status?host=github\u0026repo=TrigenSoftware/flexis-srcset\n[dependabot-url]: https://dependabot.com/\n\n[documentation]: https://img.shields.io/badge/API-Documentation-2b7489.svg\n[documentation-url]: https://trigensoftware.github.io/flexis-srcset\n\nHighly customizable tool for generating responsive images.\n\n- [Responsive images](https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 🌠\n- Optimize images with [imagemin](https://www.npmjs.com/package/imagemin) 🗜\n- Convert images to [modern formats](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#use_modern_image_formats_boldly) such as [WebP](https://developers.google.com/speed/webp) and [AVIF](https://jakearchibald.com/2020/avif-has-landed/) 📸\n- You can run it from the [CLI](#cli) ⌨️\n- Works with [Gulp](#gulp), [Webpack](https://github.com/TrigenSoftware/flexis-srcset-loader) and as [JS library](#js-api) 🦄\n\n\u003cimg src=\"https://pbs.twimg.com/media/ECeCK9jXoAIN_E0?format=jpg\u0026name=large\" width=\"90%\"\u003e\n\n## Install\n\n```bash\nnpm i -D @flexis/srcset\n# or\nyarn add -D @flexis/srcset\n```\n\n## Usage\n\n### CLI\n\n```sh\nnpx srcset [...sources] [...options]\n# or\nyarn exec -- srcset [...sources] [...options]\n```\n\n| Option | Description | Default |\n|--------|-------------|---------|\n| sources | Source image(s) glob patterns. | required |\n| \u0026#x2011;\u0026#x2011;help, -h | Print this message. | |\n| \u0026#x2011;\u0026#x2011;verbose, -v | Print additional info about progress. | |\n| \u0026#x2011;\u0026#x2011;match, -m | Glob patern(s) or media query(ies) to match image(s) by name or size. | all images |\n| \u0026#x2011;\u0026#x2011;width, -w | Output image(s) widths to resize, value less than or equal to 1 will be detected as multiplier. | no resize |\n| \u0026#x2011;\u0026#x2011;format, -f | Output image(s) formats to convert. | no convert |\n| \u0026#x2011;\u0026#x2011;skipOptimization | Do not optimize output images. | `false` |\n| \u0026#x2011;\u0026#x2011;noScalingUp | Do not generate images with higher resolution than they's sources are. | `false`\n| \u0026#x2011;\u0026#x2011;dest, -d | Destination directory. | required |\n\n#### Example\n\n```sh\nsrcset \"src/images/*.jpg\" --match \"(min-width: 1920px)\" --width 1920,1280,1024,860,540,320 --format jpg,webp -d static/images\n```\n\n### Configuration\n\n#### Common options\n\n| Option | Type | Description | Default |\n|--------|------|-------------|---------|\n| processing | Partial\\\u003c[IProcessingConfig]\\\u003e | Object with Sharp configs for each supported format. | see [defaults.ts](src/defaults.ts) |\n| optimization | Partial\\\u003c[IOptimizationConfig]\\\u003e | Object with imagemin plugins for each format. | see [defaults.ts](src/defaults.ts) |\n| skipOptimization | boolean | Do not optimize output images. | `false` |\n| scalingUp | boolean | Generate images with higher resolution than they's sources are. | `true` |\n| postfix | [Postfix] | Postfix string or function to generate postfix for image. | see [defaults.ts](src/defaults.ts) |\n\n#### Constructor options\n\nExtends [common options](#common-options).\n\n| Option | Type | Description | Default |\n|--------|------|-------------|---------|\n| concurrency | number | Concurrency limit. | `os.cpus().length` |\n| limit | [Limit](https://www.npmjs.com/package/p-limit) | p-limit's limit. | `pLimit(concurrency)` |\n\n#### Rule options\n\nExtends [common options](#common-options).\n\n| Option | Type | Description | Default |\n|--------|------|-------------|---------|\n| match | [Matcher] | There is support of 3 types of matchers:\u003cbr\u003e1. Glob pattern of file path;\u003cbr\u003e2. Media query to match image by size;\u003cbr\u003e3. `(path: string, size: ISize, source: Vinyl) =\u003e boolean` function. | all images |\n| format | [SupportedExtension] \\| [SupportedExtension]\\[\\] | Output image(s) formats to convert. | no convert |\n| width | number \\| number[] | Output image(s) widths to resize, value less than or equal to 1 will be detected as multiplier. | `[1]` |\n\n#### Configuration file\n\nConfiguration file is optional. If needed, can be defined through `.srcsetrc` (JSON file) or `.srcsetrc.js` in the root directory of the project.\n\nSupported options, extends [common options](#common-options):\n\n| Option | Type | Description | Default |\n|--------|------|-------------|---------|\n| src | string \\| string[] | Source image(s) glob patterns. | required |\n| rules | [IRule](#rule-options)\\[\\] | Rules. | `[]` |\n| verbose | boolean | Print additional info about progress. | `false` |\n| dest | string | Destination directory. | required |\n\n[IProcessingConfig]: https://trigensoftware.github.io/flexis-srcset/interfaces/types.iprocessingconfig.html\n[IOptimizationConfig]: https://trigensoftware.github.io/flexis-srcset/interfaces/types.ioptimizationconfig.html\n[Postfix]: https://trigensoftware.github.io/flexis-srcset/modules/types.html#postfix\n[Matcher]: https://trigensoftware.github.io/flexis-srcset/modules/helpers.html#matcher\n[SupportedExtension]: https://trigensoftware.github.io/flexis-srcset/modules/extensions.html#supportedextension\n\n### Gulp\n\nYou can use `@flexis/srcset` with [Gulp](https://github.com/gulpjs/gulp):\n\n```js\nimport srcSet from '@flexis/srcset/lib/stream';\n\ngulp.task('images', () =\u003e\n    gulp.src('src/*.{jpg,png}')\n        .pipe(srcSet([{\n            match: '(min-width: 3000px)',\n            width: [1920, 1280, 1024, 860, 540, 320],\n            format: ['jpg', 'webp']\n        }, {\n            match: '(max-width: 3000px)',\n            width: [1, .5],\n            format: ['jpg', 'webp']\n        }], {\n            skipOptimization: true\n        }))\n        .pipe(gulp.dest('static'))\n);\n```\n\nPlugin options:\n\nFirst argument is [IRule](#rule-options)\\[\\], second argument extends [common options](#common-options):\n\n| Option | Type | Description | Default |\n|--------|------|-------------|---------|\n| verbose | boolean | Print additional info about progress. | `false` |\n\n### JS API\n\nModule exposes next API:\n\n```js\nexport default SrcSetGenerator;\nexport {\n    IProcessingConfig,\n    IOptimizationConfig,\n    ISrcSetVinyl,\n    ISize,\n    IMatcherFunction,\n    SupportedExtension,\n    Matcher,\n    IPostfixFormatter,\n    Postfix,\n    IConfig,\n    IGenerateConfig,\n    isSupportedType,\n    extensions,\n    attachMetadata,\n    matchImage\n}\n```\n\n#### Example\n\n```js\nimport {\n    promises as fs\n} from 'fs';\nimport SrcSetGenerator from '@flexis/srcset';\nimport Vinyl from 'vinyl';\n\nasync function generate() {\n    const path = 'src/background.jpg';\n    const contents = await fs.readFile(path);\n    const source = new Vinyl({\n        path,\n        contents\n    });\n    const srcSet = new SrcSetGenerator();\n    const images = srcSet.generate(source, {\n        width: [1920, 1280, 1024, 860, 540, 320],\n        format: ['jpg', 'webp']\n    });\n\n    for await (const image of images) {\n        image.base = './static';\n        await fs.writeFile(image.path, image.contents);\n    }\n}\n\ngenerate();\n```\n\n[Description of all methods you can find in Documentation.](https://trigensoftware.github.io/flexis-srcset/index.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrigensoftware%2Fflexis-srcset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrigensoftware%2Fflexis-srcset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrigensoftware%2Fflexis-srcset/lists"}