fix(image): added optional disable optimization

website/components/Image.tsx

@@ -26,6 +26,8 @@ export type Props =
     fetchPriority?: "high" | "low" | "auto";
     /** @description Object-fit */
     fit?: FitOptions;
+    /** @description Disable image optimization */
+    disableims?: boolean;
     setEarlyHint?: SetEarlyHint;
   };
 
@@ -54,6 +56,7 @@ interface OptimizationOptions {
   height?: number;
   factor: number;
   fit: FitOptions;
+  disableims?: boolean;
 }
 
 const optmizeVNDA = (opts: OptimizationOptions) => {
@@ -102,7 +105,7 @@ const optimizeVTEX = (opts: OptimizationOptions) => {
 };
 
 export const getOptimizedMediaUrl = (opts: OptimizationOptions) => {
-  const { originalSrc, width, height, fit } = opts;
+  const { originalSrc, width, height, fit, disableims } = opts;
 
   if (originalSrc.startsWith("data:")) {
     return originalSrc;
@@ -142,6 +145,7 @@ export const getOptimizedMediaUrl = (opts: OptimizationOptions) => {
   params.set("fit", fit);
   params.set("width", `${width}`);
   height && params.set("height", `${height}`);
+  disableims && params.set("disableims", "true");
 
   if (isAzionAssetsEnabled()) {
     const imageSource = originalSrc
@@ -166,6 +170,7 @@ export const getSrcSet = (
   height?: number,
   fit?: FitOptions,
   factors: number[] = FACTORS,
+  disableims?: boolean,
 ) => {
   const srcSet = [];
 
@@ -180,6 +185,7 @@ export const getSrcSet = (
       height: h,
       factor,
       fit: fit || "cover",
+      disableims,
     });
 
     if (src) {
@@ -196,6 +202,7 @@ export const getEarlyHintFromSrcProps = (srcProps: {
   fit?: FitOptions;
   width: number;
   height?: number;
+  disableims?: boolean;
 }) => {
   const factor = FACTORS.at(-1)!;
   const src = getOptimizedMediaUrl({
@@ -204,6 +211,7 @@ export const getEarlyHintFromSrcProps = (srcProps: {
     height: srcProps.height && Math.trunc(srcProps.height * factor),
     fit: srcProps.fit || "cover",
     factor,
+    disableims: srcProps.disableims,
   });
   const earlyHintParts = [
     `<${src}>`,
@@ -235,6 +243,7 @@ const Image = forwardRef<HTMLImageElement, Props>((props, ref) => {
       props.height,
       props.fit,
       shouldSetEarlyHint ? FACTORS.slice(-1) : FACTORS,
+      props.disableims,
     );
 
   const linkProps = srcSet &&
@@ -260,6 +269,7 @@ const Image = forwardRef<HTMLImageElement, Props>((props, ref) => {
         height: props.height,
         fetchpriority: props.fetchPriority,
         src: props.src,
+        disableims: props.disableims,
       }),
     );
   }

website/components/Picture.tsx

@@ -12,10 +12,13 @@ import {
 
 interface Context {
   preload?: boolean;
+  /** @description Disable image optimization */
+  disableims?: boolean;
 }
 
 const Context = createContext<Context>({
   preload: false,
+  disableims: false,
 });
 
 type SourceProps =
@@ -30,12 +33,13 @@ type SourceProps =
     preload?: boolean;
     /** @description Improves Web Vitals (LCP). Use high for LCP image. Auto for other images */
     fetchPriority?: "high" | "low" | "auto";
+
     setEarlyHint?: SetEarlyHint;
   };
 
 export const Source = forwardRef<HTMLSourceElement, SourceProps>(
   (props, ref) => {
-    const { preload } = useContext(Context);
+    const { preload, disableims } = useContext(Context);
 
     const shouldSetEarlyHint = !!props.setEarlyHint && preload;
     const srcSet = getSrcSet(
@@ -44,6 +48,7 @@ export const Source = forwardRef<HTMLSourceElement, SourceProps>(
       props.height,
       undefined,
       shouldSetEarlyHint ? FACTORS.slice(-1) : FACTORS,
+      disableims,
     );
     const linkProps = {
       imagesrcset: srcSet,
@@ -64,6 +69,7 @@ export const Source = forwardRef<HTMLSourceElement, SourceProps>(
           height: props.height,
           fetchpriority: props.fetchPriority,
           src: props.src,
+          disableims,
         }),
       );
     }
@@ -96,11 +102,15 @@ export const Source = forwardRef<HTMLSourceElement, SourceProps>(
 type Props = Omit<JSX.IntrinsicElements["picture"], "preload"> & {
   children: ComponentChildren;
   preload?: boolean;
+  disableims?: boolean;
 };
 
 export const Picture = forwardRef<HTMLPictureElement, Props>(
-  ({ children, preload, ...props }, ref) => {
-    const value = useMemo(() => ({ preload }), [preload]);
+  ({ children, preload, disableims, ...props }, ref) => {
+    const value = useMemo(() => ({ preload, disableims }), [
+      preload,
+      disableims,
+    ]);
 
     return (
       <Context.Provider value={value}>

website/loaders/image.ts

@@ -21,7 +21,7 @@ function assert(expr: unknown, msg = ""): asserts expr {
 }
 
 const parseParams = (
-  { src, width, height, fit, quality }: Partial<Props>,
+  { src, width, height, fit, quality, disableims }: Partial<Props>,
 ): Props => {
   assert(src, "src is required");
   assert(width, "width is required");
@@ -33,6 +33,7 @@ const parseParams = (
     height: Number(height),
     quality: Number(quality) || undefined,
     fit: fit === "contain" ? "contain" : "cover",
+    disableims: disableims ? true : false,
   };
 };
 

website/utils/image/engine.ts

@@ -4,6 +4,7 @@ export interface Params {
   height: number;
   fit?: "cover" | "contain";
   quality?: number; // 0 - 100
+  disableims?: boolean;
 }
 
 export type Engine = {