Next.js Image Component vs Manual srcset — When to Use Each

Next.js Image vs Manual srcset

Next.js provides an <Image> component that automatically generates responsive images. Here is how it compares to manual srcset markup.

Next.js Image Component

import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Hero banner"
  width={1536}
  height={600}
  priority
  sizes="100vw"
/>

This automatically generates:

• Multiple width variants via the image optimization API
• WebP/AVIF format when supported
• srcset with configured device sizes
• Proper loading, decoding, and dimension attributes

Default deviceSizes and imageSizes

// next.config.js defaults
module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
};

When Manual srcset Is Better

Scenario	Next.js Image	Manual srcset
Standard web app	Preferred	Unnecessary
Static export (no server)	Limited	Preferred
CDN with pre-built variants	Overkill	Preferred
AVIF-first strategy	Configurable	Full control
Art direction (different crops)	Not supported	Use <picture>
Third-party image CDN (Cloudinary, imgix)	Use loader	Manual or loader

Custom Loader for Image CDNs

const cloudinaryLoader = ({ src, width, quality }) =>
  `https://res.cloudinary.com/demo/image/upload/w_${width},q_${quality || 75}/${src}`;

<Image
  loader={cloudinaryLoader}
  src="hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  sizes="100vw"
/>

Generating Manual srcset for Static Sites

When deploying a static site without image optimization API access, pre-generate image variants at build time and use manual srcset:

<img
  src="/images/hero-1280w.webp"
  srcset="/images/hero-640w.webp 640w,
          /images/hero-1024w.webp 1024w,
          /images/hero-1280w.webp 1280w,
          /images/hero-1536w.webp 1536w"
  sizes="100vw"
  alt="Hero"
  loading="eager"
  fetchpriority="high"
/>

This approach gives you full control over image variants, formats, and CDN configuration.