feat: support for compressing avif images (#11)

Author: chenjiahan

src/shared/codecs.ts

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

src/types.ts

@@ -1,5 +1,6 @@
 import type { Buffer } from 'node:buffer';
 import type {
+  AvifConfig,
   JpegCompressOptions,
   PNGLosslessOptions,
   PngQuantOptions,
@@ -18,6 +19,7 @@ export interface CodecBaseOptions {
   pngLossless: PNGLosslessOptions;
   ico: Record<string, unknown>;
   svg: SvgoConfig;
+  avif: AvifConfig;
 }
 
 export interface BaseCompressOptions<T extends Codecs> {

test/assets/image.avif

@@ -26,17 +26,24 @@ test('should compress image with use plugin-image-compress', async () => {
     join(__dirname, 'dist/static/svg/mobile.svg'),
     'utf-8',
   );
+  const avif = readFileSync(
+    join(__dirname, 'dist/static/image/image.avif'),
+    '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 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);
+  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'])],
+  plugins: [pluginImageCompress(['jpeg', 'png', 'ico', 'svg', 'avif'])],
   output: {
     filename: {
       svg: '[name][ext]',

test/basic/rsbuild.config.ts

@@ -1,9 +1,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 imageSvg from '../../assets/mobile.svg?url';
 
-const images = [imageIco, imagePng, imageJpeg, imageSvg];
+const images = [imageIco, imagePng, imageJpeg, imageSvg, imageAvif];
 
 for (const image of images) {
   const el = new Image();