Image Optimization: Next.js Image vs Sanity CDN

Image Optimization: Next.js Image vs Sanity CDN

Both offer image optimization. Here's when to use each.

Next.js Image Component

Pros: Automatic lazy loading, responsive sizes, format conversion (WebP/AVIF)

Cons: Requires width/height or fill, can be tricky with dynamic images

Sanity Image Pipeline

Pros: URL-based transformations, hotspot/crop from CMS, no build step

Cons: Additional CDN requests, separate from your app's optimization

My Approach

Use Sanity's pipeline for CMS images (leverage hotspot data). Use Next.js Image for static assets and when you need fine control over loading behavior.