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

Using next/image with Cloudinary

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: [''],

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

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

  alt="Picture of a triangle"

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