Help
Log InSign Up

Getting started with Image Optimization

Learn how you can leverage Vercel Image Optimization in your projects.

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.

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: 
    pnpm i -g vercel

  1. Import images

    Next.js provides a built-in next/image component.

    app/example/page.tsx
    import Image from 'next/image';

  2. Add the required props

    This component takes the following required props:

    • src: The URL of the image to be loaded
    • 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 below example uses a remote image stored in a /public/images/ folder, and has the width and height props applied:

    app/example/page.tsx
    <Image
  src="https://images.unsplash.com/photo-1627843240167-b1f9d28f732e"
  alt="Picture of a triangle"
  width={500}
  height={500}
/>

    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 Vercel

    Push 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 Edge Network.

Next steps

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

Last updated on March 4, 2025
Next
Account Management