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:
next.config.js
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.