getCldImageUrl Examples

The below examples use the CldImage component to render the images. This is not required, you can use the URL returned by getCldImageUrl in any way you like.

Basic

getCldImageUrl({
  src: 'images/turtle',
  width: 960,
  height: 600,
})

Background Removal

getCldImageUrl({
  src: 'images/turtle',
  width: 960,
  height: 600,
  removeBackground: true
})

Background removal requires the Cloudinary AI Background Removal Add-On

Generative Fill

getCldImageUrl({
  src: 'images/woman-headphones',
  width: 960,
  height: 600, // Original 1440
  crop: 'pad', // Returns the given size with padding
  fillBackground: true // Uses AI to extend image
})

The generative fill transformation is currently in Beta. Learn more.