Add param to webp option

Author: 11bit

src/options/webpOptions.ts

@@ -7,14 +7,25 @@ const correctOptions = {
   lossless: true,
 };
 
+const correctPresets = {
+  default: true,
+  photo: true,
+  picture: true,
+  drawing: true,
+  icon: true,
+  text: true,
+};
+
 const getOpt = (options: WebpOptionsPartial): WebpOptions | undefined =>
   options.webp_options || options.webpo;
 
 const test = (options: WebpOptionsPartial): boolean => Boolean(getOpt(options));
 
 const build = (options: WebpOptionsPartial): string => {
   const webpOptions = getOpt(options);
-  let compression: string, smart_subsample: boolean | undefined;
+  let compression: string,
+    smart_subsample: boolean | undefined,
+    preset: string | undefined;
 
   guardIsUndef(webpOptions, "webp_options");
 
@@ -27,11 +38,26 @@ const build = (options: WebpOptionsPartial): string => {
       smart_subsample = webpOptions.smart_subsample;
       guardIsNotBool(smart_subsample, "webp_options.smart_subsample");
     }
+
+    if (webpOptions.preset !== undefined) {
+      preset = webpOptions.preset;
+      guardIsValidVal(correctPresets, preset, "webp_options.preset");
+    }
   }
 
   guardIsValidVal(correctOptions, compression, "webp_options");
 
-  return `webpo:${compression}${smart_subsample !== undefined ? `:${smart_subsample}` : ""}`;
+  let result = `webpo:${compression}`;
+
+  if (smart_subsample !== undefined || preset !== undefined) {
+    result += `:${smart_subsample !== undefined ? smart_subsample : ""}`;
+  }
+
+  if (preset !== undefined) {
+    result += `:${preset}`;
+  }
+
+  return result;
 };
 
 export { test, build };

src/types/webpOptions.ts

@@ -14,6 +14,23 @@
  */
 type WebPCompressionOptions = "lossy" | "near_lossless" | "lossless";
 
+/**
+ * Available WebP preset values:
+ * - `"default"` - A general-purpose preset (default setting)
+ * - `"photo"` - A digital picture, like a portrait or indoor shot
+ * - `"picture"` - An outdoor photograph with natural lighting
+ * - `"drawing"` - A hand or line drawing with high-contrast details
+ * - `"icon"` - A small-sized colorful image
+ * - `"text"` - A text image with large areas of uniform color
+ */
+type WebPPresetOptions =
+  | "default"
+  | "photo"
+  | "picture"
+  | "drawing"
+  | "icon"
+  | "text";
+
 /**
  * *WEBP options*. **PRO feature**
  *
@@ -31,6 +48,10 @@ type WebpOptions =
        * when `true`, enables smart subsampling. Smart subsampling increases the resulting file size and compression time but improves quality. Default: `false`
        */
       smart_subsample?: boolean;
+      /**
+       * A hint to the encoder about the type of image being compressed. This helps optimize WebP compression based on the specific type of image being processed.
+       */
+      preset?: WebPPresetOptions;
     };
 
 /**

tests/optionsBasic/webpOptions.test.ts

@@ -58,5 +58,40 @@ describe("webpOptions", () => {
         })
       ).toEqual("webpo:lossy:false");
     });
+
+    it("should support `preset` option", () => {
+      expect(
+        build({ webp_options: { compression: "lossy", preset: "photo" } })
+      ).toEqual("webpo:lossy::photo");
+
+      expect(
+        build({
+          webp_options: {
+            compression: "lossy",
+            smart_subsample: true,
+            preset: "picture",
+          },
+        })
+      ).toEqual("webpo:lossy:true:picture");
+
+      expect(
+        build({
+          webp_options: {
+            compression: "lossless",
+            smart_subsample: false,
+            preset: "drawing",
+          },
+        })
+      ).toEqual("webpo:lossless:false:drawing");
+    });
+
+    it("should throw an error if preset is invalid", () => {
+      expect(() =>
+        // @ts-expect-error: Let's ignore an error (check for users with vanilla js).
+        build({ webp_options: { compression: "lossy", preset: "invalid" } })
+      ).toThrow(
+        "webp_options.preset is invalid. Valid values are: default, photo, picture, drawing, icon, text"
+      );
+    });
   });
 });