Remote Images

Vercel's Image Optimization also works with images stored and sourced from a CDN, instead of your local repository. This guide shows how you can use images hosted on Cloudinary and use next/image to automatically optimize them.

• A Cloudinary account set up and ready to use
• next/image installed and configured to source images locally. See the Examples section for setup instructions

In order to source images remotely from Cloudinary you will use a custom loader. This will tell Next.js where to source the images from based on a domain. Open the next.config.js file in your project and add the following code:

module.exports = {
  images: {
    domains: ['res.cloudinary.com'],
  },
};

This defines a custom configuration pointing to the domain you wish to use as a source. res.cloudinary.com is the domain that Cloudinary uses to host the images.

Next swap the images src attribute to point towards your Cloudinary upload folder:

<Image
  src="https://res.cloudinary.com/my-cloudinary-name/image/upload/v1598011201/vercel-logo.png"
  alt="Picture of a triangle"
  width={500}
  height={500}
/>

Vercel's Image Optimization will automatically optimize this remotely sourced image.