Image Optimization in Next.js: From 10MB to 200KB Without Losing Quality.

Images account for the majority of page weight on most websites. Unoptimized images are the single fastest win for LCP scores and overall page performance. Next.js ships with a powerful image component that handles most of this automatically — if you use it correctly.

The next/image Component

The Next.js Image component automatically:

• Converts images to modern formats (AVIF, WebP) based on browser support
• Generates multiple sizes and serves the appropriate one via srcset
• Lazy loads images below the fold by default
• Prevents Cumulative Layout Shift with automatic dimension reservation

AVIF vs WebP

AVIF provides 50% better compression than WebP and up to 80% better than JPEG at equivalent visual quality. The trade-off: AVIF encoding is slower and browser support, while growing, is not universal. Next.js serves AVIF to supported browsers and falls back automatically — so you get the best format for every user.

Priority Loading for LCP Images

The largest image above the fold — your hero image — should be preloaded. Add the priority prop to disable lazy loading and add a preload hint:

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority   // Preloads this image — use for above-fold images only
/>

Only use priority for images visible without scrolling. Over-using it defeats the purpose of lazy loading.

Blur Placeholder

Blur placeholders improve perceived performance by showing a low-quality image preview while the full image loads:

<Image
  src="/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQ..."
/>

For local images, Next.js generates the blurDataURL automatically. For remote images, provide it explicitly or use a package like plaiceholder to generate it at build time.

Remote Image Configuration

Whitelist the domains you serve images from in next.config.js:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
    ],
    formats: ['image/avif', 'image/webp'],
  },
};

CDN Caching for Images

Next.js's built-in image optimization caches processed images on your server. For better performance, use a CDN in front of your Next.js application. Vercel's CDN caches optimized images at the edge by default. For self-hosted deployments, configure Cloudflare to cache the image optimization responses.

SVG for Icons and Illustrations

Use SVG for icons, logos, and simple illustrations. SVGs are resolution-independent, typically tiny in file size, and can be inlined into HTML to eliminate HTTP requests entirely. SVGR makes importing SVGs as React components straightforward in Next.js.

Conclusion

Switching from raw img tags to next/image with correct configuration typically reduces image payload by 60-80% with no visible quality loss. Add priority loading for your LCP image, use blur placeholders for above-fold images, and ensure your CDN caches optimized images at the edge. The LCP improvement is usually immediate and significant.