feat: add support for webp image format (#25)

* feat: webp support

* doc: updates README.md with webp

Author: hirako2000

README.md

@@ -55,6 +55,7 @@ The plugin supports the following compressors:
 - `ico`: For ICO images.
 - `svg`: For SVG images.
 - `avif`: For AVIF images.
+- `webp`: For WEBP images.
 
 Only SVG are compressed by `svgo`, other compressors are compressed by `@napi-rs/image`.
 
@@ -75,6 +76,8 @@ pluginImageCompress([
   { use: "png", minQuality: 50 },
   // Options for @napi-rs/image `avif` method
   { use: "avif", quality: 80 },
+  // Options for @napi-rs/image `webp` method
+  { use: "webp", quality: 80 },
   // Options for svgo
   { use: 'svg', floatPrecision: 2 }
   // No options yet
@@ -132,6 +135,11 @@ export default defineConfig({
         test: /\.avif$/,
         quality: 80,
       }),
+      new ImageMinimizerPlugin({
+        use: "webp",
+        test: /\.webp$/,
+        quality: 80,
+      }),
       new ImageMinimizerPlugin({
         use: "svg",
         test: /\.svg$/,

src/shared/codecs.ts

@@ -53,6 +53,15 @@ export const avifCodec: Codec<'avif'> = {
   },
 };
 
+export const webpCodec: Codec<'webp'> = {
+  async handler(buf, options) {
+    return new Transformer(buf).webp(options.quality, options.signal);
+  },
+  defaultOptions: {
+    test: /\.webp$/,
+  },
+};
+
 export const svgCodec: Codec<'svg'> = {
   async handler(buf, options) {
     const result = svgo.optimize(buf.toString(), options);
@@ -71,6 +80,7 @@ const codecs: Record<Codecs, Codec<any>> = {
   ico: icoCodec,
   svg: svgCodec,
   avif: avifCodec,
+  webp: webpCodec,
 };
 
 export default codecs;

src/types.ts

@@ -11,6 +11,7 @@ export type OneOrMany<T> = T | T[];
 
 export interface WebpTransformOptions {
   quality?: number;
+  signal?: AbortSignal;
 }
 
 export interface CodecBaseOptions {
@@ -20,6 +21,7 @@ export interface CodecBaseOptions {
   ico: Record<string, unknown>;
   svg: SvgoConfig;
   avif: AvifConfig;
+  webp: WebpTransformOptions;
 }
 
 export interface BaseCompressOptions<T extends Codecs> {

test/assets/image.webp

@@ -30,19 +30,29 @@ test('should compress image with use plugin-image-compress', async () => {
     join(__dirname, 'dist/static/image/image.avif'),
     'utf-8',
   );
+
+  const webp = readFileSync(
+    join(__dirname, 'dist/static/image/image.webp'),
+    'utf-8',
+  );
+
   // const ico = names.find((item) => item.endsWith('.ico'))!;
 
   const assetsDir = join(__dirname, '../assets');
   const originJpeg = readFileSync(join(assetsDir, 'image.jpeg'), 'utf-8');
   const originPng = readFileSync(join(assetsDir, 'image.png'), 'utf-8');
   const originSvg = readFileSync(join(assetsDir, 'mobile.svg'), 'utf-8');
   const originAvif = readFileSync(join(assetsDir, 'image.avif'), 'utf-8');
+  const originWebp = readFileSync(join(assetsDir, 'image.webp'), 'utf-8');
+
   // const originIco = readFileSync(join(assetsDir, 'image.ico'), 'utf-8');
 
   expect(jpeg.length).toBeLessThan(originJpeg.length);
   expect(png.length).toBeLessThan(originPng.length);
   expect(svg.length).toBeLessThan(originSvg.length);
   expect(avif.length).toBeLessThan(originAvif.length);
+  expect(webp.length).toBeLessThan(originWebp.length);
+
   console.log(avif.length, originAvif.length);
   // TODO ico file size is not less than origin
   // expect(outputs[ico].length).toBeLessThan(originIco.length);

test/basic/index.test.ts

@@ -2,7 +2,7 @@ import { defineConfig } from '@rsbuild/core';
 import { pluginImageCompress } from '@rsbuild/plugin-image-compress';
 
 export default defineConfig({
-  plugins: [pluginImageCompress(['jpeg', 'png', 'ico', 'svg', 'avif'])],
+  plugins: [pluginImageCompress(['jpeg', 'png', 'ico', 'svg', 'avif', 'webp'])],
   output: {
     filename: {
       svg: '[name][ext]',

test/basic/rsbuild.config.ts

@@ -2,9 +2,10 @@ import imageAvif from '../../assets/image.avif?url';
 import imageIco from '../../assets/image.ico?url';
 import imageJpeg from '../../assets/image.jpeg?url';
 import imagePng from '../../assets/image.png?url';
+import imageWebp from '../../assets/image.webp?url';
 import imageSvg from '../../assets/mobile.svg?url';
 
-const images = [imageIco, imagePng, imageJpeg, imageSvg, imageAvif];
+const images = [imageIco, imagePng, imageJpeg, imageSvg, imageAvif, imageWebp];
 
 for (const image of images) {
   const el = new Image();