getCldImageUrl Examples

Basic Transformations

Cloudinary supports a wide variety of powerful transformations that allow you to not only deliver, but easily edit and build new images on the fly.

Background Removal

Remove Background

removeBackground: Removes the background of the image using AI

import { getCldImageUrl } from 'next-cloudinary';
 
getCldImageUrl({
  src: '<Your Public ID>',
  width: 960,
  height: 600,
  removeBackground: true
})

Cropping & Resizing

Cropping

crop: Specifies the mode to use when cropping an image based on the given dimensions.

Note: By default, CldImage uses a gravity of auto, meaning the crop will automatically position the subject in the center of the resulting image.

import { getCldImageUrl } from 'next-cloudinary';
 
getCldImageUrl({
  src: '<Your Public ID>',
  width: 300,
  height: 300,
  crop: 'fill'
})

Cloudinary additionally supports dynamic crop modes like thumb that may provide a different result based on the given width and height. To help provide more options for controlling cropping images, you can specify and object or array of objects.

For instance, to crop the original source image, which will then later resize it to the initial width and height, you can use:

import { getCldImageUrl } from 'next-cloudinary';
 
getCldImageUrl({
  src: '<Your Public ID>',
  width: 300,
  height: 300,
  crop: {
    width: 600,
    height: 600,
    type: 'thumb',
    source: true
  }
})

Which will provide a consistent crop for all rendered sizes.

Learn more about cropping and responsive images.

Generative Fill

fillBackground: Fills the background of an image using Generative AI

import { getCldImageUrl } from 'next-cloudinary';
 
getCldImageUrl({
  src: '<Your Public ID>',
  width: 960,
  height: 600,
  fillBackground: true,
  crop: 'pad'
})