Reduce loading size of product images

LrDevEng · Oct 16, 2024 · e2aee05 · e2aee05
1 parent b0492be
commit e2aee05
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/app/(main)/cart/page.tsx b/app/(main)/cart/page.tsx
@@ -69,8 +69,8 @@ export default async function CartPage() {
                       className={styles.productImage}
                       src={`/images/${productDb.imgName}`}
                       alt={`Image of ${productDb.name}`}
-                      width={600}
-                      height={400}
+                      width={300}
+                      height={200}
                       style={{ backgroundColor: 'gray' }}
                     />
                   </div>

diff --git a/app/(shop)/shop/ProductCardSmall.module.css b/app/(shop)/shop/ProductCardSmall.module.css
@@ -20,8 +20,8 @@
     margin: auto;
     width: 100%;
     max-width: 300px;
-    max-height: 200px;
     height: auto;
+    max-height: 200px;
   }
 
   &:hover {

diff --git a/app/(shop)/shop/ProductCardSmall.tsx b/app/(shop)/shop/ProductCardSmall.tsx
@@ -20,8 +20,8 @@ export default function ProductCardSmall({ product }: Props) {
         className={styles.productImage}
         src={`/images/${product.imgName}`}
         alt={`Image of ${product.name}`}
-        width={600}
-        height={400}
+        width={300}
+        height={200}
         style={{ backgroundColor: 'gray' }}
         data-test-id="product-image"
       />

diff --git a/app/(shop)/shop/product/[productId]/ProductCardBig.tsx b/app/(shop)/shop/product/[productId]/ProductCardBig.tsx
@@ -25,8 +25,8 @@ export default function ProductCardBig({ product }: Props) {
           <Image
             src={`/images/${product.imgName}`}
             alt={`Image of ${product.name}`}
-            width={600}
-            height={400}
+            width={300}
+            height={200}
             className={styles.img}
             data-test-id="product-image"
           />