Real World Example

Fashion sites like Myntra and Ajio show tall product photos in a grid. Images are the heaviest part of these pages, so sizes and lazy loading make a big difference on mobile data.

import Image from 'next/image';
import Link from 'next/link';

type Props = { id: number; slug: string; name: string; price: number; imageUrl: string; index: number };

export default function ProductTile({ slug, name, price, imageUrl, index }: Props) {
  return (
    <Link href={'/products/' + slug} className="block">
      <div className="relative aspect-[3/4] overflow-hidden rounded-lg bg-gray-100">
        <Image
          src={imageUrl}
          alt={name}
          fill
          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
          className="object-cover"
          priority={index < 2} // first row is above the fold
        />
      </div>
      <p className="mt-2 text-sm line-clamp-1">{name}</p>
      <p className="font-semibold">₹{price}</p>
    </Link>
  );
}