Updated Image Component implementation

components/cart/CartItem/CartItem.tsx

@@ -4,7 +4,6 @@ import { Trash, Plus, Minus } from '@components/icon'
 import usePrice from '@lib/bigcommerce/use-price'
 import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
 import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
-import getPathname from '@lib/get-pathname'
 import s from './CartItem.module.css'
 
 const CartItem = ({
@@ -58,7 +57,13 @@ const CartItem = ({
   return (
     <li className="flex flex-row space-x-8 py-6">
       <div className="w-12 h-12 bg-violet relative overflow-hidden">
-        <Image src={getPathname(item.image_url)} width={60} height={60} />
+        <Image
+          src={item.image_url}
+          width={60}
+          height={60}
+          // The cart item image is already optimized and very small in size
+          unoptimized
+        />
       </div>
       <div className="flex-1 flex flex-col justify-between text-base">
         <span className="font-bold mb-3">{item.name}</span>

components/product/ProductCard/ProductCard.tsx

@@ -3,7 +3,6 @@ import cn from 'classnames'
 import Image from 'next/image'
 import Link from 'next/link'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
-import getPathname from '@lib/get-pathname'
 import { Heart } from '@components/icon'
 import s from './ProductCard.module.css'
 
@@ -25,7 +24,7 @@ const ProductCard: FC<Props> = ({
   imgHeight,
   priority,
 }) => {
-  const src = getPathname(p.images.edges?.[0]?.node.urlOriginal!)
+  const src = p.images.edges?.[0]?.node.urlOriginal!
 
   if (variant === 'slim') {
     return (
@@ -40,6 +39,7 @@ const ProductCard: FC<Props> = ({
           width={imgWidth}
           height={imgHeight}
           priority={priority}
+          quality="90"
         />
       </div>
     )
@@ -69,6 +69,7 @@ const ProductCard: FC<Props> = ({
             width={imgWidth}
             height={imgHeight}
             priority={priority}
+            quality="90"
           />
         </div>
       </a>

components/product/ProductView/ProductView.tsx

@@ -6,12 +6,10 @@ import { FC, useState, useEffect } from 'react'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
-import getPathname from '@lib/get-pathname'
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import { isDesktop } from '@lib/browser'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import { getProductOptions } from '../helpers'
-import bcImageSrc from '@lib/bc-image-src'
 
 interface Props {
   className?: string
@@ -60,10 +58,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
           description: product.description,
           images: [
             {
-              url: bcImageSrc({
-                src: getPathname(product.images.edges?.[0]?.node.urlOriginal!),
-                width: 1200,
-              }),
+              url: product.images.edges?.[0]?.node.urlOriginal!,
               width: 800,
               height: 600,
               alt: product.name,
@@ -84,14 +79,14 @@ const ProductView: FC<Props> = ({ product, className }) => {
 
           <div className={s.sliderContainer}>
             <ProductSlider>
-              {/** TODO: Change with Image Component  **/}
               {product.images.edges?.map((image, i) => (
                 <Image
                   key={image?.node.urlOriginal}
-                  src={getPathname(image?.node.urlOriginal!)}
+                  src={image?.node.urlOriginal!}
                   width={1200}
                   height={1200}
                   priority={i === 0}
+                  quality="90"
                 />
               ))}
             </ProductSlider>