Skip to Content

Image Optimization

Getting Started

Getting started with Image Optimization

Copy page

This guide will help you get started with using Vercel Image Optimization in your project, showing you how to import images, add the required props, and deploy your app to Vercel. Vercel Image Optimization works out of the box with Next.js, Nuxt, SvelteKit, and Astro.

Help me set up image optimization in this project. First, make sure the Vercel CLI is installed (`npm i -g vercel`). If I'm using Claude Code or Cursor, install the Vercel Plugin (`npx plugins add vercel/vercel-plugin`). For other agents, install Vercel Skills (`npx skills add vercel-labs/agent-skills`). Then: 1. Use the next/image component (or Vercel image optimization for other frameworks) to serve optimized images with automatic format conversion and resizing. 2. Deploy with `vercel --prod` to verify images are optimized.


  Show more

Prerequisites

  • A Vercel account. If you don't have one, you can sign up for free.
  • A Vercel project. If you don't have one, you can create a new project.
  • The Vercel CLI installed. If you don't have it, you can install it using the following command:pnpmyarnnpmbun

    pnpm i -g vercel


  1. Import imagesNext.js provides a built-in next/image component.

    TypeScript

    import Image from'next/image';

  2. Add the required propsThis component takes the following required props:
    • src: The URL of the image
    • alt: A short description of the image
    • width: The width of the image
    • height: The height of the image
    When using local images you do not need to provide the width and height props. These values will be automatically determined based on the imported image.The example below uses a remote image with the width and height props applied:

    TypeScript

    src="https://images.unsplash.com/photo-1627843240167-b1f9d28f732e" alt="Triangular frames arranged concentrically, creating a tunnel against a dark background." width={1920} height={1080} />If there are some images that you wish to not optimize (for example, if the URL contains a token), you can use the unoptimized prop to disable image optimization on some or all of your images.For more information on all props, caching behavior, and responsive images, visit the next/image documentation.
  3. Deploy your app to VercelPush your changes and deploy your Next.js application to Vercel.When deployed to Vercel, this component automatically optimizes your images on-demand and serves them from the Vercel CDN.

Next steps

Last updated August 11, 2026

Cross-link map: Getting started with Image Optimization (/docs/image-optimization/quickstart)From the Vercel docs graph (built 2026-09-21T05:26:59.511Z), spanning vercel.com docs + KB, nextjs.org, ai-sdk.dev, and other Vercel documentation sites. Full graph as JSON: https://vercel.com/docs/graph.jsonSemantically closest pagesImage Optimization with Vercel — Transform and optimize images to improve page load performance.How to reduce Vercel Image Optimization costs — Learn how to reduce Vercel Image Optimization costs in Next.js by tuning cache TTLs, image sizes, formats, and quality.Nuxt on Vercel — Deploy Nuxt applications to Vercel and configure rendering, functions, middleware, routing, image optimization, and cachHow to Optimize Next.js + Sitecore JSS — This guide covers performance and usage considerations when building and deploying your Next.js and Sitecore JSS applicaGetting started with Speed Insights — Vercel Speed Insights provides you detailed insights into your website's performance. This quickstart guide will help yoThis page links to (7)Image Component — Optimize Images in your Next.js Application using the built-in next/image Component.Image Optimization — Learn how to optimize images in Next.jsImage — Optimize Images in your Next.js Application using the built-in next/image Component.Build Output Configuration — Learn about the Build Output Configuration file, which is used to configure the behavior of a Deployment.Vercel CDN overview — Vercel's CDN is a globally distributed platform that handles routing, caching, security, and compression for every deploLimits and Pricing for Image Optimization — This page outlines information on the limits that are applicable when using Image Optimization, and the costs they can iManaging Usage & Costs — Learn how to measure and manage Image Optimization usage with this guide to avoid any unexpected costs.Pages that link here (3)By site: vercel-docs (3)Astro on Vercel — Deploy Astro sites to Vercel and configure server-side rendering, ISR, Web Analytics, Image Optimization, and Routing MiNuxt on Vercel — Deploy Nuxt applications to Vercel and configure rendering, functions, middleware, routing, image optimization, and cachImage Optimization with Vercel — Transform and optimize images to improve page load performance.

Now that you've set up Vercel Image Optimization, you can explore the following:

Next

Previous

We provide 24/7 support through various channels, including live chat, email, and phone, to assist with any queries.

Image Optimization

Was this helpful?

Limits and Pricing