{"id":15504778,"url":"https://github.com/foray1010/image-process-loader","last_synced_at":"2025-04-23T01:07:34.446Z","repository":{"id":37458323,"uuid":"82254119","full_name":"foray1010/image-process-loader","owner":"foray1010","description":"Image process loader for webpack, powered by sharp","archived":false,"fork":false,"pushed_at":"2025-04-22T03:31:44.000Z","size":3077,"stargazers_count":4,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-23T01:07:27.604Z","etag":null,"topics":["gif","image","image-processing","jpeg","jpg","loader","png","sharp","svg","tiff","webp","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","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/foray1010.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-02-17T03:41:06.000Z","updated_at":"2025-04-19T06:27:29.000Z","dependencies_parsed_at":"2023-12-25T01:38:10.857Z","dependency_job_id":"eb691bd6-6828-4c39-87e8-a4628f8cb1b8","html_url":"https://github.com/foray1010/image-process-loader","commit_stats":{"total_commits":596,"total_committers":6,"mean_commits":99.33333333333333,"dds":0.2936241610738255,"last_synced_commit":"c14ffa0c40ba3602eed4fe9dc11a7b41a1a8e6b5"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foray1010%2Fimage-process-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foray1010%2Fimage-process-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foray1010%2Fimage-process-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foray1010%2Fimage-process-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foray1010","download_url":"https://codeload.github.com/foray1010/image-process-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250349053,"owners_count":21415914,"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":["gif","image","image-processing","jpeg","jpg","loader","png","sharp","svg","tiff","webp","webpack","webpack-loader"],"created_at":"2024-10-02T09:19:57.233Z","updated_at":"2025-04-23T01:07:34.430Z","avatar_url":"https://github.com/foray1010.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# image-process-loader\n\n```sh\nnpm install --save-dev image-process-loader sharp\n# or\nyarn add -D image-process-loader sharp\n```\n\nImage process loader for webpack, powered by [sharp](https://github.com/lovell/sharp)\n\n- supports operations like resizing, cropping, rotation, color manipulation, file type conversation and [lots more](https://sharp.pixelplumbing.com/)!\n\n- supports JPEG, PNG, WebP, TIFF, GIF and SVG images, but only support output in JPEG, PNG, WebP and TIFF formats\n\n- [sharp](https://github.com/lovell/sharp) is 27x faster than [jimp](https://github.com/oliver-moran/jimp), and 4x faster than [GraphicsMagick](https://github.com/aheckmann/gm) or [ImageMagick](https://github.com/rsms/node-imagemagick) (\u003chttps://sharp.pixelplumbing.com/performance\u003e)\n\n- only support webpack `2.x` and Node.js `\u003e=6.9` (Welcome PR if you need to use older version)\n\n## Development Setup\n\nWe are using [corepack](https://nodejs.org/api/corepack.html) to manage the `yarn` version\n\n```bash\ncorepack enable\n```\n\n## Usage\n\nThis loader _was not designed to stop you from doing stupid things, because that would also stop you from doing clever things._\n\nYou have full access to [sharp API](https://sharp.pixelplumbing.com/), take a look at their documentation starting from [here](https://sharp.pixelplumbing.com/api-output#table-of-contents), and know what methods you can call\n\n---\n\nTake an example from [sharp resize](https://sharp.pixelplumbing.com/api-resize#resize) method. Let's say I want to restrict all image's width to `200px`\n\nIn `sharp`\n\n```js\nsharp(inputBuffer).resize(200).toBuffer()\n```\n\nIn `image-process-loader`\n\n```js\n/* webpack.config.js */\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(jpe?g|png|tiff|webp)$/,\n        loader: 'image-process-loader',\n        options: {\n          resize: 200,\n        },\n      },\n    ],\n  },\n}\n```\n\nIt is okay to pass multiple arguments, just wrap your option with array.\n\nFor example, if I want to resize all images to `width=200px` and `height=300px`\n\n```js\n/* webpack.config.js */\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(jpe?g|png|tiff|webp)$/,\n        loader: 'image-process-loader',\n        options: {\n          resize: [200, 300],\n        },\n      },\n    ],\n  },\n}\n```\n\nAnd of course you can pass `sharp`'s Enums\n\n```js\n/* webpack.config.js */\nconst sharp = require('sharp')\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(jpe?g|png|tiff|webp)$/,\n        loader: 'image-process-loader',\n        options: {\n          resize: [\n            200,\n            300,\n            {\n              kernel: sharp.kernel.lanczos2,\n              interpolator: sharp.interpolator.nohalo,\n            },\n          ],\n        },\n      },\n    ],\n  },\n}\n```\n\nOne important thing to keep in mind, **the order of options is exactly the same as the order of processing image**\n\nIn `image-process-loader`\n\n```js\n/* webpack.config.js */\nconst sharp = require('sharp')\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(jpe?g|png|tiff|webp)$/,\n        loader: 'image-process-loader',\n        options: {\n          crop: sharp.strategy.entropy,\n          resize: 200,\n        },\n      },\n    ],\n  },\n}\n```\n\nIn `sharp`\n\n```js\nsharp(inputBuffer).crop(sharp.strategy.entropy).resize(200).toBuffer()\n```\n\n## Examples\n\nConvert all images to progressive jpeg\n\n```js\n/* webpack.config.js */\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(gif|jpe?g|png|svg|tiff|webp)$/,\n        use: [\n          {\n            loader: 'file-loader',\n            options: {\n              name: 'img/[name].jpg',\n            },\n          },\n          {\n            loader: 'image-process-loader',\n            options: {\n              jpeg: {\n                progressive: true,\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n}\n```\n\nConvert all icons to greyscale when in `development` mode\n\n```js\n/* webpack.config.js */\n\nconst rules = [\n  {\n    test: /\\.png$/,\n    loader: 'file-loader',\n    options: {\n      name: 'img/[name].[ext]',\n    },\n  },\n]\n\nif (process.env.NODE_ENV === 'development') {\n  rules.push({\n    test: /\\/icon.+\\.png$/, // assume all icons have `icon` prefix\n    loader: 'image-process-loader',\n    options: {\n      greyscale: true,\n    },\n  })\n}\n\nmodule.exports = {\n  module: {\n    rules: rules,\n  },\n}\n```\n\n## Use preset(s) and inline query params\n\n```js\n/* webpack.config.js */\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(gif|jpe?g|png|svg|tiff|webp)$/,\n        use: [\n          {\n            loader: 'file-loader',\n            options: {\n              name: 'img/[name].jpg',\n            },\n          },\n          {\n            loader: 'image-process-loader',\n            options: {\n              jpeg: {\n                progressive: true,\n              },\n              presets: {\n                blur: {\n                  blur: true,\n                  jpeg: {\n                    quality: 55,\n                  },\n                },\n                'good-quality': {\n                  jpeg: {\n                    quality: 80,\n                  },\n                },\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n}\n```\n\n```js\nrequire('path/to/image.jpg?preset=blur') // blur, quality: 55\nrequire('path/to/image.jpg?presets[]=blur\u0026presets[]=good-quality') // blur, quality: 80; presets order matter\nrequire('path/to/image.jpg?presets[]=good-quality\u0026presets[]=blur') // blur, quality: 55; presets order matter\nrequire('path/to/image.jpg?{preset:\"blur\",{jpeg:{quality:40}}}') // blur, quality: 40\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforay1010%2Fimage-process-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforay1010%2Fimage-process-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforay1010%2Fimage-process-loader/lists"}