Img Sizes

components/product/ProductCard/ProductCard.tsx

@@ -14,6 +14,7 @@ interface Props {
   imgWidth: number | string
   imgHeight: number | string
   priority?: boolean
+  imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
 }
 
 const ProductCard: FC<Props> = ({
@@ -22,6 +23,7 @@ const ProductCard: FC<Props> = ({
   variant,
   imgWidth,
   imgHeight,
+  imgLayout = 'responsive',
   priority,
 }) => {
   const src = p.images.edges?.[0]?.node?.urlOriginal!
@@ -50,6 +52,7 @@ const ProductCard: FC<Props> = ({
               height={imgHeight}
               priority={priority}
               quality="85"
+              layout={imgLayout}
             />
           </div>
         ) : (

components/ui/Marquee/Marquee.module.css

@@ -8,7 +8,7 @@
 
   & > * {
     @apply flex-1 px-16 py-4;
-    width: 450px;
+    width: 430px;
   }
 }
 

next.config.js

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

pages/index.tsx

@@ -97,6 +97,7 @@ export default function Home({
             variant="slim"
             imgWidth={320}
             imgHeight={320}
+            imgLayout="fixed"
           />
         ))}
       </Marquee>
@@ -129,6 +130,7 @@ export default function Home({
             variant="slim"
             imgWidth={320}
             imgHeight={320}
+            imgLayout="fixed"
           />
         ))}
       </Marquee>