Image Optimization Quickstart

The following examples show how you can optimize your images on Vercel using your framework's image component. Use the framework switcher to see examples for your framework choice.

1. Import images

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

   app/example/page.tsx

   TypeScript

   TypeScriptJavaScript

   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

   TypeScript

   TypeScriptJavaScript

   <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.