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.

Your Image Optimization usage will be displayed under the Image Optimization section of the Usage tab on your dashboard.

Usage dashboard showing the number of source images were optimized per day.

The Source Image Optimization section of the usage page also contains a drop-down, which will display a list of all the source images that have been optimized per-day for your entire team. Source images are what count towards your Image Optimization usage.

Optimizing images helps improve the end-user experience of your site, by delivering fast-loading images, that are optimized for their screen size and in the ideal format. In addition to the user experience it provides:

• A reduction in bandwidth usage, which saves you money
• Minimizing user bounce rates caused by slow page speed
• Maximizing the quality of the image while minimizing the load time

For more information, read the benefits section.

You are billed for the number of unique source images per billing period. For more information on the limits that are applicable to using Image Optimization, and the costs that they incur, please see the Limits and Pricing page.

Costs are based on the number of source images during the billing period. Every time you change the value of the src prop during a billing period, an additional count will be added for that same Image component. 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 or remotePatterns config or change the pattern to be more specific
• Use remotePatterns rather than domains
• When using Next.js, you can disable Image Optimization on a per-image basis, by adding the unoptimized prop to the <Image /> tag:

<Image
  src="/path/to/image.jpg"
  unoptimized
  alt="A description of the image"
  width={500}
  height={300}
/>

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

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

There are a number of benefits to using Vercel when optimizing your images.

• When you use Image Optimization on Vercel with either the Next.js or Nuxt.js image components, images are cached at the Edge. By using Vercel's Edge Network, images can be quickly displayed to the end user
• When used with either Next.js or Nuxt image components, a blur-up placeholder can be used to indicate the image is loading
• When using Image Optimization, Vercel will manage the infrastructure needed to generate an optimized image (such as dimensions, format, size, quality) for all of devices and network types