rsbuild-plugin-image-process

A plugin for Rsbuild based on sharp, supporting image resizing, format conversion, quality adjustment, and more.

Usage

Install:

npm add rsbuild-plugin-image-process -D

Add plugin to your rsbuild.config.ts:

// rsbuild.config.ts
import { pluginImageProcess } from "rsbuild-plugin-image-process";

export default {
  plugins: [pluginImageProcess()],
};

Importing Images with Processing Parameters

You can pass processing parameters directly in the import statement:

import Image from './example.png?process-image=resize,w_100,h_100';

The query string after ?process-image= defines the processing steps and parameters.

Supported Operations & Parameters

resize

• Proportional resize:

  • p: Scale by percentage, [1,1000]. Less than 100 means shrink, greater than 100 means enlarge.
  • Example: resize,p_50 (shrink to 50% of original)

• Resize by width/height:

  • w: Target width [1,16384]
  • h: Target height [1,16384]
  • m: Resize mode
    • lfit (default): Proportional fit within target box
    • mfit: Proportional cover target box
    • fill: Proportional cover and center crop
    • pad: Proportional fit and pad with color
    • fixed: Force resize to exact width and height
  • l: Longest side [1,16384]
  • s: Shortest side [1,16384]
  • limit: If 1 (default), do not enlarge beyond original size; if 0, allow upscaling
  • color: Padding color for pad mode (RGB hex, e.g. FFFFFF)
  • Example: resize,w_300,h_200,m_pad,color_000000

format

• format: Output format, supports jpeg, png, webp. Unsupported formats default to webp.
• Example: format,webp

quality

• q or Q: Image quality, 1-100, default 100.
• Example: quality,q_80

Query Example

You can chain multiple operations:

process-image=resize,w_200,h_200/format,webp/quality,q_80

License

MIT.