Optimizing Images in Next.js

Automatically optimize images using the CldImage component. By default, CldImage opts you in to automatic optimization including delivering the most optimal format for the browser (WebP, AVIF).

You can further optimize delivery by using responsive sizing by using the sizes prop.

Example

import { CldImage } from 'next-cloudinary';
 
<CldImage
  width="960"
  height="600"
  src="images/turtle"
  sizes="100vw"
  alt="Turtle"
/>

Watch & Learn

Learn More

• Responsive Images
• CldImage
• getCldImageUrl