Why this matters
The production reason.
Manual image tags usually miss a detail: responsive sizes, lazy loading, width and height, or modern format delivery.
next/image gives the browser predictable dimensions and lets the framework generate smaller assets for the device actually viewing the page.
The biggest win comes from writing accurate sizes, because that tells the browser which generated image is worth downloading.
Copy-ready example
import Image from "next/image";
export function ProductHero({ product }) {
return (
<Image
src={product.image}
alt={product.name}
width={1200}
height={800}
priority
sizes="(max-width: 768px) 100vw, 50vw"
className="h-auto w-full object-cover"
/>
);
}