Image Optimization in Next.js

Next.js provides a powerful Image component that automatically optimizes images for better performance.

Why Use next/image?

The built-in next/image component offers several benefits:

• Automatic optimization - Images are resized and converted to modern formats like WebP
• Lazy loading - Images load only when they enter the viewport
• Prevents layout shift - Reserves space for images before they load
• Responsive images - Automatically serves the right size for each device

Basic Usage

import Image from 'next/image';

export default function Profile() {
  return (
    <Image
      src="/profile.jpg"
      alt="Profile picture"
      width={500}
      height={300}
    />
  );
}

Remote Images

For external images, you need to configure allowed domains in next.config.js:

module.exports = {
  images: {
    domains: ['example.com'],
  },
};

Using the Image component can significantly improve your Core Web Vitals scores!