Image optimization

`next/image` serves responsive sizes, modern formats when supported, and lazy loading by default. `priority` marks LCP candidates; `sizes` tells the browser which width to request; remote patterns restrict allowed hosts.

					import Image from 'next/image';

<Image src="/hero.jpg" alt="Product" width={1200} height={630} priority sizes="100vw" />
				

Misconfigured `sizes` wastes bandwidth; missing `priority` on the LCP image hurts Core Web Vitals.

On interviews: explain layout stability, CDN resizing, and when plain `img` is acceptable.

Common pitfalls: huge remote images without dimensions, lazy-loading above-the-fold heroes, and open remotePatterns in production.

The trade-off is automatic optimization versus build/runtime image pipeline complexity.

Checklist:

• Set width, height, or fill with known aspect.
• Use priority for LCP image only.
• Configure remotePatterns explicitly.
• Match sizes to real layout breakpoints.