Guides
Image Optimization

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

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

Watch & Learn

View on YouTube

Learn More