Vercel offers built-in image optimization capabilities that can help you serve high-quality images with minimal impact on page load times.
Optimizing images on Vercel boosts website performance, user experience, and cuts down on bandwidth costs. This is critical for maintaining good Core Web Vitals. Optimized images on Vercel load faster, use less bandwidth, are properly sized for different devices, and support modern formats such as WebP and AVIF. They are also automatically cached on the Vercel Edge Network.
Images are automatically served in different variations for common device screen sizes. When used with frameworks, the src prop is automatically replaced with the optimized image URL. For example:
Optimized images are automatically cached on the Vercel Edge Network. Subsequent requests to the same image will be served from the cache. The cache key contains:
- Content hash for static images (or external URL for remote images)
- Query String parameters (
w,q, etc.) AcceptHTTP header (normalized)
Note that re-deploying your application will not invalidate the image cache. However, if you change the image, the cache will be invalidated and the new image will be served.
To manually invalidate the cache you can add a query string to the image URL (for example, adding ?new or ?v=2 to the src prop passed to next/image).
Cache expiration is defined by either the minimumCacheTTL (default: 60 seconds) or Cache-Control response header from the upstream image, whichever is larger. If your image content changes frequently, it's best to keep this number low.
A Source Image is determined by the src prop. Internal src paths use hashed file contents, while external src URLs use the URL itself.
A single Source Image can produce multiple optimized images. For example:
- 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
Learn more about measuring usage of Source Images.
Refer to the Limits and Pricing page for more information.
Enable Speed Insights before adopting Image Optimization to measure real-world performance and compare before and after results.
For more information on what to do next, we recommend the following articles: