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, use the remotePatterns configuration. 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: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        port: '',
        pathname: '/my-account-name/**',
      },
    ],
  },
};

Next swap the image's src attribute to point towards your Cloudinary upload folder:

<Image
  src="https://res.cloudinary.com/my-account-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.