How to optimize images in Next.js with the Image component

The next/image Component

Never use a plain <img> tag in Next.js. The Image component from next/image automatically resizes, converts to WebP, applies lazy loading, and prevents Cumulative Layout Shift.

import Image from 'next/image'

// Local image — width/height inferred automatically
import profilePic from '@/public/profile.jpg'

<Image
  src={profilePic}
  alt="Profile picture"
  placeholder="blur"  // Shows blurred preview while loading
/>

// Remote image — width/height required
<Image
  src="https://example.com/photo.jpg"
  alt="Remote photo"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Remote Image Domains

Remote URLs must be whitelisted in next.config.ts:

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'avatars.githubusercontent.com',
      },
    ],
  },
}
export default nextConfig

Priority for Above-the-Fold Images

<Image
  src="/hero.jpg"
  alt="Hero image"
  fill
  priority  // Disables lazy loading — use only for LCP images
  className="object-cover"
/>

Add priority only to the image that is your Largest Contentful Paint element — the hero image, or the first visible image. Adding it to all images defeats lazy loading and hurts performance.