{"id":13671301,"url":"https://github.com/vanwagonet/img-loader","last_synced_at":"2025-04-27T14:33:17.726Z","repository":{"id":28178479,"uuid":"31679942","full_name":"vanwagonet/img-loader","owner":"vanwagonet","description":"Image minimizing loader for webpack","archived":false,"fork":false,"pushed_at":"2023-04-14T08:19:18.000Z","size":157,"stargazers_count":162,"open_issues_count":3,"forks_count":8,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-11T08:44:12.574Z","etag":null,"topics":["imagemin","javascript","loader","webpack"],"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/vanwagonet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-03-04T21:08:54.000Z","updated_at":"2024-02-22T17:26:21.000Z","dependencies_parsed_at":"2024-01-14T17:03:26.040Z","dependency_job_id":"2387e582-7844-489c-9172-a3be60597be6","html_url":"https://github.com/vanwagonet/img-loader","commit_stats":{"total_commits":59,"total_committers":9,"mean_commits":6.555555555555555,"dds":0.728813559322034,"last_synced_commit":"8d05097f286cf4793c56691a3a5f959cac74075f"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanwagonet%2Fimg-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanwagonet%2Fimg-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanwagonet%2Fimg-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanwagonet%2Fimg-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vanwagonet","download_url":"https://codeload.github.com/vanwagonet/img-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251154436,"owners_count":21544500,"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":["imagemin","javascript","loader","webpack"],"created_at":"2024-08-02T09:01:05.510Z","updated_at":"2025-04-27T14:33:17.383Z","avatar_url":"https://github.com/vanwagonet.png","language":"JavaScript","readme":"# img-loader\n\n[![npm Version][npm-image]][npm]\n[![MIT License][license-image]][LICENSE]\n\nImage minimizing loader for webpack 4, meant to be used with [url-loader](https://github.com/webpack/url-loader), [file-loader](https://github.com/webpack/file-loader), or [raw-loader](https://github.com/webpack/raw-loader)\n\n\u003e Minify PNG, JPEG, GIF and SVG images with [imagemin](https://github.com/imagemin/imagemin) [plugins](https://www.npmjs.com/search?q=keywords:imageminplugin)\n\nimg-loader has a peer dependency on `imagemin`, so you will need to make sure to include that, along with any imagemin plugins you will use.\n\n\n## Install\n\n```sh\n$ npm install img-loader --save-dev\n```\n\n\n## Usage\n\n[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)\n\n```javascript\nmodule: {\n  rules: [\n    {\n      test: /\\.(jpe?g|png|gif|svg)$/i,\n      use: [\n        'url-loader?limit=10000',\n        'img-loader'\n      ]\n    }\n  ]\n}\n```\n\nBy default the loader simply passes along the image unmodified.\n\n\n### Options\n\nOptions are forwarded to `imagemin.buffer(image, options)`, so any plugins you would like to use for optimizing the images are passed as the `plugins` property.\n\nFor more details on each plugin's options, see their documentation on [Github](https://github.com/imagemin).\n\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.(jpe?g|png|gif|svg)$/i,\n        use: [\n          'url-loader?limit=10000',\n          {\n            loader: 'img-loader',\n            options: {\n              plugins: [\n                require('imagemin-gifsicle')({\n                  interlaced: false\n                }),\n                require('imagemin-mozjpeg')({\n                  progressive: true,\n                  arithmetic: false\n                }),\n                require('imagemin-pngquant')({\n                  floyd: 0.5,\n                  speed: 2\n                }),\n                require('imagemin-svgo')({\n                  plugins: [\n                    { removeTitle: true },\n                    { convertPathData: false }\n                  ]\n                })\n              ]\n            }\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\n`plugins` can also be a function, which will receive the [webpack loader context](https://webpack.js.org/api/loaders/#the-loader-context) and should return the plugins array.\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.(jpe?g|png|gif|svg)$/i,\n        use: [\n          'url-loader?limit=10000',\n          {\n            loader: 'img-loader',\n            options: {\n              plugins (context) {\n                if (process.env.NODE_ENV === 'production') return []\n                return [\n                  require('imagemin-svgo')({\n                    plugins: [\n                      { cleanupIDs: false },\n                      {\n                        prefixIds: {\n                          prefix: path.basename(context.resourcePath, 'svg')\n                        }\n                      }\n                    ]\n                  })\n                ]\n              }\n            }\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\nIf you only want to run imagemin in production builds, you can omit the `img-loader` or leave plugins empty in your production configuration file. If you don't keep a separate configuration for prod builds, something like the following also works:\n\n```js\n{\n  loader: 'img-loader',\n  options: {\n    plugins: process.env.NODE_ENV === 'production' \u0026\u0026 [\n      require('imagemin-svgo')({})\n      // etc.\n    ]\n  }\n}\n```\n\n\n## Migrating from 2.x\n\nTo get the default behavior from version `2.0.1`, you'll need to install these imagemin plugins:\n\n* [imagemin-gifsicle](https://github.com/imagemin/imagemin-gifsicle)\n* [imagemin-mozjpeg](https://github.com/imagemin/imagemin-mozjpeg)\n* [imagemin-optipng](https://github.com/imagemin/imagemin-optipng)\n* [imagemin-svgo](https://github.com/imagemin/imagemin-svgo)\n\nThen use this loader setup in your webpack configuration file:\n\n```js\n{\n  loader: 'img-loader',\n  options: {\n    plugins: [\n      require('imagemin-gifsicle')({}),\n      require('imagemin-mozjpeg')({}),\n      require('imagemin-optipng')({}),\n      require('imagemin-svgo')({})\n    ]\n  }\n}\n```\n\nThe options object you had under a plugin's name property, should instead be passed directly to the plugin after you require it.\n\nIf you used the optional `pngquant` settings, then you will additionally need to install [imagemin-pngquant](https://github.com/imagemin/imagemin-pngquant), and add it to your plugins array as any other imagemin plugin.\n\n\n## License\n\nThis software is free to use under the MIT license. See the [LICENSE-MIT file][LICENSE] for license text and copyright information.\n\n[npm]: https://www.npmjs.org/package/img-loader\n[npm-image]: https://img.shields.io/npm/v/img-loader.svg\n[license-image]: https://img.shields.io/npm/l/img-loader.svg\n[LICENSE]: https://github.com/vanwagonet/img-loader/blob/master/LICENSE-MIT\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanwagonet%2Fimg-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvanwagonet%2Fimg-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanwagonet%2Fimg-loader/lists"}