Optimizing Images with Next.js & Nuxt.js

Vercel Image Optimization works out the box with Next.js and Nuxt.js. The following examples show how you can leverage Image Optimization with each framework's image component.

Next.js provides a built-in next/image component. When deployed to Vercel, this component automatically optimizes your images on-demand and serves them from the Vercel Edge Network.

The only requirement to ensure your images are automatically optimized after deploying your application is importing the Image component:

import Image from 'next/image';

This component takes the following 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:

<Image
  src="https://unsplash.com/photos/MpL4w1vb798"
  alt="Picture of a triangle"
  width={500}
  height={500}
/>

For more information on usage with external URLs, and customizing your images on demand, visit the next/image documentation.

Install the nuxt/image package:

npm install -D @nuxt/image

Then, add the module to the buildModules array in your Nuxt.js config:

export default {
  target: 'static',
  buildModules: ['@nuxt/image'],
};

The <nuxt-img> component is a wrapper around the <img> element, and will automatically optimize your images on demand. It takes the following props:

• src: The URL of the image to be loaded
• width: The width of the image
• height: The height of the image
• sizes: The responsive sizes of the image
• provider: The provider to use for image optimization
• preset: The preset to use for image
• format: The format to use for image
• quality: The quality to use for image
• fit: The fit such as cover or contain
• modifiers: Transforms to apply to the image

<template>
  <nuxt-img
    preset="cover"
    src="/nuxt-icon.png"
    width="100"
    height="100"
    sizes="sm:100vw md:50vw lg:400px"
    provider="static"
    format="webp"
    quality="70"
    modifiers="rounded"
  />
</template>

When you deploy your Nuxt.js application to Vercel, the Nuxt.js Vercel Provider will be automatically enabled by default, and use Vercel's Image Optimization.

For more information on usage with external URLs, and customizing your images on demand, visit the nuxt/image documentation.