Managing Image Optimization Usage & Costs

When using Image Optimization it's important to be aware of your usage to ensure that you do not get any unexpected costs.

Source images are what count towards your Image Optimization usage. Your Image Optimization usage is displayed under the Image Optimization section of the Usage tab on your dashboard.

The Source Image Optimization section of the usage page contains a drop-down, which displays a list of all the source images that have been optimized per-day for your entire team.

See the Usage section for more information.

Image optimization on Vercel incurs costs based on the type of image request and its processing stage. These costs fall into three categories:

• Unique source image optimization: Incurred when optimizing an image for the first time.
• Edge request: The processing and responding to the user's request for an image from the edge cache.
• Fast Data Transfer (FDT): The bandwidth cost of delivering the image data over the network to the user's device.

The following table outlines the cost components and when they are incurred during a billing period.

Pricing is based on the number of unique source images during the billing period. Another way to think about this is unique src prop values, regardless of how many Image components you have. The usage count of the source images will be reset at the beginning of each billing period.

To reduce your Image Optimization usage, you should consider the following:

• Reduce variability in query string parameters for src prop and minimize the amount of times you change the src property during a billing period
• Reduce the number of entries in domains / remotePatterns / localPatterns config or change the pattern to be more specific
• Change from deprecated domains to remotePatterns and update the pattern to be more specific
• When using Next.js, you can disable Image Optimization on a per-image basis, by adding the unoptimized prop to the <Image /> tag:

import Image from 'next/image';
 
export default function ImageExample() {
  return (
    <Image
      unoptimized
      src="https://unsplash.com/photos/MpL4w1vb798"
      alt="Picture of a triangle"
      width={500}
      height={500}
    />
  );
}

Alternatively, you can completely disable Image Optimization by setting unoptimized: true in your next.config.js:

module.exports = {
  images: {
    unoptimized: true,
  },
};

For more information on the limits, usage, and everything related to billing for Image Optimization, see the Limits and Pricing page.