IT Error Decoder
Vercel

How to Fix Vercel: Image Optimization Error

Last reviewed

Error message

Image Optimization using Next.js' Image component is not allowed for this image.

Next.js refuses to proxy arbitrary external images for security and cost reasons. You have to opt-in to specific hostnames.

What this error means

The Next.js Image component tried to optimize an image, but the source URL or domain isn't allowed by your config.

Why this happens

Most often: external image URL with a hostname not listed in `images.domains` or `images.remotePatterns` in `next.config.js`.

Quick fix (for end users)

  • Add the hostname of the image source to `next.config.js`.

Admin / engineer fix

  • Add the hostname to remotePatterns.

    command
    // next.config.mjs
const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'images.example.com' },
    ],
  },
};

  • If you don't actually need optimization for that image, use a plain <img> tag instead of <Image>.

Step-by-step fix

  1. Read the source URL from the error message.

  2. Add its hostname to next.config.js images.remotePatterns.

  3. Redeploy.

Affected products

Next.js · Vercel

Common variations of this error

People also see these phrasings of the same problem:

  • Image Optimization is not allowed
  • Hostname not configured under images

Still broken? Try these

  • If using a CDN, make sure the URL pattern matches what's actually requested at runtime.
  • Check `images.unoptimized` if you've disabled optimization globally.

Related errors

Related searches

  • next.js image hostname not configured
  • next.js image domains

Frequently asked questions

What does "Vercel: Image Optimization Error" mean?

The Next.js Image component tried to optimize an image, but the source URL or domain isn't allowed by your config.

What causes "Vercel: Image Optimization Error"?

Most often: external image URL with a hostname not listed in `images.domains` or `images.remotePatterns` in `next.config.js`.

How do I fix "Vercel: Image Optimization Error"?

1. Read the source URL from the error message. 2. Add its hostname to next.config.js images.remotePatterns. 3. Redeploy. Always test changes in a non-production environment first.

Browse more errors in Vercel: Fix Vercel deployment errors. Build failures, missing output directories, exceeded build duration, missing env vars, and module resolution issues. Or paste your own error into the error decoder tool to find a match. You can also go back to the homepage to browse common errors by topic.