{"id":26266093,"url":"https://github.com/calvin-ll/webpack-image-srcset-loader","last_synced_at":"2025-06-24T13:37:09.412Z","repository":{"id":37459371,"uuid":"273124837","full_name":"Calvin-LL/webpack-image-srcset-loader","owner":"Calvin-LL","description":"Generate srcset string from image","archived":false,"fork":false,"pushed_at":"2023-01-24T13:02:52.000Z","size":9437,"stargazers_count":30,"open_issues_count":32,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-04T00:03:39.003Z","etag":null,"topics":["image","loader","srcset","srcset-string","webpack"],"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/Calvin-LL.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":"2020-06-18T02:38:44.000Z","updated_at":"2023-01-31T18:18:12.000Z","dependencies_parsed_at":"2023-02-13T21:31:30.643Z","dependency_job_id":null,"html_url":"https://github.com/Calvin-LL/webpack-image-srcset-loader","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/Calvin-LL/webpack-image-srcset-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-image-srcset-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-image-srcset-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-image-srcset-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-image-srcset-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Calvin-LL","download_url":"https://codeload.github.com/Calvin-LL/webpack-image-srcset-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-image-srcset-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261686433,"owners_count":23194287,"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","loader","srcset","srcset-string","webpack"],"created_at":"2025-03-14T03:16:48.558Z","updated_at":"2025-06-24T13:37:09.389Z","avatar_url":"https://github.com/Calvin-LL.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-image-srcset-loader\n\n[![npm](https://img.shields.io/npm/v/webpack-image-srcset-loader?style=flat)](https://www.npmjs.com/package/webpack-image-srcset-loader) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=flat)](https://opensource.org/licenses/MIT)\n\nThis loader generates a srcset string from an image.\n\n## Examples\n\n[React](https://github.com/Calvin-LL/webpack-image-srcset-loader/tree/main/examples/react)\n\n[Vue](https://github.com/Calvin-LL/webpack-image-srcset-loader/tree/main/examples/vue)\n\n[React example with other related loaders](https://github.com/Calvin-LL/react-responsive-images-example)\n\n[Vue example with other related loaders](https://github.com/Calvin-LL/vue-responsive-images-example)\n\n## Install\n\nInstall with npm:\n\n```bash\nnpm install --save-dev webpack-image-srcset-loader webpack-image-resize-loader\n```\n\nInstall with yarn:\n\n```bash\nyarn add --dev webpack-image-srcset-loader webpack-image-resize-loader\n```\n\n## Usage\n\n```javascript\nimport jpgSrcSet from \"./some_pic.jpg?srcset\";\n\n// jpgSrcSet will be \"97[...]7.jpg 480w, ed[...]3.jpg 1024w, c6[...]b.jpg 1920w, b6[...]3.jpg 2560w, 57[...]e.jpg\"\n```\n\n#### webpack.config.js\n\n`webpack-image-srcset-loader` should be placed before all other loaders\n\nTry [`webpack-sharp-loader`](https://github.com/Calvin-LL/webpack-sharp-loader) if you want to do other processing with your image before or after resizing\n\n```javascript\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      // ...\n      {\n        test: /\\.(png|jpe?g|webp|tiff?)$/i,\n        oneOf: [\n          {\n            // if the import url looks like \"some.png?srcset...\"\n            resourceQuery: /srcset/,\n            use: [\n              {\n                loader: \"webpack-image-srcset-loader\",\n                options: {\n                  sizes: [\"480w\", \"1024w\", \"1920w\", \"2560w\", \"original\"],\n                },\n              },\n              \"file-loader\",\n              \"webpack-image-resize-loader\",\n              // add webpack-sharp-loader if you want to pre-process your image e.g. rotating, flipping\n            ],\n          },\n          {\n            // if no previous resourceQuery match\n            use: \"file-loader\",\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Options\n\n#### Note:\n\nAdditional options in the query (that thing after `?`) such as `quality` or `format` here will be passed down to [webpack-image-resize-loader](https://github.com/Calvin-LL/webpack-image-resize-loader). See [webpack-image-resize-loader's options](https://github.com/Calvin-LL/webpack-image-resize-loader#options).\n\nFor example:\n\n```javascript\nimport webpSrcSet from \"./some_pic.jpg?srcset\u0026format=webp\";\n\n// webpSrcSet will be \"00[...]5.webp 480w, 40[...]3.webp 1024w, 76[...]b.webp 1920w, a4[...]c.webp 2560w, b1[...]c.webp\"\n```\n\n| Name                                                                | Type         | Default   | Description                                                                                  |\n| ------------------------------------------------------------------- | ------------ | --------- | -------------------------------------------------------------------------------------------- |\n| **[`sizes`](#sizes)**                                               | `(string)[]` | undefined | Sizes in the output srcset.                                                                  |\n| **[`scaleUp`](#scaleup)**                                           | `boolean`    | `false`   | Whether or not to scale up the image when the desired width is greater than the image width. |\n| **[`resizeLoaderOptionsGenerator`](#resizeloaderoptionsgenerator)** | `function`   | undefined | A function that returns the option to be passed on to the next loader.                       |\n| **[`esModule`](#esmodule)**                                         | `boolean`    | `true`    | Whether the export is in ES modules syntax or CommonJS modules syntax                        |\n\n### `sizes`\n\nAn array containing strings in the format `\"[number]w\"`, `\"[number]x\"`, or `\"original\"`. The numbers cannot contain decimals.\n\nAllowed: `[\"10w\", \"1x\", \"2x\", \"original\"]`\n\nNot allowed: `[\"10.0w\", \"1.5x\", \"2.0x\"]`\n\nWhen using `\"[number]x\"`, the original size of the image will be used for the greatest value. For example, if an image is `10×10` in size, and `sizes` is `[\"1x\", \"2x\"]`, the output image will have sizes `5×5` for `\"1x\"` and `10×10` for `\"2x\"`.\n\n### `scaleUp`\n\nWhen true, if the desired width is greater than the image width, the size will not be included in the output srcset string. For example, if the original image is `10×10` in size, and the `sizes` array is `[\"5w\", \"10w\", \"15w\"]`, when `scaleUp` is `true` the output string is `\"image1.jpg 5w, image2.jpg 10w, image3.jpg 15w\"`, when `scaleUp` is `false` the output string is `\"image1.jpg 5w, image2.jpg 10w\"`.\n\nNote: this option has no effect on `\"[number]x\"` or `\"original\"`\n\n### `resizeLoaderOptionsGenerator`\n\n##### default\n\n```javascript\nfunction defaultResizeLoaderOptionsGenerator(width, scale, existingOptions) {\n  return {\n    ...existingOptions,\n    ...(existingOptions?.fileLoaderOptionsGenerator\n      ? {\n          fileLoaderOptionsGenerator: existingOptions.fileLoaderOptionsGenerator.toString(),\n        }\n      : {}),\n    // since we filtered out all the width that are too wide,\n    // nothing to worry about there, need this to make sure\n    // scales larger than 1x works\n    scaleUp: true,\n    width,\n    scale,\n  };\n}\n```\n\nIf you wish to use a resize loader other than [webpack-image-resize-loader](https://github.com/Calvin-LL/webpack-image-resize-loader). You may customize how the width and scale is passed down to that loader`s options.\n\n```\n// width is either a number or undefined\n// scale is either a number or undefined\n// existingOptions is either the existing options for the next loader or undefined\n(width, scale, existingOptions: object) =\u003e {\n  ...\n  return { ...existingOptions };\n}\n```\n\nFor example, if `sizes` is `[\"10w\", \"1x\", \"2x\", \"original\"]`, `resizeLoaderOptionsGenerator` will be called with\n\n- `resizeLoaderOptionsGenerator(10, undefined, existingOptions)` for `10w`\n- `resizeLoaderOptionsGenerator(undefined, 1, existingOptions)` for `1x`\n- `resizeLoaderOptionsGenerator(undefined, 2, existingOptions)` for `2x`\n- `resizeLoaderOptionsGenerator(undefined, undefined, existingOptions)` for `\"original\"`\n\n### `esModule`\n\nWhether the export is in ES modules syntax or CommonJS modules syntax. If you don't know what it is or whether or not you need it, leave is as default.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalvin-ll%2Fwebpack-image-srcset-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalvin-ll%2Fwebpack-image-srcset-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalvin-ll%2Fwebpack-image-srcset-loader/lists"}