feat: implement optimizevtex img option

deco-cx · Feb 25, 2025 · 864dac1 · 864dac1
1 parent fdc26a5
commit 864dac1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/website/components/Image.tsx b/website/components/Image.tsx
@@ -23,6 +23,8 @@ export type Props =
     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 @@ interface OptimizationOptions {
   height?: number;
   factor: number;
   fit: FitOptions;
+  optimizeVtex?: "auto" | "manual";
 }
 
 const optmizeVNDA = (opts: OptimizationOptions) => {
@@ -102,7 +105,8 @@ export const getOptimizedMediaUrl = (opts: OptimizationOptions) => {
     if (
       /(vteximg.com.br|vtexassets.com|myvtex.com)\/arquivos\/ids\/\d+/.test(
         originalSrc,
-      )
+      ) && 
+      opts.optimizeVtex !== "manual"
     ) {
       return optimizeVTEX(opts);
     }
@@ -133,6 +137,7 @@ export const getSrcSet = (
   width: number,
   height?: number,
   fit?: FitOptions,
+  optimizeVtex?: "auto" | "manual",
 ) => {
   const srcSet = [];
 
@@ -147,6 +152,7 @@ export const getSrcSet = (
       height: h,
       factor,
       fit: fit || "cover",
+      optimizeVtex,
     });
 
     if (src) {
@@ -158,15 +164,15 @@ export const getSrcSet = (
 };
 
 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,