An Rsbuild plugin to compress images via @napi-rs/image and 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.
Install:
npm add @rsbuild/plugin-image-compress -D
Add plugin to your rsbuild.config.ts
:
// rsbuild.config.ts
import { pluginImageCompress } from "@rsbuild/plugin-image-compress";
export default {
plugins: [pluginImageCompress()],
};
By default, the plugin will enable jpeg
, png
, ico
image compressors, which are equivalent to the following two examples:
pluginImageCompress(["jpeg", "png", "ico"]);
pluginImageCompress([{ use: "jpeg" }, { use: "png" }, { use: "ico" }]);
The plugin supports the following compressors:
-
jpeg
: For JPEG images. -
png
: For PNG images. -
pngLossless
: For PNG images with lossless compression. -
ico
: For ICO images. -
svg
: For SVG images. -
avif
: For AVIF images.
Only SVG are compressed by svgo
, other compressors are compressed by @napi-rs/image
.
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.
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.
pluginImageCompress([
// Options for @napi-rs/image `compressJpeg` method
{ use: "jpeg", test: /\.(?:jpg|jpeg|jpe)$/ },
// Options for @napi-rs/image `pngQuantize` method
{ use: "png", minQuality: 50 },
// Options for @napi-rs/image `avif` method
{ use: "avif", quality: 80 },
// Options for svgo
{ use: 'svg', floatPrecision: 2 }
// No options yet
{ use: "ico" },
]);
For more information on compressors, please visit @napi-rs/image.
The default png
compressor is lossy. If you want to replace it with a lossless compressor, you can use the following configuration.
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:
pluginImageCompress(["jpeg", "pngLossless", "ico", "png"]);
MIT.