Min images

components/product/ProductCard/ProductCard.module.css

@@ -125,15 +125,11 @@
 }
 
 .imageContainer {
-  & > div {
+  overflow: hidden;
-    & > div {
+  @apply flex items-center justify-center;
-      height: 100%;
-      margin: 0 auto;
-    }
-  }
 }
 
-.product-image {
+.image {
-  height: 120% !important;
+  object-fit: cover;
-  top: -10% !important;
+  transform: scale(1.2);
 }

components/product/ProductCard/ProductCard.tsx

@@ -51,8 +51,8 @@ const ProductCard: FC<Props> = ({
               width={imgWidth}
               height={imgHeight}
               priority={priority}
-              quality="85"
               layout={imgLayout}
+              quality="85"
             />
           </div>
         ) : (
@@ -73,8 +73,8 @@ const ProductCard: FC<Props> = ({
             </div>
             <div className={s.imageContainer}>
               <Image
+                className={s.image}
                 alt={p.name}
-                className={cn('w-full object-cover', s['product-image'])}
                 src={src}
                 width={imgWidth}
                 height={imgHeight}

next.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   images: {
-    imagesSizes: [320, 480, 820, 1200, 1600],
+    imagesSizes: [320, 480, 820, 1280],
     domains: ['cdn11.bigcommerce.com'],
   },
   i18n: {

pages/index.tsx

@@ -91,8 +91,8 @@ export default function Home({
             key={node.path}
             product={node}
             // The first image is the largest one in the grid
-            imgWidth={i === 0 ? 1280 : 820}
+            imgWidth={i === 0 ? 1080 : 540}
-            imgHeight={i === 0 ? 1280 : 820}
+            imgHeight={i === 0 ? 1080 : 540}
             priority
           />
         ))}
@@ -125,8 +125,8 @@ export default function Home({
             key={node.path}
             product={node}
             // The second image is the largest one in the grid
-            imgWidth={i === 1 ? 1280 : 820}
+            imgWidth={i === 1 ? 1080 : 540}
-            imgHeight={i === 1 ? 1280 : 820}
+            imgHeight={i === 1 ? 1080 : 540}
           />
         ))}
       </Grid>