Responsive Images

Responsive images are critical for page performance and they're made easy with the CldImage component.

The CldImage component takes advantage of responsive images generated using the Next Image component (opens in a new tab) which allows you to simply specify the sizes you want and the component handles the rest.

Using the sizes prop, you can configure exactly the sizes you need for your application, such as a similar example to the Next.js docs: