Feat: implement optimize vtex image option

website/components/Image.tsx

@@ -23,6 +23,8 @@
     fetchPriority?: "high" | "low" | "auto";
     /** @description Object-fit */
     fit?: FitOptions;
+    /** @description Controls whether VTEX images should be optimized */
+    optimizeVtex?: "auto" | "manual";
   };
 
 const FACTORS = [1, 2];
@@ -41,6 +43,7 @@
   height?: number;
   factor: number;
   fit: FitOptions;
+  optimizeVtex?: "auto" | "manual";
 }
 
 const optmizeVNDA = (opts: OptimizationOptions) => {
@@ -102,7 +105,8 @@
     if (
       /(vteximg.com.br|vtexassets.com|myvtex.com)\/arquivos\/ids\/\d+/.test(
         originalSrc,
-      )
+      ) && 
+      opts.optimizeVtex !== "manual"
     ) {
       return optimizeVTEX(opts);
     }
@@ -133,6 +137,7 @@
   width: number,
   height?: number,
   fit?: FitOptions,
+  optimizeVtex?: "auto" | "manual",
 ) => {
   const srcSet = [];
 
@@ -147,6 +152,7 @@
       height: h,
       factor,
       fit: fit || "cover",
+      optimizeVtex,
     });
 
     if (src) {
@@ -158,15 +164,15 @@
 };
 
 const Image = forwardRef<HTMLImageElement, Props>((props, ref) => {
-  const { preload, loading = "lazy" } = props;
+  const { preload, loading = "lazy", optimizeVtex = "auto" } = props;
 
   if (!props.height) {
     console.warn(
       `Missing height. This image will NOT be optimized: ${props.src}`,
     );
   }
 
-  const srcSet = getSrcSet(props.src, props.width, props.height, props.fit);
+  const srcSet = getSrcSet(props.src, props.width, props.height, props.fit, optimizeVtex);
   const linkProps = srcSet && {
     imagesrcset: srcSet,
     imagesizes: props.sizes,
@@ -189,7 +195,7 @@
         srcSet={srcSet}
         loading={loading}
         ref={ref}
       />
     </>
   );
 });