{"id":35474662,"url":"https://github.com/rstackjs/rsbuild-plugin-image-compress","last_synced_at":"2026-01-16T12:27:18.006Z","repository":{"id":248105124,"uuid":"827739308","full_name":"rstackjs/rsbuild-plugin-image-compress","owner":"rstackjs","description":"An Rsbuild plugin to compress images","archived":false,"fork":false,"pushed_at":"2026-01-15T03:28:09.000Z","size":672,"stargazers_count":20,"open_issues_count":8,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-01-15T09:35:44.286Z","etag":null,"topics":["rsbuild","rsbuild-plugin","rspack"],"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/rstackjs.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-12T09:16:16.000Z","updated_at":"2026-01-15T03:28:06.000Z","dependencies_parsed_at":"2024-07-12T12:25:59.050Z","dependency_job_id":"b3f8f2d3-2533-4ab0-b274-fa2aefacab64","html_url":"https://github.com/rstackjs/rsbuild-plugin-image-compress","commit_stats":null,"previous_names":["rspack-contrib/rsbuild-plugin-image-compress","rstackjs/rsbuild-plugin-image-compress"],"tags_count":6,"template":false,"template_full_name":"rstackjs/rsbuild-plugin-template","purl":"pkg:github/rstackjs/rsbuild-plugin-image-compress","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstackjs%2Frsbuild-plugin-image-compress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstackjs%2Frsbuild-plugin-image-compress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstackjs%2Frsbuild-plugin-image-compress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstackjs%2Frsbuild-plugin-image-compress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rstackjs","download_url":"https://codeload.github.com/rstackjs/rsbuild-plugin-image-compress/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstackjs%2Frsbuild-plugin-image-compress/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28478645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["rsbuild","rsbuild-plugin","rspack"],"created_at":"2026-01-03T12:00:40.055Z","updated_at":"2026-01-16T12:27:18.001Z","avatar_url":"https://github.com/rstackjs.png","language":"TypeScript","readme":"# @rsbuild/plugin-image-compress\n\nAn Rsbuild plugin to compress images via [@napi-rs/image](https://www.npmjs.com/package/@napi-rs/image) and [SVGO](https://www.npmjs.com/package/svgo).\n\nWith the image compression plugin, image assets used in the project can be compressed to reduce the output size without affecting the visual appearance of the image.\n\n\u003cp\u003e\n  \u003ca href=\"https://npmjs.com/package/@rsbuild/plugin-image-compress\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/v/@rsbuild/plugin-image-compress?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"license\" /\u003e\n  \u003ca href=\"https://npmcharts.com/compare/@rsbuild/plugin-image-compress?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@rsbuild/plugin-image-compress.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Usage\n\nInstall:\n\n```bash\nnpm add @rsbuild/plugin-image-compress -D\n```\n\nAdd plugin to your `rsbuild.config.ts`:\n\n```ts\n// rsbuild.config.ts\nimport { pluginImageCompress } from \"@rsbuild/plugin-image-compress\";\n\nexport default {\n  plugins: [pluginImageCompress()],\n};\n```\n\nThis plugin is compatible with both Rsbuild and Rspack. If you are using Rspack instead of Rsbuild, you can import the `ImageMinimizerPlugin` from the package, see [Rspack Usage](#rspack-usage).\n\n## Default Compressors\n\nBy default, the plugin will enable `jpeg`, `png`, `ico` image compressors, which are equivalent to the following two examples:\n\n```js\npluginImageCompress([\"jpeg\", \"png\", \"ico\"]);\n```\n\n```js\npluginImageCompress([{ use: \"jpeg\" }, { use: \"png\" }, { use: \"ico\" }]);\n```\n\n## Supported Compressors\n\nThe plugin supports the following compressors:\n\n- `jpeg`: For JPEG images.\n- `png`: For PNG images.\n- `pngLossless`: For PNG images with lossless compression.\n- `ico`: For ICO images.\n- `svg`: For SVG images.\n- `avif`: For AVIF images.\n- `webp`: For WEBP images.\n\nOnly SVG are compressed by `svgo`, other compressors are compressed by `@napi-rs/image`.\n\n## Options\n\nThe plugin accepts an array of compressor configuration options, each of which can be either a string or an object. The string can be the name of a built-in compressor and its default configuration enabled.\n\nOr use the object format configuration and specify the compressor in the `use` field. The remaining fields of the object will be used as compressor configuration options.\n\nThe default configuration can be overridden by specifying a configuration option.\nFor example, to allow the jpeg compressor to recognize new extension name and to set the quality of the png compressor.\n\n```js\npluginImageCompress([\n  // Options for @napi-rs/image `compressJpeg` method\n  { use: \"jpeg\", test: /\\.(?:jpg|jpeg|jpe)$/ },\n  // Options for @napi-rs/image `pngQuantize` method\n  { use: \"png\", minQuality: 50 },\n  // Options for @napi-rs/image `avif` method\n  { use: \"avif\", quality: 80 },\n  // Options for @napi-rs/image `webp` method\n  { use: \"webp\", quality: 80 },\n  // Options for svgo\n  { use: \"svg\", floatPrecision: 2 },\n  // No options yet\n  { use: \"ico\" },\n]);\n```\n\nFor more information on compressors, please visit [@napi-rs/image](https://image.napi.rs/docs).\n\n## Lossless PNG\n\nThe default `png` compressor is lossy. If you want to replace it with a lossless compressor, you can use the following configuration.\n\n```js\npluginImageCompress([\"jpeg\", \"pngLossless\", \"ico\"]);\n```\n\nThe list of configuration options will eventually be converted to the corresponding bundler loader configuration, so compressors follow the same bottom-to-top matching rule.\n\nFor example, the `png` compressor will take precedence over the `pngLossless` compressor for the following configuration:\n\n```js\npluginImageCompress([\"jpeg\", \"pngLossless\", \"ico\", \"png\"]);\n```\n\n## Rspack Usage\n\nThe plugin is also compatible with Rspack.\n\nIf you are using Rspack instead of Rsbuild, you can import the `ImageMinimizerPlugin` from the package, use it in the [optimization.minimizer](https://rspack.rs/config/optimization#optimizationminimizer) array.\n\n```ts\n// rspack.config.mjs\nimport { ImageMinimizerPlugin } from \"@rsbuild/plugin-image-compress\";\nimport { defineConfig } from \"@rspack/cli\";\n\nexport default defineConfig({\n  mode: process.env.NODE_ENV === \"production\" ? \"production\" : \"development\",\n  optimization: {\n    minimizer: [\n      // Use `...` to preserve the default JS and CSS minimizers of Rspack\n      \"...\",\n      // Add the image minimizer plugins\n      new ImageMinimizerPlugin({\n        use: \"jpeg\",\n        test: /\\.(?:jpg|jpeg)$/,\n      }),\n      new ImageMinimizerPlugin({\n        use: \"png\",\n        test: /\\.png$/,\n        maxQuality: 50,\n      }),\n      new ImageMinimizerPlugin({\n        use: \"avif\",\n        test: /\\.avif$/,\n        quality: 80,\n      }),\n      new ImageMinimizerPlugin({\n        use: \"webp\",\n        test: /\\.webp$/,\n        quality: 80,\n      }),\n      new ImageMinimizerPlugin({\n        use: \"svg\",\n        test: /\\.svg$/,\n        floatPrecision: 2,\n      }),\n      new ImageMinimizerPlugin({\n        use: \"ico\",\n        test: /\\.(?:ico|icon)$/,\n      }),\n    ],\n  },\n});\n```\n\n## License\n\n[MIT](./LICENSE).\n","funding_links":[],"categories":["Plugins"],"sub_categories":["Rsbuild Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstackjs%2Frsbuild-plugin-image-compress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frstackjs%2Frsbuild-plugin-image-compress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstackjs%2Frsbuild-plugin-image-compress/lists"}