Loading...

Three ways to disable Image Optimization in Vercel

question nextjs vercel
Ram Patra Published on March 1, 2025
Next.js 14+

If you’re using the free tier of Vercel, like I do for some of my small side projects, you will get the 402 Payment Required error eventually when loading images. This is because you have hit the Image Optimization limit of the free plan. The solution to this is to disable Vercel’s Image Optimization, or to host the images elsewhere, or to upgrade to their Pro plan.

Here I will be talking about the three ways to disable Vercel’s image optimization to prevent the 402 Payment Required error:

1. Disable Image Optimization Globally

If you want to disable image optimization across your entire Next.js app, update your next.config.mjs:

export default {
  images: {
    loader: 'default', // Prevents Vercel's optimization
    unoptimized: true, // Disables all image optimizations globally
  },
};

Or, if you’re using next.config.ts, update as per below snippet:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    unoptimized: true, // Disables Next.js image optimization
  },
};

export default nextConfig;

This tells Next.js to serve images as they are without going through Vercel’s optimization pipeline.

2. Disable Optimization per Image (Using unoptimized in <Image>)

If you only want to disable optimization for specific images, set unoptimized={true} in the <Image> component:

import Image from "next/image";

export default function Example() {
  return (
    <Image 
      src="https://your-external-image-url.com/example.jpg" 
      width={500} 
      height={300} 
      unoptimized 
    />
  );
}

This bypasses Vercel’s image processing but still allows you to use the <Image> component.

3. Use a Custom Image Loader (For External Images)

If you host images externally and want to keep the <Image> component’s benefits (like lazy loading), use a custom loader:

const customLoader = ({ src }) => src;

export default function Example() {
  return (
    <Image 
      loader={customLoader} 
      src="https://your-external-image-url.com/example.jpg" 
      width={500} 
      height={300} 
    />
  );
}

This ensures Next.js loads the image directly from the URL instead of routing it through Vercel’s optimization.

Which Method Should You Use?

Method 1 (Global Disable) → Best if all images should bypass optimization.
Method 2 (Per Image Disable) → Best if only some images need to be unoptimized.
Method 3 (Custom Loader) → Best if using external image hosting CDN.

Take your presentation to the next level.

Put your face and name on your screen.

Your to-dos on your menu bar.

Fill forms using your right-click menu.

Ram Patra Published on March 1, 2025
Image placeholder

Keep reading

If this article was helpful, others might be too

question nextjs react February 9, 2024 How to make an HTML button element behave like a Link component in Next.js?

In Next.js, you can use the Link component from next/link to create client-side navigation. However, if you want to use an HTML button element (<button>) to behave like a link, you can wrap it with the Link component. Here’s how you can do it:

question nextjs react February 9, 2024 Main advantages of using the Link component in Next.js over Anchors and Buttons

The main advantage of using the Link component in Next.js for client-side navigation is its optimized prefetching behavior, which enhances the performance and user experience of your web application. Here’s a breakdown of the key advantages:

question nextjs react July 18, 2024 How to programmatically navigate to a page in Next.js?

In Next.js, you can programmatically navigate to different pages using the useRouter hook from the next/navigation module. This hook provides a convenient way to navigate between pages within your Next.js application. Below is an example demonstrating how to use the useRouter hook to programmatically navigate to another page.

Like my work?

Please, feel free to reach out. I would be more than happy to chat.