Optimizes image sizes (#1140)

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="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="lg:col-span-4">
+          <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">
+      <ul className="flex w-full gap-4 overflow-x-auto pt-1">
-        {relatedProducts.map((product, i) => {
+        {relatedProducts.map((product) => (
-          return (
+          <li
-            <Link
+            key={product.handle}
-              key={i}
+            className="aspect-square w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
-              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}`}
           >
+            <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}
+                fill
-                height={600}
+                sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
               />
             </Link>
-          );
+          </li>
-        })}
+        ))}
-      </div>
+      </ul>
     </div>
   );
 }

components/carousel.tsx

@@ -10,13 +10,13 @@ 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="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"
-            className="h-[30vh] w-2/3 flex-none md:w-1/3"
           >
+            <Link href={`/product/${product.handle}`} className="relative h-full w-full">
               <GridTileImage
                 alt={product.title}
                 label={{
@@ -25,12 +25,13 @@ export async function Carousel() {
                   currencyCode: product.priceRange.maxVariantPrice.currencyCode
                 }}
                 src={product.featuredImage?.url}
-              width={600}
+                fill
-              height={600}
+                sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
               />
             </Link>
+          </li>
         ))}
-      </div>
+      </ul>
     </div>
   );
 }

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}
+          fill
-          height={size === 'full' ? 1080 : 540}
+          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} />

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}
+              fill
-              height={600}
+              sizes="(min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
             />
           </Link>
         </Grid.Item>

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"
+            className="h-full w-full object-contain"
-            height={600}
+            fill
-            width={600}
+            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 (
+              <li key={image.src} className="h-auto w-20">
                 <Link
                   aria-label="Enlarge product image"
-                key={image.src}
-                className="h-auto w-20"
                   href={createUrl(pathname, imageSearchParams)}
                   scroll={false}
+                  className="h-full w-full"
                 >
                   <GridTileImage
                     alt={image.altText}
                     src={image.src}
-                  width={600}
+                    width={80}
-                  height={600}
+                    height={80}
                     active={isActive}
                   />
                 </Link>
+              </li>
             );
           })}
-        </div>
+        </ul>
       ) : null}
-    </div>
+    </>
   );
 }