{"id":27647447,"url":"https://github.com/artyomresh/image-resolution-loader","last_synced_at":"2025-04-24T01:50:31.991Z","repository":{"id":35206117,"uuid":"215294440","full_name":"ArtyomResh/image-resolution-loader","owner":"ArtyomResh","description":"A loader that takes your image and returs @1x, @2x and @3x resolution versions of it","archived":false,"fork":false,"pushed_at":"2023-01-04T22:48:22.000Z","size":470,"stargazers_count":3,"open_issues_count":13,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-22T17:38:18.654Z","etag":null,"topics":["image-resolution","webpack","webpack-loader"],"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/ArtyomResh.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-10-15T12:34:00.000Z","updated_at":"2020-06-26T04:18:12.000Z","dependencies_parsed_at":"2023-01-15T16:08:40.319Z","dependency_job_id":null,"html_url":"https://github.com/ArtyomResh/image-resolution-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtyomResh%2Fimage-resolution-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtyomResh%2Fimage-resolution-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtyomResh%2Fimage-resolution-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtyomResh%2Fimage-resolution-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArtyomResh","download_url":"https://codeload.github.com/ArtyomResh/image-resolution-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250546019,"owners_count":21448256,"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-resolution","webpack","webpack-loader"],"created_at":"2025-04-24T01:50:31.383Z","updated_at":"2025-04-24T01:50:31.984Z","avatar_url":"https://github.com/ArtyomResh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![deps][deps]][deps-url]\n\n# image-resolution-loader\n\nThe `image-resolution-loader` takes your image and returns @1x, @2x and @3x resolution versions of it.\n\n## Install\n\nTo begin, you'll need to install `image-resolution-loader`:\n\n```console\n$ npm install image-resolution-loader --save-dev\n```\n\nor\n\n```console\n$ yarn add image-resolution-loader -D\n```\n\n## Usage\n\nAdd loader to your `webpack` config:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpe?g|webp)$/i,\n        use: [\n          {\n            loader: 'image-resolution-loader',\n            options: {\n              // loader options, see below\n            },\n          },\n        ],\n      },\n    ],\n  },\n}\n```\n\nThen `import` (or `require`) the target file(s) in one of the bundle's files:\n\n**file.js**\n\n```js\nimport images from ('./file.png')\n```\n\nor\n\n```js\nconst images = require('./file.png')\n```\n\nAnd run `webpack` via your preferred method.\nThe Loader will accept your image as the initial with 3x resolution and will generate from it 2x and 1x versions. Next, it will emit these images on the specified path and return the object, which will contain the path to the all versions of the image and srcSet.\n\n\u003e ℹ️ It is recommended to set the height and width of the initial image multiple of 3\n\n## Options\n\n### `name`\n\nType: `String|Function`\nDefault: `'[name][resolution].[ext]'`\n\nSpecifies a custom filename template for the target file(s) using the query\nparameter `name`. For example, to emit a file from your `context` directory into\nthe output directory retaining the full directory structure, you might use:\n\n\u003e ℹ️ By default the path and name you specify will output the file in that same directory, and will also use the same URI path to access the file.\n\n### `outputPath`\n\nType: `String|Function`\nDefault: `undefined`\n\nSpecify a filesystem path where the target file(s) will be placed.\n\n### `publicPath`\n\nType: `String|Function`\nDefault: [`__webpack_public_path__`](https://webpack.js.org/api/module-variables/#__webpack_public_path__-webpack-specific-)\n\nSpecifies a custom public path for the target file(s).\n\n### `webp`\n\nType: object\nDefault: {}\n\n[sharp](https://github.com/lovell/sharp/) is used for optimizing webp images.The default options of [`sharp.webp()`](https://sharp.pixelplumbing.com/en/stable/api-output/#webp) are used if you omit this option.\n\n### `jpg`\n\nType: object\nDefault: {}\n\n[sharp](https://github.com/lovell/sharp/) is used for optimizing jpg images.The default options of [`sharp.jpg()`](https://sharp.pixelplumbing.com/en/stable/api-output/#jpeg) are used if you omit this option.\n\n### `png`\n\nType: object\nDefault: {}\n\n[imagemin-pngquant](https://github.com/imagemin/imagemin-pngquant) is used for optimizing png images.The default options of [pngquant](https://github.com/kornelski/pngquant) are used if you omit this option.\n\n### `zopfli`\n\nType: object\nDefault: {}\n\n[imagemin-zopfli](https://github.com/imagemin/imagemin-zopfli) is used for compressing png images.The default options of [imagemin-zopfli](https://github.com/imagemin/imagemin-zopfli) are used if you omit this option.\n\n### `disable`\n\nType: `Boolean`\nDefault: `false`\n\nDisable processing of images by this loader (useful in development). Images data will still be generated but only for the original resolution.\n\n## Placeholders\n\nFull information about placeholders you can find [here](https://github.com/webpack/loader-utils#interpolatename).\n\n### `[resolution]`\n\nType: `String`\nDefault: `@1x` | `@2x` | `@3x`\n\nImage resolution.\n\n## Examples\n\n**file.js**\n\n```js\nimport images from './file.png'\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpe?g|webp)$/i,\n        use: [\n          {\n            loader: 'image-resolution-loader',\n          },\n        ],\n      },\n    ],\n  },\n}\n```\n\nThe result will be a variable `images`, containing the following information:\n\n```js\n{\n  '1x': '/file@1x.png',\n  '2x': '/file@2x.png',\n  '3x': '/file@3x.png',\n  images: [{\n    path: '/file@1x.png',\n    width: /* width of 1x image */,\n    height: /* height of 1x image */,\n    resolution: '1x',\n  }, {\n    path: '/file@2x.png',\n    width: /* width of 2x image */,\n    height: /* height of 2x image */,\n    resolution: '2x',\n  }, {\n    path: '/file@1x.png',\n    width: /* width of 3x image */,\n    height: /* height of 3x image */,\n    resolution: '3x',\n  }],\n  imagesByResolution: {\n    '1x': {\n      path: '/file@1x.png',\n      width: /* width of 1x image */,\n      height: /* height of 1x image */,\n    },\n    '2x': {\n      path: '/file@2x.png',\n      width: /* width of 2x image */,\n      height: /* height of 2x image */,\n    },\n    '3x': {\n      path: '/file@3x.png',\n      width: /* width of 3x image */,\n      height: /* height of 3x image */,\n    },\n    srcSet: '/file@1x.png 1x,/file@2x.png 2x,/file@3x.png 3x',\n  },\n```\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/image-resolution-loader.svg\n[npm-url]: https://npmjs.com/package/image-resolution-loader\n[node]: https://img.shields.io/node/v/image-resolution-loader\n[node-url]: https://nodejs.org\n[deps]: https://david-dm.org/ArtyomResh/image-resolution-loader.svg\n[deps-url]: https://david-dm.org/ArtyomResh/image-resolution-loader\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartyomresh%2Fimage-resolution-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartyomresh%2Fimage-resolution-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartyomresh%2Fimage-resolution-loader/lists"}