https://github.com/rspack-contrib/rsbuild-plugin-image-compress

An Rsbuild plugin to compress images
https://github.com/rspack-contrib/rsbuild-plugin-image-compress

rsbuild rsbuild-plugin rspack

Last synced: about 12 hours ago
JSON representation

An Rsbuild plugin to compress images

• Host: GitHub
• URL: https://github.com/rspack-contrib/rsbuild-plugin-image-compress
• Owner: rspack-contrib
• License: mit
• Created: 2024-07-12T09:16:16.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-11-01T02:20:33.000Z (11 days ago)
• Last Synced: 2024-11-09T21:44:18.959Z (2 days ago)
• Topics: rsbuild, rsbuild-plugin, rspack
• Language: TypeScript
• Homepage:
• Size: 551 KB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-rspack - @rsbuild/plugin-image-compress

README

        
# @rsbuild/plugin-image-compress

An 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).

With 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.



  

   

  

  



## Usage

Install:

```bash

npm add @rsbuild/plugin-image-compress -D

```

Add plugin to your `rsbuild.config.ts`:

```ts

// rsbuild.config.ts

import { pluginImageCompress } from "@rsbuild/plugin-image-compress";

export default {

  plugins: [pluginImageCompress()],

};

```

## Options

The 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.

Or 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.

By default, the plugin will enable `jpeg`, `png`, `ico` image compressors, which are equivalent to the following two examples:

```js

pluginImageCompress(["jpeg", "png", "ico"]);

```

```js

pluginImageCompress([{ use: "jpeg" }, { use: "png" }, { use: "ico" }]);

```

The default configuration can be overridden by specifying a configuration option.

For example, to allow the jpeg compressor to recognize new extension name and to set the quality of the png compressor.

```js

pluginImageCompress([

  { use: "jpeg", test: /\.(?:jpg|jpeg|jpe)$/ },

  { use: "png", minQuality: 50 },

  "ico",

]);

```

The default `png` compressor is lossy.

If you want to replace it with a lossless compressor, you can use the following configuration.

```js

pluginImageCompress(["jpeg", "pngLossless", "ico"]);

```

The list of configuration options will eventually be converted to the corresponding bundler loader configuration, so compressors follow the same bottom-to-top matching rule.

For example, the `png` compressor will take precedence over the `pngLossless` compressor for the following configuration:

```js

pluginImageCompress(["jpeg", "pngLossless", "ico", "png"]);

```

For more information on compressors, please visit [@napi-rs/image](https://image.napi.rs/docs).

## License

[MIT](./LICENSE).