Skip to content

According to the W3Techs surveys, 94.1% of websites use images. Being able to deliver high quality images that are loaded fast, optimized for the correct screen size, and in the ideal format is a critical part of the user experience.

With Vercel you can optimize images at the Edge and dynamically serve different variations of your image, while reducing the file size, and optimizing the images quality. This is a great way to improve your website's loading speed, user experience and improve your Core Web Vitals.

With Image Optimization:

  • Improved loading performance due to images being cached at the Edge
  • Reduction in bandwidth usage, which saves you money
  • Minimizing the risk of lost traffic due to slow page speeds
  • Improving the overall visitor experience

Images are often the first element people see when visiting a site. They can take up a large viewport area, and on mobile or tablet devices they can even take up the whole viewport width.

Having large images both in dimension and size can affect how people interact with your website if they are not properly optimized for different devices, and network speeds.

Consider an un-optimized image loaded when not in the viewport. The image is taking up unnecessary bandwidth, won't be viewed until the visitor scrolls to it, and can cause a delay in the loading of the page as a whole.

For example, imagine you have an e-commerce store and the page is too slow to load due to un-optimized product images, this can cause people to navigate away from your site, meaning a potential loss in revenue.

In addition to image size, image formats are often over looked, with many websites not optimizing for the different formats available, such as Webp or AVIF.

Vercel's Image Optimization can be used with both the Next.js and Nuxt.js image components. When these components are used, the images are cached at the Edge and shared across the Vercel Edge Network making them available to all visitors at their nearest point.

With Vercel's Image Optimization the benefits include:

  • Images appear faster due to small file sizes
  • The correct image sizes are served based on the device's screen size
  • When used with either Next.js or Nuxt image components, a blur-up placeholder can be used to indicate the image is loading
  • Images can be lazy-loaded to improve initial page load performance

Once deployed, the component will dynamically serve different variations of your image for common device screen sizes used by visitors on the web.

All the variations of your image requested by the component will automatically be prefixed depending on the framework:

This ensures that Vercel's Edge Network automatically optimizes them on demand.

The first time a new image is requested from the Edge Network, all the transformations outlined in the parameters passed to the component are applied.

By default, Vercel will dynamically generate a new image for all of the variations requested by the component. Afterwards, the file size of each image is reduced by optimizing the quality of the image.

Lastly, the image variations are served and cached on Vercel's Edge Network. This means that on subsequent requests the cached version will be served (assuming that the parameters passed to the component didn't change).

Note: Even if you redeploy, images cached in /_next/image or/_vercel/image will be preserved.

Vercel creates a cache key using the following:

  • Content hash for static images (or external URL for remote images)
  • Query String parameters (w, q, etc.)
  • Accept HTTP header

The Accept HTTP header is normalized so that different browsers can utilize the same Edge Cache.

A Source Image is the original, unaltered image determined by the src prop.

When the src prop is an internal path (an image in the current deployment), the file contents are hashed to determine the Source Image.

When the src prop is an external URL (an image hosted elsewhere), the URL is used to determine the Source Image.

A single Source Image can be transformed into many Optimized Images. Take the following for example using next/image:

  • Usage: <Image src="/hero.png" width="700" height="745" />
  • Source Image: /hero.png
  • Optimized Image: /_next/image?url=%2Fhero.png&w=750&q=75
  • Optimized Image: /_next/image?url=%2Fhero.png&w=828&q=75
  • Optimized Image: /_next/image?url=%2Fhero.png&w=1080&q=75

The Usage page counts the number of unique Source Images requested during each billing period. Since images are optimized on-demand, the Source Image is not counted until a request is made to optimize it at runtime. This means that usage can be lower if no one visited a page with an image in a given billing period. It also means there is an upperbound of Source Images which can be derived by the number of unique src props for all next/image components in your application.

See the common usages of next/image listed below:

  • import img from './img.png'; <Image src={img} /> at-most, counts as 1 Source Image if the image is requested during the billing period.
  • <Image src="/logo.png" width={100} height={100} /> at-most, counts as 1 Source Image if the image is requested during the billing period.
  • <Image src={'${path}'} width={100} height={100} />counts as N Source Images - one for each uniquepath requested during the billing period.
  • <Image src={img} loader={myCustomerFunc} /> counts as 0 Source Images since optimization is performed by a 3rd party image provider, not Vercel.
  • <Image src={img} unoptimized /> counts as 0 Source Images since the image is never optimized.

At the start of a billing period, the Source Image count starts at zero. Deleting an image and making a new deployment will not impact the Source Image count for the current billing period if it has already been requested as it has already been counted. You won't see the Source Image count drop until the following billing period.

Next.js projects that configure the loader config or unoptimized prop will opt out of Vercel Image Optimization in favor of a 3rd party image provider. Therefore, the Usage page will show 0 Source Images each billing period.

Next.js projects that configure domains or remotePatterns allow external images to be optimized which will likely result in a high number of Source Images because, especially if users of the remote website allows image uploads (for example, user avatars).

For information on the limits that are applicable to using Image Optimization, and the costs that they incur, please see the Limits and Pricing page.

Before you adopt Image Optimization in an existing project, enable Analytics for it.

This will allow you to measure real-world performance & user experience over time and compare the before and after Image Optimization.