Next.js Image Optimization: Speed Up Your Site with next/image

Why Image Optimization Matters

Images are the single largest contributor to page weight on most websites. Unoptimized images directly harm your Largest Contentful Paint (LCP) score, which is a core Google ranking signal. The Next.js next/image component solves this automatically — it serves WebP/AVIF formats, resizes images to the exact displayed size, and lazy-loads images below the fold.

The next/image Component Basics

Replace standard img tags with the Image component from next/image. You must always provide width and height props (or use fill for layout filling). Set priority={true} on your above-the-fold hero image to preload it. For responsive images, use the sizes prop to tell the browser which image size to download at each breakpoint.

Remote Images and Domains

To use images from external URLs, configure the remotePatterns array in next.config.js with the hostname and optional pathname pattern. This whitelist prevents your image optimization endpoint from being abused. For Cloudinary, Contentful, or S3-hosted images, add their domains to remotePatterns. The optimizer will still apply WebP conversion and resizing to remote images.

fill Layout and Responsive Images

The fill prop makes the image fill its parent container, which must have position: relative and a defined height. This is ideal for hero sections, thumbnails, and card images where the container size is defined by CSS, not the image. Combine fill with object-fit and object-position CSS properties to control how the image crops within its container.

Placeholder and Loading States

Next.js supports blurred placeholder images via placeholder='blur'. For local images, Next.js generates the blur data URL automatically at build time. For remote images, you must provide a blurDataURL string — typically a tiny base64-encoded JPEG. This prevents layout shift and gives users immediate visual feedback while the full image loads.

Measuring the Impact

After implementing next/image, measure your improvement with Lighthouse or PageSpeed Insights. Expect to see image format savings (WebP is 25-35% smaller than JPEG, AVIF is 50% smaller), size savings from serving correctly-dimensioned images, and improved LCP scores. Most projects I work on at abdur-razzak.site see a 30-50% reduction in total image bytes after switching to the Next.js image component.