How to Resolve Image Optimization using next/image failed error

The ‘Error: Image Optimization using next/image failed’ error occurs when Next.js’s built-in image optimization fails due to configuration issues, unsupported image formats, or external image domain restrictions.

How the Error Happens

❌ Error Scenario:

// ❌ This causes the error
import Image from 'next/image';

export default function MyComponent() {
  return (
    <Image
      src="https://external-site.com/image.jpg" // ❌ Domain not configured
      alt="External Image"
      width={500}
      height={300}
    />
  );
}
// Error: Image Optimization using next/image failed

✅ Quick Fix - Configure Image Optimization

Solution 1: Configure Remote Domains

// ✅ In next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: [
      'external-site.com',        // ✅ Add your image domains
      'images.unsplash.com',      // ✅ Unsplash
      'avatars.githubusercontent.com', // ✅ GitHub avatars
      'lh3.googleusercontent.com' // ✅ Google images
    ],
    // ✅ Or use remotePatterns (recommended)
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'external-site.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
};

module.exports = nextConfig;

Solution 2: Use Static Images from Public Folder

// ✅ Use images from public folder (no domain config needed)
import Image from 'next/image';

export default function MyComponent() {
  return (
    <Image
      src="/images/my-image.jpg" // ✅ From public/images/
      alt="Local Image"
      width={500}
      height={300}
    />
  );
}

Solution 3: Use Static Import for Local Images

// ✅ Import images directly
import Image from 'next/image';
import myImage from '../public/images/my-image.jpg'; // ✅ Static import

export default function MyComponent() {
  return (
    <Image
      src={myImage} // ✅ Imported image
      alt="My Image"
      // ✅ Don't specify width/height if using imported images
      // Width and height will be inferred
    />
  );
}

Solution 4: Disable Image Optimization (Not Recommended)

// ❌ Only as a last resort
// next.config.js
const nextConfig = {
  images: {
    unoptimized: true, // ❌ Disables optimization entirely
  },
};

module.exports = nextConfig;

// ✅ Then use img tag instead of next/image
export default function MyComponent() {
  return (
    <img 
      src="https://external-site.com/image.jpg" 
      alt="External Image"
      width="500"
      height="300"
    />
  );
}