From 9c813577e1deaf69166ef96fc72e24c4bd98ca04 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Wed, 2 Aug 2023 21:07:35 -0500
Subject: [PATCH] Optimizes image sizes (#1140)

---
 app/product/[handle]/page.tsx            | 31 ++++++++--------
 components/carousel.tsx                  | 35 +++++++++---------
 components/cart/modal.tsx                |  4 +-
 components/grid/three-items.tsx          | 12 +++---
 components/layout/product-grid-items.tsx |  6 +--
 components/product/gallery.tsx           | 47 ++++++++++++------------
 6 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
index 815078b56..d59423364 100644
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -82,8 +82,8 @@ export default async function ProductPage({ params }: { params: { handle: string
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
-          <div className="lg:col-span-4">
+        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row">
+          <div className="h-full w-full basis-full lg:basis-4/6">
             <Gallery
               images={product.images.map((image: Image) => ({
                 src: image.url,
@@ -92,7 +92,7 @@ export default async function ProductPage({ params }: { params: { handle: string
             />
           </div>
 
-          <div className="py-6 pr-8 md:pr-12 lg:col-span-2">
+          <div className="basis-full lg:basis-2/6">
             <ProductDescription product={product} />
           </div>
         </div>
@@ -115,14 +115,13 @@ async function RelatedProducts({ id }: { id: string }) {
   return (
     <div className="py-8">
       <h2 className="mb-4 text-2xl font-bold">Related Products</h2>
-      <div className="flex w-full gap-4 overflow-x-auto pt-1">
-        {relatedProducts.map((product, i) => {
-          return (
-            <Link
-              key={i}
-              className="w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
-              href={`/product/${product.handle}`}
-            >
+      <ul className="flex w-full gap-4 overflow-x-auto pt-1">
+        {relatedProducts.map((product) => (
+          <li
+            key={product.handle}
+            className="aspect-square w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
+          >
+            <Link className="relative h-full w-full" href={`/product/${product.handle}`}>
               <GridTileImage
                 alt={product.title}
                 label={{
@@ -131,13 +130,13 @@ async function RelatedProducts({ id }: { id: string }) {
                   currencyCode: product.priceRange.maxVariantPrice.currencyCode
                 }}
                 src={product.featuredImage?.url}
-                width={600}
-                height={600}
+                fill
+                sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
               />
             </Link>
-          );
-        })}
-      </div>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }
diff --git a/components/carousel.tsx b/components/carousel.tsx
index d67ba5deb..a4c58bd5d 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -10,27 +10,28 @@ export async function Carousel() {
 
   return (
     <div className=" w-full overflow-x-auto pb-6 pt-1">
-      <div className="flex animate-carousel gap-4">
+      <ul className="flex animate-carousel gap-4">
         {[...products, ...products].map((product, i) => (
-          <Link
+          <li
             key={`${product.handle}${i}`}
-            href={`/product/${product.handle}`}
-            className="h-[30vh] w-2/3 flex-none md:w-1/3"
+            className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"
           >
-            <GridTileImage
-              alt={product.title}
-              label={{
-                title: product.title,
-                amount: product.priceRange.maxVariantPrice.amount,
-                currencyCode: product.priceRange.maxVariantPrice.currencyCode
-              }}
-              src={product.featuredImage?.url}
-              width={600}
-              height={600}
-            />
-          </Link>
+            <Link href={`/product/${product.handle}`} className="relative h-full w-full">
+              <GridTileImage
+                alt={product.title}
+                label={{
+                  title: product.title,
+                  amount: product.priceRange.maxVariantPrice.amount,
+                  currencyCode: product.priceRange.maxVariantPrice.currencyCode
+                }}
+                src={product.featuredImage?.url}
+                fill
+                sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
+              />
+            </Link>
+          </li>
         ))}
-      </div>
+      </ul>
     </div>
   );
 }
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index a6b45b9ae..4fbfcc6ad 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -111,7 +111,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                             >
                               <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
                                 <Image
-                                  className="h-full w-full object-cover "
+                                  className="h-full w-full object-cover"
                                   width={64}
                                   height={64}
                                   alt={
@@ -141,7 +141,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                               />
                               <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
                                 <EditItemQuantityButton item={item} type="minus" />
-                                <p className="w-6 text-center ">
+                                <p className="w-6 text-center">
                                   <span className="w-full text-sm">{item.quantity}</span>
                                 </p>
                                 <EditItemQuantityButton item={item} type="plus" />
diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index 4a680fc36..abb379e5c 100644
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@@ -6,13 +6,15 @@ import Link from 'next/link';
 function ThreeItemGridItem({ item, size }: { item: Product; size: 'full' | 'half' }) {
   return (
     <div
-      className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'}
+      className={size === 'full' ? 'md:col-span-4 md:row-span-2' : 'md:col-span-2 md:row-span-1'}
     >
-      <Link className="block h-full" href={`/product/${item.handle}`}>
+      <Link className="relative block aspect-square h-full w-full" href={`/product/${item.handle}`}>
         <GridTileImage
           src={item.featuredImage.url}
-          width={size === 'full' ? 1080 : 540}
-          height={size === 'full' ? 1080 : 540}
+          fill
+          sizes={
+            size === 'full' ? '(min-width: 768px) 66vw, 100vw' : '(min-width: 768px) 33vw, 100vw'
+          }
           priority={true}
           alt={item.title}
           label={{
@@ -38,7 +40,7 @@ export async function ThreeItemGrid() {
   const [firstProduct, secondProduct, thirdProduct] = homepageItems;
 
   return (
-    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 lg:grid-cols-6 lg:grid-rows-2">
+    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2">
       <ThreeItemGridItem size="full" item={firstProduct} />
       <ThreeItemGridItem size="half" item={secondProduct} />
       <ThreeItemGridItem size="half" item={thirdProduct} />
diff --git a/components/layout/product-grid-items.tsx b/components/layout/product-grid-items.tsx
index d9060adbb..ea8a5ebf7 100644
--- a/components/layout/product-grid-items.tsx
+++ b/components/layout/product-grid-items.tsx
@@ -8,7 +8,7 @@ export default function ProductGridItems({ products }: { products: Product[] })
     <>
       {products.map((product) => (
         <Grid.Item key={product.handle} className="animate-fadeIn">
-          <Link className="inline-block h-full w-full" href={`/product/${product.handle}`}>
+          <Link className="relative inline-block h-full w-full" href={`/product/${product.handle}`}>
             <GridTileImage
               alt={product.title}
               label={{
@@ -17,8 +17,8 @@ export default function ProductGridItems({ products }: { products: Product[] })
                 currencyCode: product.priceRange.maxVariantPrice.currencyCode
               }}
               src={product.featuredImage?.url}
-              width={600}
-              height={600}
+              fill
+              sizes="(min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
             />
           </Link>
         </Grid.Item>
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index 99742a917..d1f567aef 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -27,13 +27,13 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
     'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center';
 
   return (
-    <div className="mr-8 h-full">
-      <div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
+    <>
+      <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
         {images[imageIndex] && (
           <Image
-            className="relative h-full w-full object-contain"
-            height={600}
-            width={600}
+            className="h-full w-full object-contain"
+            fill
+            sizes="(min-width: 1024px) 66vw, 100vw"
             alt={images[imageIndex]?.altText as string}
             src={images[imageIndex]?.src as string}
             priority={true}
@@ -60,7 +60,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
       </div>
 
       {images.length > 1 ? (
-        <div className="flex items-center justify-center gap-2 overflow-auto py-1">
+        <ul className="my-12 flex items-center justify-center gap-2 overflow-auto py-1 lg:mb-0">
           {images.map((image, index) => {
             const isActive = index === imageIndex;
             const imageSearchParams = new URLSearchParams(searchParams.toString());
@@ -68,25 +68,26 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
             imageSearchParams.set('image', index.toString());
 
             return (
-              <Link
-                aria-label="Enlarge product image"
-                key={image.src}
-                className="h-auto w-20"
-                href={createUrl(pathname, imageSearchParams)}
-                scroll={false}
-              >
-                <GridTileImage
-                  alt={image.altText}
-                  src={image.src}
-                  width={600}
-                  height={600}
-                  active={isActive}
-                />
-              </Link>
+              <li key={image.src} className="h-auto w-20">
+                <Link
+                  aria-label="Enlarge product image"
+                  href={createUrl(pathname, imageSearchParams)}
+                  scroll={false}
+                  className="h-full w-full"
+                >
+                  <GridTileImage
+                    alt={image.altText}
+                    src={image.src}
+                    width={80}
+                    height={80}
+                    active={isActive}
+                  />
+                </Link>
+              </li>
             );
           })}
-        </div>
+        </ul>
       ) : null}
-    </div>
+    </>
   );
 }