Transformation URL API reference

So, what do you think?

We're super excited about this totally revamped version of the URL transformation reference, which provides comprehensive syntax details and examples for every supported image and video transformation in one place.

But most important is what you think!

After you've played around, please use the Rate this page option (just below the On this page list) to both rate the page and send us feedback on what you like as well as sharing your ideas for how to make it even better!

The Transformation URL API enables you to deliver media assets, including a large variety of on-the-fly transformations through the use of URL parameters. This reference provides comprehensive coverage of all available URL transformation parameters, including syntax, value details, and examples.

Overview

The default Cloudinary asset delivery URL has the following structure:

https://res.cloudinary.com/<cloud_name>/<asset_type>/<delivery_type>/<transformations>/<version>/<public_id_full_path>.<extension>

This reference covers the parameters and corresponding options and values that can be used in the <transformations> element of the URL. It also covers the <extension> element.

For information on other elements of the URL, see Transformation URL syntax.

Important

The transformation names and and syntax shown in this reference refer to the URL API.

Depending on the Cloudinary SDK you use, the names and syntax for the same transformation may be different. Therefore, all of the transformation examples in this reference also include the code for generating the example delivery URL from your chosen SDK.

The SDKs additionally provide a variety of helper methods to simplify the building of the transformation URL as well as other built-in capabilities. You can find more information about these in the relevant SDK guides.

Parameter types

There are two types of transformation parameters:

  • Action parameters: Parameters that perform a specific transformation on the asset.
  • Qualifier parameters: Parameters that do not perform an action on their own, but rather alter the default behavior or otherwise adjust the outcome of the corresponding action parameter.

See the Transformation Guide for additional guidelines and best practices regarding parameter types.


.<extension>

 

Although not a transformation parameter belonging to the <transformation> element of the URL, the extension of the URL can transform the format of the delivered asset, in the same way as f_<supported format>.

If f_<supported format> or f_<auto> are not specified in the URL, the format is determined by the extension. If no format or extension is specified, then the asset is delivered in its originally uploaded format.

  • If using an SDK to generate your URL, you can control the extension using the format parameter, or by adding the extension to the public ID.
  • If using a raw transformation, for example to define an eager or named transformation, you can specify the extension at the end of the transformation parameters, following a forward slash. For example, c_pad,h_300,w_300/jpg means that the delivery URL has transformation parameters of c_pad,h_300,w_300 and a .jpg extension. c_pad,h_300,w_300/ represents the same transformation parameters, but with no extension.

Note
As the extension is considered to be part of the transformation, be careful when defining eager transformations and transformations that are allowed when strict transformations are enabled, as the delivery URL must exactly match the transformation, including the extension.

Value Type Description
extension string The format to use when delivering the asset.

Possible values: Any supported delivery format as relevant for the file type you are delivering:

Default: The originally uploaded format of the asset.

Examples

  1. Deliver the image as a JPEG (.jpg):
    Ruby:
    Copy to clipboard
    cl_image_tag("sheep.jpg")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sheep.jpg")
    PHP v2:
    Copy to clipboard
    (new ImageTag('sheep.jpg'));
    Python:
    Copy to clipboard
    CloudinaryImage("sheep.jpg").image()
    Node.js:
    Copy to clipboard
    cloudinary.image("sheep.jpg")
    Java:
    Copy to clipboard
    cloudinary.url().imageTag("sheep.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sheep.jpg').toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sheep.jpg")
    React:
    Copy to clipboard
    <Image publicId="sheep.jpg" >
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sheep.jpg" >
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sheep.jpg" >
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.BuildImageTag("sheep.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().generate("sheep.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().generate("sheep.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sheep.jpg")
    }.generate()
    Sheep image delivered as a JPG
  2. Deliver the image as a PNG (.png):
    Ruby:
    Copy to clipboard
    cl_image_tag("sheep.png")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sheep.png")
    PHP v2:
    Copy to clipboard
    (new ImageTag('sheep.png'));
    Python:
    Copy to clipboard
    CloudinaryImage("sheep.png").image()
    Node.js:
    Copy to clipboard
    cloudinary.image("sheep.png")
    Java:
    Copy to clipboard
    cloudinary.url().imageTag("sheep.png");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sheep.png').toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sheep.png")
    React:
    Copy to clipboard
    <Image publicId="sheep.png" >
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sheep.png" >
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sheep.png" >
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.BuildImageTag("sheep.png")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().generate("sheep.png")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().generate("sheep.png");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sheep.png")
    }.generate()
    Sheep image delivered as a PNG
  3. Deliver the image in its originally uploaded format (no extension specified):
    Ruby:
    Copy to clipboard
    cl_image_tag("sheep")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sheep")
    PHP v2:
    Copy to clipboard
    (new ImageTag('sheep'));
    Python:
    Copy to clipboard
    CloudinaryImage("sheep").image()
    Node.js:
    Copy to clipboard
    cloudinary.image("sheep")
    Java:
    Copy to clipboard
    cloudinary.url().imageTag("sheep");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sheep').toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sheep")
    React:
    Copy to clipboard
    <Image publicId="sheep" >
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sheep" >
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sheep" >
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.BuildImageTag("sheep")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().generate("sheep")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().generate("sheep");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sheep")
    }.generate()
    Sheep image delivered in original format

a (angle)

 

Rotates or flips an asset by the specified number of degrees or automatically according to its orientation or available metadata. Multiple modes can be applied by concatenating their values with a dot.

Learn more: Rotating images | Rotating videos

<degrees>

 a_<degrees>

Rotates an asset by the specified angle.

See also: Arithmetic expressions

Value Type Description
degrees integer The number of degrees to rotate the asset clockwise (positive value) or counter-clockwise (negative value). If the angle is not a multiple of 90, a rectangular bounding box is added containing the rotated asset.

Note
If either the width or height of an asset exceeds 3000 pixels, the asset is automatically downscaled first, and then rotated. This applies to the size of the asset that is the input to the rotation, whether that be the output of a previous chained transformation or the original asset size.

Examples

  1. Rotate an image by 90 degrees clockwise (a_90):

    Ruby:
    Copy to clipboard
    cl_image_tag("sheep.jpg", :angle=>90)
    PHP v1:
    Copy to clipboard
    cl_image_tag("sheep.jpg", array("angle"=>90))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sheep.jpg'))
      ->rotate(Rotate::byAngle(90));
    Python:
    Copy to clipboard
    CloudinaryImage("sheep.jpg").image(angle=90)
    Node.js:
    Copy to clipboard
    cloudinary.image("sheep.jpg", {angle: 90})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().angle(90)).imageTag("sheep.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sheep.jpg', {angle: 90}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sheep.jpg", {angle: 90})
    React:
    Copy to clipboard
    <Image publicId="sheep.jpg" >
      <Transformation angle="90" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sheep.jpg" >
      <cld-transformation angle="90" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sheep.jpg" >
      <cl-transformation angle="90">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(90)).BuildImageTag("sheep.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(90)).generate("sheep.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().angle(90)).generate("sheep.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sheep.jpg")
    rotate(Rotate.byAngle(90))}.generate()
    Rotate image by 90 degrees clockwise

  2. Rotate a video by 20 degrees counterclockwise (a_-20):

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :angle=>-20)
    PHP v1:
    Copy to clipboard
    cl_video_tag("dog", array("angle"=>-20))
    PHP v2:
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->rotate(Rotate::byAngle(-20));
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(angle=-20)
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {angle: -20})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().angle(-20)).videoTag("dog");
    JS:
    Copy to clipboard
    cloudinary.videoTag('dog', {angle: -20}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {angle: -20})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation angle="-20" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video publicId="dog" >
      <cld-transformation angle="-20" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation angle="-20">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Angle(-20)).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAngle(-20)).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().angle(-20)).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
    publicId("dog.mp4")
    rotate(Rotate.byAngle(-20))}.generate()

<mode>

 a_<mode>

Rotates an image based on the specified mode.

Value Type Description
mode constant Required. The rotation mode to apply.

Possible values:

  • auto_right: If the requested aspect ratio does not match the image's aspect ratio, rotates the image 90 degrees clockwise.
  • auto_left: If the requested aspect ratio does not match the image's aspect ratio, rotates the image 90 degrees counterclockwise only.
  • vflip: Vertically mirror flips the image.
  • hflip: Horizontally mirror flips the image.
  • ignore: Prevents Cloudinary from automatically rotating the image according to the EXIF data stored by the camera when the image was taken.

Examples

  1. Rotate image 90 degrees clockwise only if the requested aspect ratio does not match the image's aspect ratio (a_auto_right):

    Ruby:
    Copy to clipboard
    cl_image_tag("sheep.jpg", :angle=>"auto_right")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sheep.jpg", array("angle"=>"auto_right"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sheep.jpg'))
      ->rotate(Rotate::mode(RotationMode::autoRight()));
    Python:
    Copy to clipboard
    CloudinaryImage("sheep.jpg").image(angle="auto_right")
    Node.js:
    Copy to clipboard
    cloudinary.image("sheep.jpg", {angle: "auto_right"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().angle("auto_right")).imageTag("sheep.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sheep.jpg', {angle: "auto_right"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sheep.jpg", {angle: "auto_right"})
    React:
    Copy to clipboard
    <Image publicId="sheep.jpg" >
      <Transformation angle="auto_right" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sheep.jpg" >
      <cld-transformation angle="auto_right" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sheep.jpg" >
      <cl-transformation angle="auto_right">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle("auto_right")).BuildImageTag("sheep.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle("auto_right")).generate("sheep.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().angle("auto_right")).generate("sheep.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sheep.jpg")
    rotate(Rotate.mode(RotationMode.autoRight()))}.generate()
    Rotate image by 90 degrees clockwise if aspect ratio does not match original

  2. Vertically mirror flip the image and then rotate it by another 20 degrees clockwise using the dot notation to apply more than one rotation option (a_vflip):

    Ruby:
    Copy to clipboard
    cl_image_tag("sheep.jpg", :angle=>["vflip", 20])
    PHP v1:
    Copy to clipboard
    cl_image_tag("sheep.jpg", array("angle"=>array("vflip", 20)))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sheep.jpg'))
      ->rotate(Rotate::mode(RotationMode::verticalFlip()))
      ->rotate(Rotate::byAngle(20));
    Python:
    Copy to clipboard
    CloudinaryImage("sheep.jpg").image(angle=["vflip", 20])
    Node.js:
    Copy to clipboard
    cloudinary.image("sheep.jpg", {angle: ["vflip", 20]})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().angle("vflip", "20")).imageTag("sheep.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sheep.jpg', {angle: ["vflip", 20]}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sheep.jpg", {angle: ["vflip", 20]})
    React:
    Copy to clipboard
    <Image publicId="sheep.jpg" >
      <Transformation angle={["vflip", 20]} />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sheep.jpg" >
      <cld-transformation angle={["vflip", 20]} />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sheep.jpg" >
      <cl-transformation angle={{["vflip", 20]}}>
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle("vflip", "20")).BuildImageTag("sheep.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle("vflip", "20")).generate("sheep.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().angle("vflip", "20")).generate("sheep.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sheep.jpg")
    rotate(Rotate.mode(RotationMode.verticalFlip()))
    rotate(Rotate.byAngle(20))}.generate()
    Vertical mirror flip of the image.

ac (audio codec)

 ac_<codec value>

Sets the audio codec.

Value Type Description
codec value constant Required. The audio codec to use.

Possible values:

  • none: Removes the audio channel.
  • aac: Sets the audio codec to aac (mp4 or flv only).
  • vorbis: Sets the audio codec to vorbis (ogv or webm only).
  • mp3: Sets the audio codec to mp3 (mp4 or flv only).
  • opus: Sets the audio codec to opus (webm only).

Examples

Remove the audio from a video (ac_none):

Ruby:
Copy to clipboard
cl_video_tag("dog", :audio_codec=>"none")
PHP v1:
Copy to clipboard
cl_video_tag("dog", array("audio_codec"=>"none"))
PHP v2:
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->transcode(Transcode::audioCodec(AudioCodec::none()));
Python:
Copy to clipboard
CloudinaryVideo("dog").video(audio_codec="none")
Node.js:
Copy to clipboard
cloudinary.video("dog", {audio_codec: "none"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().audioCodec("none")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {audioCodec: "none"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {audio_codec: "none"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation audioCodec="none" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation audioCodec="none" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation audio-codec="none">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AudioCodec("none")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAudioCodec("none")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().audioCodec("none")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
publicId("dog.mp4")
transcode(Transcode.audioCodec(AudioCodec.none()))}.generate()

af (audio frequency)

 af_<frequency value>

Controls the audio sampling frequency.

As a qualifier, can be used to preserve the original frequency, overriding the default frequency behavior of vc_auto.

As a qualifier, use with: vc_auto

Learn more: Audio frequency control

Value Type Description
frequency value string | constant A frequency value in Hz.

Possible values:

  • A fixed value specific to the codec used:
    • aac: 96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350
    • libfdk_aac: 96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 0
    • mp3: 44100, 48000, 32000, 22050, 24000, 16000, 11025, 12000, 8000, 0
    • opus: 48000, 24000, 16000, 12000, 8000, 0
    • pcm: 48000, 96000, 0
  • iaf: Retains the original (initial) audio frequency of the video. This value is relevant when using vc_auto, where the audio frequency would otherwise automatically default to another value.

Example

Set the audio frequency to 96000 Hz (af_96000):

Ruby:
Copy to clipboard
cl_video_tag("dog", :audio_frequency=>"96000")
PHP v1:
Copy to clipboard
cl_video_tag("dog", array("audio_frequency"=>"96000"))
PHP v2:
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->transcode(Transcode::audioFrequency(96000));
Python:
Copy to clipboard
CloudinaryVideo("dog").video(audio_frequency="96000")
Node.js:
Copy to clipboard
cloudinary.video("dog", {audio_frequency: "96000"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().audioFrequency("96000")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {audioFrequency: "96000"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {audio_frequency: "96000"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation audioFrequency="96000" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation audioFrequency="96000" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation audio-frequency="96000">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AudioFrequency("96000")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAudioFrequency("96000")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().audioFrequency("96000")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
publicId("dog.mp4")
transcode(Transcode.audioFrequency(96000))}.generate()

ar (aspect ratio)

 ar_<ratio value>

A qualifier that crops or resizes the asset to a new aspect ratio, for use with a crop/resize mode that determines how the asset is adjusted to the new dimensions.

Use with: c (crop/resize)

Learn more: Setting the resize dimensions

See also: h (height) | w (width) | Arithmetic expressions

Value Type Description
ratio value string | float Required. The aspect ratio to apply. Can be set as either:

  • A string value in the form a:b, where a is the width and b is the height (e.g., 16:9).
  • A decimal value representing the width divided by the height (e.g., 0.5).

Examples

  1. Crop an image to an aspect ratio of 1.5 (ar_1.5):

    Ruby:
    Copy to clipboard
    cl_image_tag("sample.jpg", :aspect_ratio=>"1.5", :crop=>"crop")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sample.jpg", array("aspect_ratio"=>"1.5", "crop"=>"crop"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sample.jpg'))
      ->resize(Resize::crop()->aspectRatio(1.5));
    Python:
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(aspect_ratio="1.5", crop="crop")
    Node.js:
    Copy to clipboard
    cloudinary.image("sample.jpg", {aspect_ratio: "1.5", crop: "crop"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().aspectRatio("1.5").crop("crop")).imageTag("sample.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {aspectRatio: "1.5", crop: "crop"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {aspect_ratio: "1.5", crop: "crop"})
    React:
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation aspectRatio="1.5" crop="crop" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sample.jpg" >
      <cld-transformation aspectRatio="1.5" crop="crop" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation aspect-ratio="1.5" crop="crop">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.5").Crop("crop")).BuildImageTag("sample.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.5").setCrop("crop")).generate("sample.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().aspectRatio("1.5").crop("crop")).generate("sample.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sample.jpg")
    resize(Resize.crop() {
    aspectRatio(1.5f)
    })}.generate()
    Aspect ratio 1.5

  2. Fill a video to an aspect ratio of 1:1 (ar_1:1):

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :aspect_ratio=>"1:1", :crop=>"fill")
    PHP v1:
    Copy to clipboard
    cl_video_tag("dog", array("aspect_ratio"=>"1:1", "crop"=>"fill"))
    PHP v2:
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->resize(Resize::fill()->aspectRatio(AspectRatio::ar1X1()));
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(aspect_ratio="1:1", crop="fill")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {aspect_ratio: "1:1", crop: "fill"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().aspectRatio("1:1").crop("fill")).videoTag("dog");
    JS:
    Copy to clipboard
    cloudinary.videoTag('dog', {aspectRatio: "1:1", crop: "fill"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {aspect_ratio: "1:1", crop: "fill"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation aspectRatio="1:1" crop="fill" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video publicId="dog" >
      <cld-transformation aspectRatio="1:1" crop="fill" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation aspect-ratio="1:1" crop="fill">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("1:1").Crop("fill")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("1:1").setCrop("fill")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().aspectRatio("1:1").crop("fill")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
    publicId("dog.mp4")
    resize(Resize.fill() {
    aspectRatio(AspectRatio.ar1X1())
    })}.generate()

b (background)

 

Applies a background to empty or transparent areas.

<color value>

 b_<color value>

Applies the specified background color on transparent background areas in an image.

Can also be used as a qualifier to override the default background color for padded cropping, text overlays and generated waveform images.

As a qualifier, use with: c_fill_pad | c_lpad | c_mpad | c_pad | l_subtitles | l_text | fl_waveform

Learn more: Background color for images | Background color for videos

Value Type Description
color value string Required. The background color to apply. It can be set as:

  • A 3- or 4-digit RGB/RGBA hex
  • An RGB or RGBA hex triplet or quadruplet (6 or 8 digits).
  • A named color
When specifying any RGB or RGBA value, always prefix the value in the URL with rgb: (without #). For example, b_rgb:FEB61FC2 or b_rgb:999.

When using a named color, specify only the color name. For example b_blue.

Examples

  1. Convert the transparent background of the car_white image to a light-blue color (b_lightblue):
    Ruby:
    Copy to clipboard
    cl_image_tag("car_white.png", :background=>"lightblue")
    PHP v1:
    Copy to clipboard
    cl_image_tag("car_white.png", array("background"=>"lightblue"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('car_white.png'))
      ->backgroundColor(Color::LIGHTBLUE);
    Python:
    Copy to clipboard
    CloudinaryImage("car_white.png").image(background="lightblue")
    Node.js:
    Copy to clipboard
    cloudinary.image("car_white.png", {background: "lightblue"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().background("lightblue")).imageTag("car_white.png");
    JS:
    Copy to clipboard
    cloudinary.imageTag('car_white.png', {background: "lightblue"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("car_white.png", {background: "lightblue"})
    React:
    Copy to clipboard
    <Image publicId="car_white.png" >
      <Transformation background="lightblue" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="car_white.png" >
      <cld-transformation background="lightblue" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="car_white.png" >
      <cl-transformation background="lightblue">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("lightblue")).BuildImageTag("car_white.png")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("lightblue")).generate("car_white.png")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().background("lightblue")).generate("car_white.png");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("car_white.png")
    backgroundColor(Color.LIGHTBLUE)}.generate()
    Convert the transparent areas of an image to the specified color
  2. Scale to fit an image into a 300X300 square and pad any excess space with a pink background (b_pink):

    Ruby:
    Copy to clipboard
    cl_image_tag("sample.jpg", :width=>150, :height=>150, :background=>"pink", :crop=>"pad")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sample.jpg", array("width"=>150, "height"=>150, "background"=>"pink", "crop"=>"pad"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sample.jpg'))
      ->resize(Resize::pad()->width(150)->height(150)
        ->background(Background::color(Color::PINK)));
    Python:
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(width=150, height=150, background="pink", crop="pad")
    Node.js:
    Copy to clipboard
    cloudinary.image("sample.jpg", {width: 150, height: 150, background: "pink", crop: "pad"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().width(150).height(150).background("pink").crop("pad")).imageTag("sample.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {width: 150, height: 150, background: "pink", crop: "pad"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {width: 150, height: 150, background: "pink", crop: "pad"})
    React:
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation width="150" height="150" background="pink" crop="pad" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sample.jpg" >
      <cld-transformation width="150" height="150" background="pink" crop="pad" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation width="150" height="150" background="pink" crop="pad">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Background("pink").Crop("pad")).BuildImageTag("sample.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setBackground("pink").setCrop("pad")).generate("sample.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().width(150).height(150).background("pink").crop("pad")).generate("sample.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sample.jpg")
    resize(Resize.pad() {
    width(150)
    height(150)
    background(Background.color(Color.PINK))
    })}.generate()
    green background

  3. Add a semi-transparent yellow background color to a text overlay (l_text:Arial_100:Flowers,co_yellow,b_rgb:FEB61FC2)

    Ruby:
    Copy to clipboard
    cl_image_tag("flower.jpg", :transformation=>[
      {:width=>400, :crop=>"scale"},
      {:overlay=>{:font_family=>"Arial", :font_size=>100, :text=>"Flowers"}, :color=>"yellow", :background=>"#FEB61FC2"}
      ])
    PHP v1:
    Copy to clipboard
    cl_image_tag("flower.jpg", array("transformation"=>array(
      array("width"=>400, "crop"=>"scale"),
      array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "text"=>"Flowers"), "color"=>"yellow", "background"=>"#FEB61FC2")
      )))
    PHP v2:
    Copy to clipboard
    (new ImageTag('flower.jpg'))
      ->resize(Resize::scale()->width(400))
      ->overlay(
          Overlay::source(Source::text('Flowers', (new TextStyle('Arial', 100)))
            ->textColor(Color::YELLOW)
            ->backgroundColor(Color::rgb('FEB61FC2'))
      ));
    Python:
    Copy to clipboard
    CloudinaryImage("flower.jpg").image(transformation=[
      {'width': 400, 'crop': "scale"},
      {'overlay': {'font_family': "Arial", 'font_size': 100, 'text': "Flowers"}, 'color': "yellow", 'background': "#FEB61FC2"}
      ])
    Node.js:
    Copy to clipboard
    cloudinary.image("flower.jpg", {transformation: [
      {width: 400, crop: "scale"},
      {overlay: {font_family: "Arial", font_size: 100, text: "Flowers"}, color: "yellow", background: "#FEB61FC2"}
      ]})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation()
      .width(400).crop("scale").chain()
      .overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Flowers")).color("yellow").background("#FEB61FC2")).imageTag("flower.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('flower.jpg', {transformation: [
      {width: 400, crop: "scale"},
      {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Flowers"), color: "yellow", background: "#FEB61FC2"}
      ]}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("flower.jpg", {transformation: [
      {width: 400, crop: "scale"},
      {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Flowers"), color: "yellow", background: "#FEB61FC2"}
      ]})
    React:
    Copy to clipboard
    <Image publicId="flower.jpg" >
      <Transformation width="400" crop="scale" />
      <Transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "Flowers"}} color="yellow" background="#FEB61FC2" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="flower.jpg" >
      <cld-transformation width="400" crop="scale" />
      <cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 100, text: 'Flowers'}" color="yellow" background="#FEB61FC2" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="flower.jpg" >
      <cl-transformation width="400" crop="scale">
      </cl-transformation>
      <cl-transformation overlay="text:Arial_100:Flowers" color="yellow" background="#FEB61FC2">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation()
      .Width(400).Crop("scale").Chain()
      .Overlay(new TextLayer().FontFamily("Arial").FontSize(100).Text("Flowers")).Color("yellow").Background("#FEB61FC2")).BuildImageTag("flower.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
      .setWidth(400).setCrop("scale").chain()
      .setOverlay("text:Arial_100:Flowers").setColor("yellow").setBackground("#FEB61FC2")).generate("flower.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation()
      .width(400).crop("scale").chain()
      .overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Flowers")).color("yellow").background("#FEB61FC2")).generate("flower.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("flower.jpg")
    resize(Resize.scale() {
    width(400)
    })
    overlay(Overlay.source(Source.text("Flowers", TextStyle("Arial", 100)) {
    textColor(Color.YELLOW)
    backgroundColor(Color.rgb("#FEB61FC2"))
    }))}.generate()
    Add a background color to a text overlay

auto

 b_auto[:<mode>][:<number>][:<direction>][:palette_<color 1>[_..._<color n>]]

A qualifier that automatically selects the background color based on one or more predominant colors in the image, for use with one of the padding crop mode transformations.

Learn more: Content-aware padding

Use with: c_pad | c_lpad | c_mpad | c_fill_pad

Value Type Description
mode constant The method to use for determining the solid or gradient color(s) to apply.

Possible values:

To automatically set the background to a single color:

  • border: Selects the predominant color, taking only the image border pixels into account.
  • predominant: Selects the predominant color while taking all pixels in the image into account.
  • border_contrast: Selects the strongest contrasting color to the predominant color, taking only the image border pixels into account.
  • predominant_contrast: Selects the strongest contrasting color to the predominant color while taking all pixels in the image into account.
To automatically apply a gradient fade to the background with multiple colors:

  • predominant_gradient: Bases the gradient fade effect on the predominant colors in the image.
  • predominant_gradient_contrast: Bases the gradient fade effect on the colors that contrast the predominant colors in the image.
  • border_gradient: Bases the gradient fade effect on the predominant colors in the border pixels of the image.
  • border_gradient_contrast: Bases the gradient fade effect on the colors that contrast the predominant colors in the border pixels of the image.
Default: border.
number integer Relevant only when setting mode to one of the 'gradient' options. The number of predominant colors to select.

Possible values: 2, 4.

Default: 2.

direction constant Relevant only when setting mode to one of the 'gradient' options and when 2 colors are selected for the number option. Specifies the direction to blend the 2 colors together. (If 4 colors are selected, each gets interpolated between the four corners and this parameter is ignored.)

Possible values: horizontal, vertical, diagonal_desc, diagonal_asc.

Default: horizontal.

color 1 to color n string The palette of colors to use in the border. For each color, specify either:

  • A 3- or 4-digit RGB/RGBA hex (e.g. f00)
  • An RGB or RGBA hex triplet or quadruplet (6 or 8 digits) (e.g. f2086a)
  • A named color (e.g. blue)

Examples

  1. Pad an image to a width and height of 150 pixels, and with the background color set to the predominant color from that image (b_auto:predominant):

    Ruby:
    Copy to clipboard
    cl_image_tag("sheep.jpg", :height=>150, :width=>150, :background=>"auto:predominant", :crop=>"pad")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sheep.jpg", array("height"=>150, "width"=>150, "background"=>"auto:predominant", "crop"=>"pad"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sheep.jpg'))
      ->resize(Resize::pad()->width(150)->height(150)
        ->background(Background::predominant()));
    Python:
    Copy to clipboard
    CloudinaryImage("sheep.jpg").image(height=150, width=150, background="auto:predominant", crop="pad")
    Node.js:
    Copy to clipboard
    cloudinary.image("sheep.jpg", {height: 150, width: 150, background: "auto:predominant", crop: "pad"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().height(150).width(150).background("auto:predominant").crop("pad")).imageTag("sheep.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sheep.jpg', {height: 150, width: 150, background: "auto:predominant", crop: "pad"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sheep.jpg", {height: 150, width: 150, background: "auto:predominant", crop: "pad"})
    React:
    Copy to clipboard
    <Image publicId="sheep.jpg" >
      <Transformation height="150" width="150" background="auto:predominant" crop="pad" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sheep.jpg" >
      <cld-transformation height="150" width="150" background="auto:predominant" crop="pad" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sheep.jpg" >
      <cl-transformation height="150" width="150" background="auto:predominant" crop="pad">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(150).Width(150).Background("auto:predominant").Crop("pad")).BuildImageTag("sheep.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(150).setWidth(150).setBackground("auto:predominant").setCrop("pad")).generate("sheep.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().height(150).width(150).background("auto:predominant").crop("pad")).generate("sheep.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sheep.jpg")
    resize(Resize.pad() {
    width(150)
    height(150)
    background(Background.predominant())
    })}.generate()
    predominant background

  2. Pad an image to a width and height of 150 pixels, and with the background color set to the 2 most predominant colors from that image, blended in a diagonally descending direction (b_auto:predominant_gradient:2:diagonal_desc):

    Ruby:
    Copy to clipboard
    cl_image_tag("sheep.jpg", :height=>150, :width=>150, :background=>"auto:predominant_gradient:2:diagonal_desc", :crop=>"pad")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sheep.jpg", array("height"=>150, "width"=>150, "background"=>"auto:predominant_gradient:2:diagonal_desc", "crop"=>"pad"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sheep.jpg'))
      ->resize(Resize::pad()->width(150)->height(150)
        ->background(Background::predominantGradient()
          ->gradientDirection(GradientDirection::diagonalDesc())
          ->gradientColors(2)));
    Python:
    Copy to clipboard
    CloudinaryImage("sheep.jpg").image(height=150, width=150, background="auto:predominant_gradient:2:diagonal_desc", crop="pad")
    Node.js:
    Copy to clipboard
    cloudinary.image("sheep.jpg", {height: 150, width: 150, background: "auto:predominant_gradient:2:diagonal_desc", crop: "pad"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().height(150).width(150).background("auto:predominant_gradient:2:diagonal_desc").crop("pad")).imageTag("sheep.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sheep.jpg', {height: 150, width: 150, background: "auto:predominant_gradient:2:diagonal_desc", crop: "pad"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sheep.jpg", {height: 150, width: 150, background: "auto:predominant_gradient:2:diagonal_desc", crop: "pad"})
    React:
    Copy to clipboard
    <Image publicId="sheep.jpg" >
      <Transformation height="150" width="150" background="auto:predominant_gradient:2:diagonal_desc" crop="pad" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sheep.jpg" >
      <cld-transformation height="150" width="150" background="auto:predominant_gradient:2:diagonal_desc" crop="pad" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sheep.jpg" >
      <cl-transformation height="150" width="150" background="auto:predominant_gradient:2:diagonal_desc" crop="pad">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(150).Width(150).Background("auto:predominant_gradient:2:diagonal_desc").Crop("pad")).BuildImageTag("sheep.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(150).setWidth(150).setBackground("auto:predominant_gradient:2:diagonal_desc").setCrop("pad")).generate("sheep.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().height(150).width(150).background("auto:predominant_gradient:2:diagonal_desc").crop("pad")).generate("sheep.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sheep.jpg")
    resize(Resize.pad() {
    width(150)
    height(150)
    background(Background.predominantGradient() {
    gradientDirection(GradientDirection.diagonalDesc())
    gradientColors(2)
    })
    })}.generate()
    predominant gradient background

  3. Pad an image to a width and height of 150 pixels, with a 4 color gradient fade in the auto colored padding, and limiting the possible colors to red, green, blue, and orange (b_auto:predominant_gradient:4:palette_f00_green_blue_orange):

    Ruby:
    Copy to clipboard
    cl_image_tag("horse.jpg", :height=>150, :width=>150, :background=>"auto:predominant_gradient:4:palette_f00_green_blue_orange", :crop=>"pad")
    PHP v1:
    Copy to clipboard
    cl_image_tag("horse.jpg", array("height"=>150, "width"=>150, "background"=>"auto:predominant_gradient:4:palette_f00_green_blue_orange", "crop"=>"pad"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('horse.jpg'))
      ->resize(Resize::pad()->width(150)->height(150)
        ->background(Background::predominantGradient()->gradientColors(4)
          ->palette(Color::F00, Color::GREEN, Color::BLUE, Color::ORANGE)));
    Python:
    Copy to clipboard
    CloudinaryImage("horse.jpg").image(height=150, width=150, background="auto:predominant_gradient:4:palette_f00_green_blue_orange", crop="pad")
    Node.js:
    Copy to clipboard
    cloudinary.image("horse.jpg", {height: 150, width: 150, background: "auto:predominant_gradient:4:palette_f00_green_blue_orange", crop: "pad"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().height(150).width(150).background("auto:predominant_gradient:4:palette_f00_green_blue_orange").crop("pad")).imageTag("horse.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('horse.jpg', {height: 150, width: 150, background: "auto:predominant_gradient:4:palette_f00_green_blue_orange", crop: "pad"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("horse.jpg", {height: 150, width: 150, background: "auto:predominant_gradient:4:palette_f00_green_blue_orange", crop: "pad"})
    React:
    Copy to clipboard
    <Image publicId="horse.jpg" >
      <Transformation height="150" width="150" background="auto:predominant_gradient:4:palette_f00_green_blue_orange" crop="pad" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="horse.jpg" >
      <cld-transformation height="150" width="150" background="auto:predominant_gradient:4:palette_f00_green_blue_orange" crop="pad" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="horse.jpg" >
      <cl-transformation height="150" width="150" background="auto:predominant_gradient:4:palette_f00_green_blue_orange" crop="pad">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(150).Width(150).Background("auto:predominant_gradient:4:palette_f00_green_blue_orange").Crop("pad")).BuildImageTag("horse.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(150).setWidth(150).setBackground("auto:predominant_gradient:4:palette_f00_green_blue_orange").setCrop("pad")).generate("horse.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().height(150).width(150).background("auto:predominant_gradient:4:palette_f00_green_blue_orange").crop("pad")).generate("horse.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("horse.jpg")
    resize(Resize.pad() {
    width(150)
    height(150)
    background(Background.predominantGradient() {
    gradientColors(4)
    palette(Color.F00, Color.GREEN, Color.BLUE, Color.ORANGE)
    })
    })}.generate()
    predominant gradient background with color palette

blurred

 b_blurred[:<intensity>][:<brightness>]

A qualifier that generates a blurred version of the same video to use as the background with the corresponding padded cropping transformation.

Use with: c_pad | c_fill_pad

Learn more: Pad with blurred video background

Value Type Description
intensity integer The amount of blurring.
Range: 1 to 2000. Default: 100.
brightness integer The brightness of the blurred background video.
Range: -300 to 100. Default: 0.

Example

Pad a portrait video with a blurred background of that same video at an intensity of 300 and a brightness of 15 (b_blurred:300:15):

Ruby:
Copy to clipboard
cl_video_tag("cld_rubiks_guy", :transformation=>[
  {:height=>320, :crop=>"scale"},
  {:height=>320, :width=>480, :background=>"blurred:400:15", :crop=>"pad"},
  {:effect=>"volume:mute"},
  {:effect=>"accelerate:100"}
  ])
PHP v1:
Copy to clipboard
cl_video_tag("cld_rubiks_guy", array("transformation"=>array(
  array("height"=>320, "crop"=>"scale"),
  array("height"=>320, "width"=>480, "background"=>"blurred:400:15", "crop"=>"pad"),
  array("effect"=>"volume:mute"),
  array("effect"=>"accelerate:100")
  )))
PHP v2:
Copy to clipboard
(new VideoTag('cld_rubiks_guy.mp4'))
  ->resize(Resize::scale()->height(320))
  ->resize(Resize::pad()->width(480)->height(320)
    ->background(Background::blurred()->intensity(400)->brightness(15)))
  ->videoEdit(VideoEdit::volume(Volume::mute()))
  ->effect(Effect::accelerate()->rate(100));
Python:
Copy to clipboard
CloudinaryVideo("cld_rubiks_guy").video(transformation=[
  {'height': 320, 'crop': "scale"},
  {'height': 320, 'width': 480, 'background': "blurred:400:15", 'crop': "pad"},
  {'effect': "volume:mute"},
  {'effect': "accelerate:100"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("cld_rubiks_guy", {transformation: [
  {height: 320, crop: "scale"},
  {height: 320, width: 480, background: "blurred:400:15", crop: "pad"},
  {effect: "volume:mute"},
  {effect: "accelerate:100"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .height(320).crop("scale").chain()
  .height(320).width(480).background("blurred:400:15").crop("pad").chain()
  .effect("volume:mute").chain()
  .effect("accelerate:100")).videoTag("cld_rubiks_guy");
JS:
Copy to clipboard
cloudinary.videoTag('cld_rubiks_guy', {transformation: [
  {height: 320, crop: "scale"},
  {height: 320, width: 480, background: "blurred:400:15", crop: "pad"},
  {effect: "volume:mute"},
  {effect: "accelerate:100"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("cld_rubiks_guy", {transformation: [
  {height: 320, crop: "scale"},
  {height: 320, width: 480, background: "blurred:400:15", crop: "pad"},
  {effect: "volume:mute"},
  {effect: "accelerate:100"}
  ]})
React:
Copy to clipboard
<Video publicId="cld_rubiks_guy" >
  <Transformation height="320" crop="scale" />
  <Transformation height="320" width="480" background="blurred:400:15" crop="pad" />
  <Transformation effect="volume:mute" />
  <Transformation effect="accelerate:100" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="cld_rubiks_guy" >
  <cld-transformation height="320" crop="scale" />
  <cld-transformation height="320" width="480" background="blurred:400:15" crop="pad" />
  <cld-transformation effect="volume:mute" />
  <cld-transformation effect="accelerate:100" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="cld_rubiks_guy" >
  <cl-transformation height="320" crop="scale">
  </cl-transformation>
  <cl-transformation height="320" width="480" background="blurred:400:15" crop="pad">
  </cl-transformation>
  <cl-transformation effect="volume:mute">
  </cl-transformation>
  <cl-transformation effect="accelerate:100">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Height(320).Crop("scale").Chain()
  .Height(320).Width(480).Background("blurred:400:15").Crop("pad").Chain()
  .Effect("volume:mute").Chain()
  .Effect("accelerate:100")).BuildVideoTag("cld_rubiks_guy")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setHeight(320).setCrop("scale").chain()
  .setHeight(320).setWidth(480).setBackground("blurred:400:15").setCrop("pad").chain()
  .setEffect("volume:mute").chain()
  .setEffect("accelerate:100")).generate("cld_rubiks_guy.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .height(320).crop("scale").chain()
  .height(320).width(480).background("blurred:400:15").crop("pad").chain()
  .effect("volume:mute").chain()
  .effect("accelerate:100")).resourceType("video").generate("cld_rubiks_guy.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
publicId("cld_rubiks_guy.mp4")
resize(Resize.scale() {
height(320)
})
resize(Resize.pad() {
width(480)
height(320)
background(Background.blurred() {
intensity(400)
brightness(15)
})
})
videoEdit(VideoEdit.volume(Volume.mute()))
effect(Effect.accelerate() {
rate(100)
})}.generate()

bo (border)

 bo_<width>_<style>_<color>

Adds a solid border around an image or video.

As a qualifier, adds a border to an overlay.

Use with: l_<image id> | l_fetch | l_subtitles | l_text | l_video

Learn more: Adding borders

Value Type Description
width string Required. The width of the border in pixels (e.g., 40px).
style string Required. Currently, only solid is supported for style.
color string Required. The color can be set as:

  • A 3- or 4-digit RGB/RGBA hex
  • An RGB or RGBA hex triplet or quadruplet (6 or 8 digits).
  • A named color

When specifying any RGB or RGBA value, always prefix the color value in the URL with rgb: (without #). For example, bo_5px_solid_rgb:999 or bo_5px_solid_rgb:FEB61FC2.

When using a named color, specify only the color name. For example bo_5px_solid_blue.

Examples

  1. Add a 40-pixel wide brown border to the image (bo_40px_solid_brown):

    Ruby:
    Copy to clipboard
    cl_image_tag("autumn_leaves.jpg", :border=>"40px_solid_brown")
    PHP v1:
    Copy to clipboard
    cl_image_tag("autumn_leaves.jpg", array("border"=>"40px_solid_brown"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('autumn_leaves.jpg'))
      ->border(Border::solid(40, Color::BROWN));
    Python:
    Copy to clipboard
    CloudinaryImage("autumn_leaves.jpg").image(border="40px_solid_brown")
    Node.js:
    Copy to clipboard
    cloudinary.image("autumn_leaves.jpg", {border: "40px_solid_brown"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().border("40px_solid_brown")).imageTag("autumn_leaves.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('autumn_leaves.jpg', {border: "40px_solid_brown"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("autumn_leaves.jpg", {border: "40px_solid_brown"})
    React:
    Copy to clipboard
    <Image publicId="autumn_leaves.jpg" >
      <Transformation border="40px_solid_brown" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="autumn_leaves.jpg" >
      <cld-transformation border="40px_solid_brown" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="autumn_leaves.jpg" >
      <cl-transformation border="40px_solid_brown">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("40px_solid_brown")).BuildImageTag("autumn_leaves.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBorder("40px_solid_brown")).generate("autumn_leaves.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().border("40px_solid_brown")).generate("autumn_leaves.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("autumn_leaves.jpg")
    border(Border.solid(40, Color.BROWN))}.generate()
    A 40 pixels wide brown border

  2. Add a 60-pixel wide border of a semi transparent (RGBA hex quadruplet) color - the last 2 digits are the hex value of the alpha channel (bo_60px_solid_rgb:00390b60):

    Ruby:
    Copy to clipboard
    cl_image_tag("autumn_leaves.jpg", :border=>"60px_solid_rgb:00390b60")
    PHP v1:
    Copy to clipboard
    cl_image_tag("autumn_leaves.jpg", array("border"=>"60px_solid_rgb:00390b60"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('autumn_leaves.jpg'))
      ->border(Border::solid(60, Color::rgb('00390b60')));
    Python:
    Copy to clipboard
    CloudinaryImage("autumn_leaves.jpg").image(border="60px_solid_rgb:00390b60")
    Node.js:
    Copy to clipboard
    cloudinary.image("autumn_leaves.jpg", {border: "60px_solid_rgb:00390b60"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().border("60px_solid_rgb:00390b60")).imageTag("autumn_leaves.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('autumn_leaves.jpg', {border: "60px_solid_rgb:00390b60"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("autumn_leaves.jpg", {border: "60px_solid_rgb:00390b60"})
    React:
    Copy to clipboard
    <Image publicId="autumn_leaves.jpg" >
      <Transformation border="60px_solid_rgb:00390b60" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="autumn_leaves.jpg" >
      <cld-transformation border="60px_solid_rgb:00390b60" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="autumn_leaves.jpg" >
      <cl-transformation border="60px_solid_rgb:00390b60">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("60px_solid_rgb:00390b60")).BuildImageTag("autumn_leaves.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBorder("60px_solid_rgb:00390b60")).generate("autumn_leaves.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().border("60px_solid_rgb:00390b60")).generate("autumn_leaves.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("autumn_leaves.jpg")
    border(Border.solid(60, Color.rgb("#00390b60")))}.generate()
    A 60 pixels wide border of a semi transparent RGB color

br (bitrate)

 br_<bitrate value>[:constant]

Controls the video bitrate in bits per second. By default, the video uses a variable bitrate (VBR), with this value indicating the maximum bitrate. Supported for codecs: h264, h265 (MPEG-4); vp8, vp9 (WebM)

Learn more: Video settings

Value Type Description
bitrate value integer | string Required. The maximum number of bits per second (e.g., 500000). Can also be specified as a string, supporting k and m for kilobits and megabits respectively (e.g., 500k or 1m).
constant keyword If constant is specified, the video plays with a constant bitrate (CBR) and the default quality setting (or any q (quality) setting explicitly specified) is ignored.

Examples

  1. Set a maximum bitrate of 500000 (br_500000):

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :bit_rate=>"500000")
    PHP v1:
    Copy to clipboard
    cl_video_tag("dog", array("bit_rate"=>"500000"))
    PHP v2:
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->transcode(Transcode::bitRate(500000));
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(bit_rate="500000")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {bit_rate: "500000"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().bitRate("500000")).videoTag("dog");
    JS:
    Copy to clipboard
    cloudinary.videoTag('dog', {bitRate: "500000"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {bit_rate: "500000"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation bitRate="500000" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video publicId="dog" >
      <cld-transformation bitRate="500000" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation bit-rate="500000">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().BitRate("500000")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBitRate("500000")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().bitRate("500000")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
    publicId("dog.mp4")
    transcode(Transcode.bitRate(500000))}.generate()

  2. Set a constant bitrate of 500k (br_500k:constant):

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :bit_rate=>"500k:constant")
    PHP v1:
    Copy to clipboard
    cl_video_tag("dog", array("bit_rate"=>"500k:constant"))
    PHP v2:
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->transcode(Transcode::bitRate('500k')->constant());
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(bit_rate="500k:constant")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {bit_rate: "500k:constant"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().bitRate("500k:constant")).videoTag("dog");
    JS:
    Copy to clipboard
    cloudinary.videoTag('dog', {bitRate: "500k:constant"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {bit_rate: "500k:constant"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation bitRate="500k:constant" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video publicId="dog" >
      <cld-transformation bitRate="500k:constant" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation bit-rate="500k:constant">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().BitRate("500k:constant")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBitRate("500k:constant")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().bitRate("500k:constant")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
    publicId("dog.mp4")
    transcode(Transcode.bitRate("500k") {
    constant()
    })}.generate()

c (crop/resize)

 

Changes the size of the delivered asset according to the requested width & height dimensions.

Depending on the selected <crop mode>, parts of the original asset may be cropped out and/or the asset may be resized (scaled up or down).

When using any of the modes that can potentially crop parts of the asset, the selected gravity parameter controls which part of the original asset is kept in the resulting delivered file.

Learn more: Resizing and cropping images | Resizing and cropping videos

crop

 c_crop

Extracts the specified size from the original image without distorting or scaling the delivered asset.

By default, the center of the image is kept (extracted) and the top/bottom and/or side edges are evenly cropped to achieve the requested dimensions. You can specify the gravity qualifier to control which part of the image to keep, either as a compass direction (such as south or north_east), one of the special gravity positions (such as faces or ocr_text), AI-based automatic region detection or AI-based object detection.

You can also specify a specific region of the original image to keep by specifying x and y qualifiers together with w (width) and h (height) qualifiers to define an exact bounding box. When using this method, and no gravity is specified, the x and y coordinates are relative to the top-left (north-west) corner of the original asset. You can also use percentage based numbers instead of the exact coordinates for x, y, w and h (e.g., 0.5 for 50%). Use this method only when you already have the required absolute cropping coordinates. For example, you might use this if your application allows a user to upload user-generated content, and your application allows the user to manually select a region to crop from the original image, and you pass those coordinates to build the crop URL.

Required qualifiers

Two of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Optional qualifiers

g (gravity)> | x (x-coordinate) | y (y-coordinate)

Example

Crop an image to a width of 200 pixels, a height of 150 pixels, with northwest gravity (w_200,h_150,c_crop,g_north_west):

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :width=>200, :height=>150, :gravity=>"north_west", :crop=>"crop")
PHP v1:
Copy to clipboard
cl_image_tag("sample.jpg", array("width"=>200, "height"=>150, "gravity"=>"north_west", "crop"=>"crop"))
PHP v2:
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->resize(Resize::crop()->width(200)->height(150)
    ->gravity(Gravity::compass(Compass::northWest())));
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(width=200, height=150, gravity="north_west", crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {width: 200, height: 150, gravity: "north_west", crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(200).height(150).gravity("north_west").crop("crop")).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {width: 200, height: 150, gravity: "north_west", crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {width: 200, height: 150, gravity: "north_west", crop: "crop"})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation width="200" height="150" gravity="north_west" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation width="200" height="150" gravity="north_west" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation width="200" height="150" gravity="north_west" crop="crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(150).Gravity("north_west").Crop("crop")).BuildImageTag("sample.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(150).setGravity("north_west").setCrop("crop")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(200).height(150).gravity("north_west").crop("crop")).generate("sample.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("sample.jpg")
resize(Resize.crop() {
width(200)
height(150)
gravity(Gravity.compass(Compass.northWest()))
})}.generate()
Image cropped to 100x150 with west gravity

fill

 c_fill

Creates an asset with the exact specified width and height without distorting the asset. This option first scales as much as needed to at least fill both of the specified dimensions. If the requested aspect ratio is different than the original, cropping will occur on the dimension that exceeds the requested size after scaling. You can specify which part of the original asset you want to keep if cropping occurs using the gravity (set to 'center' by default).

Required qualifiers

At least one of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Optional qualifiers

g (gravity)

Examples

  1. Fill to a width and height of 150 pixels (w_150,h_150,c_fill):

    Ruby:
    Copy to clipboard
    cl_image_tag("sample.jpg", :width=>150, :height=>150, :crop=>"fill")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sample.jpg", array("width"=>150, "height"=>150, "crop"=>"fill"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sample.jpg'))
      ->resize(Resize::fill()->width(150)->height(150));
    Python:
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(width=150, height=150, crop="fill")
    Node.js:
    Copy to clipboard
    cloudinary.image("sample.jpg", {width: 150, height: 150, crop: "fill"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().width(150).height(150).crop("fill")).imageTag("sample.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {width: 150, height: 150, crop: "fill"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {width: 150, height: 150, crop: "fill"})
    React:
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation width="150" height="150" crop="fill" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sample.jpg" >
      <cld-transformation width="150" height="150" crop="fill" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation width="150" height="150" crop="fill">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Crop("fill")).BuildImageTag("sample.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().width(150).height(150).crop("fill")).generate("sample.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sample.jpg")
    resize(Resize.fill() {
    width(150)
    height(150)
    })}.generate()
    Image filled to a width and height of 150 pixels

  2. Fill to a width and height of 150 pixels with east gravity (w_150,h_150,c_fill,g_east):

    Ruby:
    Copy to clipboard
    cl_image_tag("sample.jpg", :width=>150, :height=>150, :gravity=>"east", :crop=>"fill")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sample.jpg", array("width"=>150, "height"=>150, "gravity"=>"east", "crop"=>"fill"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sample.jpg'))
      ->resize(Resize::fill()->width(150)->height(150)
        ->gravity(Gravity::compass(Compass::east())));
    Python:
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(width=150, height=150, gravity="east", crop="fill")
    Node.js:
    Copy to clipboard
    cloudinary.image("sample.jpg", {width: 150, height: 150, gravity: "east", crop: "fill"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().width(150).height(150).gravity("east").crop("fill")).imageTag("sample.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {width: 150, height: 150, gravity: "east", crop: "fill"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {width: 150, height: 150, gravity: "east", crop: "fill"})
    React:
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation width="150" height="150" gravity="east" crop="fill" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sample.jpg" >
      <cld-transformation width="150" height="150" gravity="east" crop="fill" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation width="150" height="150" gravity="east" crop="fill">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Gravity("east").Crop("fill")).BuildImageTag("sample.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setGravity("east").setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().width(150).height(150).gravity("east").crop("fill")).generate("sample.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sample.jpg")
    resize(Resize.fill() {
    width(150)
    height(150)
    gravity(Gravity.compass(Compass.east()))
    })}.generate()
    Image filled to a width and height of 150 pixels with east gravity

fill_pad

 c_fill_pad

Tries to prevent a "bad crop" by first attempting to use the fill mode, but adding some padding if the algorithm determines that more of the original image needs to be included in the final image, or if more content in specific frames in a video should be shown. Especially useful if the aspect ratio of the delivered asset is considerably different from the original's aspect ratio. Supported only in conjunction with g_auto.

Required qualifiers

g_auto

    And

Two of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Optional qualifiers

b (background)

Example

Deliver an image as a 25x150 image using the fill_pad mode. (w_25,h_150,c_fill_pad,g_auto,b_auto).
Compare this to the same image delivered using the regular fill mode (shown below on the right).

fill_pad fill_pad fill fill

Ruby:
Copy to clipboard
cl_image_tag("lady.jpg", :width=>80, :height=>400, :gravity=>"auto", :background=>"auto", :crop=>"fill_pad")
PHP v1:
Copy to clipboard
cl_image_tag("lady.jpg", array("width"=>80, "height"=>400, "gravity"=>"auto", "background"=>"auto", "crop"=>"fill_pad"))
PHP v2:
Copy to clipboard
(new ImageTag('lady.jpg'))
  ->resize(Resize::fillPad()->width(80)->height(400)
    ->gravity(Gravity::autoGravity())
    ->background(Background::auto()));
Python:
Copy to clipboard
CloudinaryImage("lady.jpg").image(width=80, height=400, gravity="auto", background="auto", crop="fill_pad")
Node.js:
Copy to clipboard
cloudinary.image("lady.jpg", {width: 80, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(80).height(400).gravity("auto").background("auto").crop("fill_pad")).imageTag("lady.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('lady.jpg', {width: 80, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("lady.jpg", {width: 80, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"})
React:
Copy to clipboard
<Image publicId="lady.jpg" >
  <Transformation width="80" height="400" gravity="auto" background="auto" crop="fill_pad" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="lady.jpg" >
  <cld-transformation width="80" height="400" gravity="auto" background="auto" crop="fill_pad" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="lady.jpg" >
  <cl-transformation width="80" height="400" gravity="auto" background="auto" crop="fill_pad">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(80).Height(400).Gravity("auto").Background("auto").Crop("fill_pad")).BuildImageTag("lady.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(80).setHeight(400).setGravity("auto").setBackground("auto").setCrop("fill_pad")).generate("lady.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(80).height(400).gravity("auto").background("auto").crop("fill_pad")).generate("lady.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("lady.jpg")
resize(Resize.fillPad() {
width(80)
height(400)
gravity(Gravity.autoGravity())
background(Background.auto())
})}.generate()

fit

 c_fit

Scales the asset up or down so that it takes up as much space as possible within a bounding box defined by the specified dimension parameters without cropping any of it. The original aspect ratio is retained and all of the original image is visible.

Required qualifiers

Two of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Example

Fit an image within a width and height of 150 pixels (c_fit,h_150,w_150).

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :height=>150, :width=>150, :crop=>"fit")
PHP v1:
Copy to clipboard
cl_image_tag("sample.jpg", array("height"=>150, "width"=>150, "crop"=>"fit"))
PHP v2:
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->resize(Resize::fit()->width(150)->height(150));
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(height=150, width=150, crop="fit")
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {height: 150, width: 150, crop: "fit"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(150).width(150).crop("fit")).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {height: 150, width: 150, crop: "fit"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {height: 150, width: 150, crop: "fit"})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation height="150" width="150" crop="fit" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation height="150" width="150" crop="fit" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation height="150" width="150" crop="fit">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(150).Width(150).Crop("fit")).BuildImageTag("sample.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(150).setWidth(150).setCrop("fit")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(150).width(150).crop("fit")).generate("sample.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("sample.jpg")
resize(Resize.fit() {
width(150)
height(150)
})}.generate()
fit within 150x150

imagga_crop

 c_imagga_crop

Requires the Imagga Crop and Scale add-on.
The Imagga Crop and Scale add-on can be used to smartly crop your images based on areas of interest within each specific photo as automatically calculated by the Imagga algorithm.

Required qualifiers

At least one of the following: w (width) | h (height)

Optional qualifiers

ar (aspect_ratio)

Example

Automatically crop an image with with Imagga cropping (c_imagga_crop):

Ruby:
Copy to clipboard
cl_image_tag("family_bench.jpg", :crop=>"imagga_crop")
PHP v1:
Copy to clipboard
cl_image_tag("family_bench.jpg", array("crop"=>"imagga_crop"))
PHP v2:
Copy to clipboard
(new ImageTag('family_bench.jpg'))
  ->resize(Resize::imaggaCrop());
Python:
Copy to clipboard
CloudinaryImage("family_bench.jpg").image(crop="imagga_crop")
Node.js:
Copy to clipboard
cloudinary.image("family_bench.jpg", {crop: "imagga_crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().crop("imagga_crop")).imageTag("family_bench.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('family_bench.jpg', {crop: "imagga_crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("family_bench.jpg", {crop: "imagga_crop"})
React:
Copy to clipboard
<Image publicId="family_bench.jpg" >
  <Transformation crop="imagga_crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="family_bench.jpg" >
  <cld-transformation crop="imagga_crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="family_bench.jpg" >
  <cl-transformation crop="imagga_crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Crop("imagga_crop")).BuildImageTag("family_bench.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setCrop("imagga_crop")).generate("family_bench.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().crop("imagga_crop")).generate("family_bench.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("family_bench.jpg")
resize(Resize.imaggaCrop())}.generate()
Image with Imagga cropping

imagga_scale

 c_imagga_scale

Requires the Imagga Crop and Scale add-on.
The Imagga Crop and Scale add-on can be used to smartly scale your images based on automatically calculated areas of interest within each specific photo.

Required qualifiers

At least one of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Example

Automatically scale an image with with Imagga scaling and crop if needed (c_imagga_scale,h_150,w_150):

Ruby:
Copy to clipboard
cl_image_tag("sample_van.jpg", :height=>150, :width=>150, :crop=>"imagga_scale")
PHP v1:
Copy to clipboard
cl_image_tag("sample_van.jpg", array("height"=>150, "width"=>150, "crop"=>"imagga_scale"))
PHP v2:
Copy to clipboard
(new ImageTag('sample_van.jpg'))
  ->resize(Resize::imaggaScale()->width(150)->height(150));
Python:
Copy to clipboard
CloudinaryImage("sample_van.jpg").image(height=150, width=150, crop="imagga_scale")
Node.js:
Copy to clipboard
cloudinary.image("sample_van.jpg", {height: 150, width: 150, crop: "imagga_scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(150).width(150).crop("imagga_scale")).imageTag("sample_van.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample_van.jpg', {height: 150, width: 150, crop: "imagga_scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample_van.jpg", {height: 150, width: 150, crop: "imagga_scale"})
React:
Copy to clipboard
<Image publicId="sample_van.jpg" >
  <Transformation height="150" width="150" crop="imagga_scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample_van.jpg" >
  <cld-transformation height="150" width="150" crop="imagga_scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample_van.jpg" >
  <cl-transformation height="150" width="150" crop="imagga_scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(150).Width(150).Crop("imagga_scale")).BuildImageTag("sample_van.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(150).setWidth(150).setCrop("imagga_scale")).generate("sample_van.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(150).width(150).crop("imagga_scale")).generate("sample_van.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("sample_van.jpg")
resize(Resize.imaggaScale() {
width(150)
height(150)
})}.generate()
Image with Imagga scaling

lfill

 c_lfill

The lfill (limit fill) mode is the same as fill but only if the original image is larger than the specified resolution limits, in which case the image is scaled down to fill the specified width and height without distorting the image, and then the dimension that exceeds the request is cropped. If the original dimensions are smaller than the requested size, it is not resized at all. This prevents upscaling. You can specify which part of the original image you want to keep if cropping occurs using the gravity parameter (set to center by default).

Required qualifiers

Two of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Optional qualifiers

g (gravity)

Example

Limit-fill an image to a width and height of 150 pixels (w_150,h_150,c_lfill):

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :width=>150, :height=>150, :crop=>"lfill")
PHP v1:
Copy to clipboard
cl_image_tag("sample.jpg", array("width"=>150, "height"=>150, "crop"=>"lfill"))
PHP v2:
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->resize(Resize::limitFill()->width(150)->height(150));
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(width=150, height=150, crop="lfill")
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {width: 150, height: 150, crop: "lfill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(150).height(150).crop("lfill")).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {width: 150, height: 150, crop: "lfill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {width: 150, height: 150, crop: "lfill"})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation width="150" height="150" crop="lfill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation width="150" height="150" crop="lfill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation width="150" height="150" crop="lfill">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Crop("lfill")).BuildImageTag("sample.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setCrop("lfill")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(150).height(150).crop("lfill")).generate("sample.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("sample.jpg")
resize(Resize.limitFill() {
width(150)
height(150)
})}.generate()
Image limit-filled to a width and height of 150 pixels

limit

 c_limit

Same as the fit mode but only if the original asset is larger than the specified limit (width and height), in which case the asset is scaled down so that it takes up as much space as possible within a bounding box defined by the specified width and height parameters. The original aspect ratio is retained (by default) and all of the original asset is visible. This mode doesn't scale up the asset if your requested dimensions are larger than the original image size.

Required qualifiers

Two of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Example

Limit an image to a width and height of 150 pixels (w_150,h_150,c_limit):

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :width=>150, :height=>150, :crop=>"limit")
PHP v1:
Copy to clipboard
cl_image_tag("sample.jpg", array("width"=>150, "height"=>150, "crop"=>"limit"))
PHP v2:
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->resize(Resize::limitFit()->width(150)->height(150));
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(width=150, height=150, crop="limit")
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {width: 150, height: 150, crop: "limit"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(150).height(150).crop("limit")).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {width: 150, height: 150, crop: "limit"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {width: 150, height: 150, crop: "limit"})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation width="150" height="150" crop="limit" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation width="150" height="150" crop="limit" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation width="150" height="150" crop="limit">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Crop("limit")).BuildImageTag("sample.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setCrop("limit")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(150).height(150).crop("limit")).generate("sample.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("sample.jpg")
resize(Resize.limitFit() {
width(150)
height(150)
})}.generate()
Image limited to a width and height of 150 pixels

lpad

 c_lpad

The lpad (limit pad) mode is the same as pad but only if the original asset is larger than the specified limit (width and height), in which case the asset is scaled down to fill the specified width and height while retaining the original aspect ratio (by default) and with all of the original asset visible. This mode doesn't scale up the asset if your requested dimensions are bigger than the original asset size. Instead, if the proportions of the original asset do not match the requested width and height, padding is added to the asset to reach the required size. You can also specify where the original asset is placed by using the gravity parameter (set to center by default). Additionally, you can specify the color of the background in the case that padding is added.

Required qualifiers

Two of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Optional qualifiers

g_<gravity position> | b (background)

Example

Limit-pad an image with a green background to a width and height of 150 pixels (w_150,h_150,c_lpad,b_green):

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :width=>150, :height=>150, :background=>"green", :crop=>"lpad")
PHP v1:
Copy to clipboard
cl_image_tag("sample.jpg", array("width"=>150, "height"=>150, "background"=>"green", "crop"=>"lpad"))
PHP v2:
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->resize(Resize::limitPad()->width(150)->height(150)
    ->background(Background::color(Color::GREEN)));
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(width=150, height=150, background="green", crop="lpad")
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {width: 150, height: 150, background: "green", crop: "lpad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(150).height(150).background("green").crop("lpad")).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {width: 150, height: 150, background: "green", crop: "lpad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {width: 150, height: 150, background: "green", crop: "lpad"})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation width="150" height="150" background="green" crop="lpad" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation width="150" height="150" background="green" crop="lpad" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation width="150" height="150" background="green" crop="lpad">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Background("green").Crop("lpad")).BuildImageTag("sample.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setBackground("green").setCrop("lpad")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(150).height(150).background("green").crop("lpad")).generate("sample.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("sample.jpg")
resize(Resize.limitPad() {
width(150)
height(150)
background(Background.color(Color.GREEN))
})}.generate()
Image limit-padded to a width and height of 250 pixels

mfit

 c_mfit

The mfit (minimum fit) mode is the same as fit but only if the original image is smaller than the specified minimum (width and height), in which case the image is scaled up so that it takes up as much space as possible within a bounding box defined by the specified width and height parameters. The original aspect ratio is retained (by default) and all of the original image is visible. This mode doesn't scale down the image if your requested dimensions are smaller than the original image's.

Required qualifiers

Two of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Example

Request to fit a large image to a minimum width and height of 20 pixels while retaining the aspect ratio. This results in delivering the original image without resizing it (w_20,h_20,c_mfit):

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :width=>20, :height=>20, :crop=>"mfit")
PHP v1:
Copy to clipboard
cl_image_tag("sample.jpg", array("width"=>20, "height"=>20, "crop"=>"mfit"))
PHP v2:
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->resize(Resize::minimumFit()->width(20)->height(20));
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(width=20, height=20, crop="mfit")
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {width: 20, height: 20, crop: "mfit"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(20).height(20).crop("mfit")).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {width: 20, height: 20, crop: "mfit"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {width: 20, height: 20, crop: "mfit"})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation width="20" height="20" crop="mfit" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation width="20" height="20" crop="mfit" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation width="20" height="20" crop="mfit">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(20).Height(20).Crop("mfit")).BuildImageTag("sample.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(20).setHeight(20).setCrop("mfit")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(20).height(20).crop("mfit")).generate("sample.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("sample.jpg")
resize(Resize.minimumFit() {
width(20)
height(20)
})}.generate()
Image mfit to a width and height of 20 pixels

mpad

 c_mpad

The mpad (minimum pad) mode is the same as pad but only if the original image is smaller than the specified minimum (width and height), in which case the image is unchanged but padding is added to fill the specified dimensions. This mode doesn't scale down the image if your requested dimensions are smaller than the original image's. You can also specify where the original image is placed by using the gravity parameter (set to center by default). Additionally, you can specify the color of the background in the case that padding is added.

Required qualifiers

Two of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Optional qualifiers

g_<gravity position> | b (background)

Examples

  1. Request to pad a large image to a minimum width and height of 20 pixels while retaining the aspect ratio. This results in delivering the original larger image (w_20,h_20,c_mpad):
    Ruby:
    Copy to clipboard
    cl_image_tag("sample.jpg", :width=>20, :height=>20, :crop=>"mpad")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sample.jpg", array("width"=>20, "height"=>20, "crop"=>"mpad"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sample.jpg'))
      ->resize(Resize::minimumPad()->width(20)->height(20));
    Python:
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(width=20, height=20, crop="mpad")
    Node.js:
    Copy to clipboard
    cloudinary.image("sample.jpg", {width: 20, height: 20, crop: "mpad"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().width(20).height(20).crop("mpad")).imageTag("sample.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {width: 20, height: 20, crop: "mpad"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {width: 20, height: 20, crop: "mpad"})
    React:
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation width="20" height="20" crop="mpad" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sample.jpg" >
      <cld-transformation width="20" height="20" crop="mpad" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation width="20" height="20" crop="mpad">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(20).Height(20).Crop("mpad")).BuildImageTag("sample.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(20).setHeight(20).setCrop("mpad")).generate("sample.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().width(20).height(20).crop("mpad")).generate("sample.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sample.jpg")
    resize(Resize.minimumPad() {
    width(20)
    height(20)
    })}.generate()
    Image minimum padded to a width and height of 20 pixels
  2. Request to pad with a green background, a 100-pixel wide image to a minimum width and height of 150 pixels while retaining the aspect ratio (w_150,h_150,c_mpad):
    Ruby:
    Copy to clipboard
    cl_image_tag("docs/sample_100.jpg", :width=>150, :height=>150, :background=>"green", :crop=>"mpad")
    PHP v1:
    Copy to clipboard
    cl_image_tag("docs/sample_100.jpg", array("width"=>150, "height"=>150, "background"=>"green", "crop"=>"mpad"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('docs/sample_100.jpg'))
      ->resize(Resize::minimumPad()->width(150)->height(150)
        ->background(Background::color(Color::GREEN)));
    Python:
    Copy to clipboard
    CloudinaryImage("docs/sample_100.jpg").image(width=150, height=150, background="green", crop="mpad")
    Node.js:
    Copy to clipboard
    cloudinary.image("docs/sample_100.jpg", {width: 150, height: 150, background: "green", crop: "mpad"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().width(150).height(150).background("green").crop("mpad")).imageTag("docs/sample_100.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('docs/sample_100.jpg', {width: 150, height: 150, background: "green", crop: "mpad"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("docs/sample_100.jpg", {width: 150, height: 150, background: "green", crop: "mpad"})
    React:
    Copy to clipboard
    <Image publicId="docs/sample_100.jpg" >
      <Transformation width="150" height="150" background="green" crop="mpad" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="docs/sample_100.jpg" >
      <cld-transformation width="150" height="150" background="green" crop="mpad" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="docs/sample_100.jpg" >
      <cl-transformation width="150" height="150" background="green" crop="mpad">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Background("green").Crop("mpad")).BuildImageTag("docs/sample_100.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setBackground("green").setCrop("mpad")).generate("docs/sample_100.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().width(150).height(150).background("green").crop("mpad")).generate("docs/sample_100.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("docs/sample_100.jpg")
    resize(Resize.minimumPad() {
    width(150)
    height(150)
    background(Background.color(Color.GREEN))
    })}.generate()
    Image minimum padded to a width and height of 20 pixels

pad

 c_pad

Resizes the asset to fill the specified width and height while retaining the original aspect ratio (by default) and with all of the original asset visible. If the proportions of the original asset do not match the specified width and height, padding is added to the asset to reach the required size. You can also specify where the original asset is placed using the gravity parameter (set to center by default). Additionally, you can specify the color of the background in the case that padding is added.

Required qualifiers

Two of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Optional qualifiers

g_<gravity position> | b (background)

Example

Pad an image with a black background to a width and height of 150 pixels (w_150,h_150,c_pad,b_black):

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :width=>150, :height=>150, :background=>"black", :crop=>"pad")
PHP v1:
Copy to clipboard
cl_image_tag("sample.jpg", array("width"=>150, "height"=>150, "background"=>"black", "crop"=>"pad"))
PHP v2:
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->resize(Resize::pad()->width(150)->height(150)
    ->background(Background::color(Color::BLACK)));
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(width=150, height=150, background="black", crop="pad")
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {width: 150, height: 150, background: "black", crop: "pad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(150).height(150).background("black").crop("pad")).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {width: 150, height: 150, background: "black", crop: "pad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {width: 150, height: 150, background: "black", crop: "pad"})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation width="150" height="150" background="black" crop="pad" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation width="150" height="150" background="black" crop="pad" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation width="150" height="150" background="black" crop="pad">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Background("black").Crop("pad")).BuildImageTag("sample.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setBackground("black").setCrop("pad")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(150).height(150).background("black").crop("pad")).generate("sample.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("sample.jpg")
resize(Resize.pad() {
width(150)
height(150)
background(Background.color(Color.BLACK))
})}.generate()
Image padded to a width and height of 150 pixels

scale

 c_scale

Resizes the asset exactly to the specified width and height. All original asset parts are visible, but might be stretched or shrunk if the dimensions you request have a different aspect ratio than the original.

If only width or only height is specified, then the asset is scaled to the new dimension while retaining the original aspect ratio (unless you also include the fl_ignore_aspect_ratio flag).

Required qualifiers

At least one of the following: w (width) | h (height) | ar (aspect ratio)

Optional qualifiers

fl_ignore_aspect_ratio | g_liquid

See also: Liquid rescaling

Examples

  1. Scale to a width of 150 pixels (maintains the aspect ratio by default) (w_150,c_scale):

    Ruby:
    Copy to clipboard
    cl_image_tag("sample.jpg", :width=>150, :crop=>"scale")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sample.jpg", array("width"=>150, "crop"=>"scale"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sample.jpg'))
      ->resize(Resize::scale()->width(150));
    Python:
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(width=150, crop="scale")
    Node.js:
    Copy to clipboard
    cloudinary.image("sample.jpg", {width: 150, crop: "scale"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().width(150).crop("scale")).imageTag("sample.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {width: 150, crop: "scale"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {width: 150, crop: "scale"})
    React:
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation width="150" crop="scale" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sample.jpg" >
      <cld-transformation width="150" crop="scale" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation width="150" crop="scale">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Crop("scale")).BuildImageTag("sample.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().width(150).crop("scale")).generate("sample.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sample.jpg")
    resize(Resize.scale() {
    width(150)
    })}.generate()
    Image scaled to a width of 150 pixels

  2. Scale to a width and height of 150 pixels (does not maintain the aspect ratio) (w_150,h_150,c_scale):

    Ruby:
    Copy to clipboard
    cl_image_tag("sample.jpg", :width=>150, :height=>150, :crop=>"scale")
    PHP v1:
    Copy to clipboard
    cl_image_tag("sample.jpg", array("width"=>150, "height"=>150, "crop"=>"scale"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('sample.jpg'))
      ->resize(Resize::scale()->width(150)->height(150));
    Python:
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(width=150, height=150, crop="scale")
    Node.js:
    Copy to clipboard
    cloudinary.image("sample.jpg", {width: 150, height: 150, crop: "scale"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().width(150).height(150).crop("scale")).imageTag("sample.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {width: 150, height: 150, crop: "scale"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {width: 150, height: 150, crop: "scale"})
    React:
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation width="150" height="150" crop="scale" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sample.jpg" >
      <cld-transformation width="150" height="150" crop="scale" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation width="150" height="150" crop="scale">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Crop("scale")).BuildImageTag("sample.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().width(150).height(150).crop("scale")).generate("sample.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("sample.jpg")
    resize(Resize.scale() {
    width(150)
    height(150)
    })}.generate()
    Image scaled to a width and height of 150 pixels

thumb

 c_thumb

Creates image thumbnails from either face-detection or custom coordinates. Must always be accompanied by the g (gravity) parameter set to one of the face detection or on of the g_custom values. This cropping mode generates a thumbnail of an image with the exact specified width and height dimensions and with the original proportions retained, but the resulting image might be scaled to fit in the specified dimensions. You can specify the z (zoom) parameter to determine how much to scale the resulting image within the specified width and height.

Required qualifiers

g (gravity) set to to one of the face detection or custom special gravity positions.

    And

Two of the following: w (width) | h (height) | ar (aspect ratio)

(In rare cases, you may choose to provide only one sizing qualifier)

Optional qualifiers

z (zoom)

Example

Crop an image to a 150x150 thumbnail using face detection (g_face,c_thumb,w_150,h_150):

Ruby:
Copy to clipboard
cl_image_tag("woman.jpg", :gravity=>"face", :width=>150, :height=>150, :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("woman.jpg", array("gravity"=>"face", "width"=>150, "height"=>150, "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('woman.jpg'))
  ->resize(Resize::thumbnail()->width(150)->height(150)
    ->gravity(Gravity::focusOn(FocusOn::face())));
Python:
Copy to clipboard
CloudinaryImage("woman.jpg").image(gravity="face", width=150, height=150, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("woman.jpg", {gravity: "face", width: 150, height: 150, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("face").width(150).height(150).crop("thumb")).imageTag("woman.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('woman.jpg', {gravity: "face", width: 150, height: 150, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("woman.jpg", {gravity: "face", width: 150, height: 150, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="woman.jpg" >
  <Transformation gravity="face" width="150" height="150" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="woman.jpg" >
  <cld-transformation gravity="face" width="150" height="150" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="woman.jpg" >
  <cl-transformation gravity="face" width="150" height="150" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Width(150).Height(150).Crop("thumb")).BuildImageTag("woman.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setWidth(150).setHeight(150).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("face").width(150).height(150).crop("thumb")).generate("woman.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("woman.jpg")
resize(Resize.thumbnail() {
width(150)
height(150)
gravity(Gravity.focusOn(FocusOn.face()))
})}.generate()
150x150 thumbnail with face detection

co (color)

 co_<color value>

A qualifier that specifies the color to use with the corresponding transformation.

Use with: e_colorize | e_outline | e_make_transparent | e_shadow | l_text | l_subtitles | fl_waveform

Value Type Description
color value string Required. The color to apply. It can be set as:

  • A 3- or 4-digit RGB/RGBA hex
  • An RGB or RGBA hex triplet or quadruplet (6 or 8 digits).
  • A named color
When specifying any RGB or RGBA value, always prefix the value in the URL with rgb: (without #). For example, co_rgb:FEB61FC2 or co_rgb:999.

When using a named color, specify only the color name. For example co_blue.

Examples

Apply a colorize effect to an image, using an RGB hex triplet to define the green color for the colorize effect (co_rgb:20a020,e_colorize:50).

Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg", :color=>"#20a020", :effect=>"colorize:50")
PHP v1:
Copy to clipboard
cl_image_tag("face_top.jpg", array("color"=>"#20a020", "effect"=>"colorize:50"))
PHP v2:
Copy to clipboard
(new ImageTag('face_top.jpg'))
  ->effect(Effect::colorize()->level(50)
    ->color(Color::rgb('20a020')));
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image(color="#20a020", effect="colorize:50")
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg", {color: "#20a020", effect: "colorize:50"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().color("#20a020").effect("colorize:50")).imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg', {color: "#20a020", effect: "colorize:50"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg", {color: "#20a020", effect: "colorize:50"})
React:
Copy to clipboard
<Image publicId="face_top.jpg" >
  <Transformation color="#20a020" effect="colorize:50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >
  <cld-transformation color="#20a020" effect="colorize:50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >
  <cl-transformation color="#20a020" effect="colorize:50">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Color("#20a020").Effect("colorize:50")).BuildImageTag("face_top.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setColor("#20a020").setEffect("colorize:50")).generate("face_top.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().color("#20a020").effect("colorize:50")).generate("face_top.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("face_top.jpg")
effect(Effect.colorize() {
level(50)
color(Color.rgb("#20a020"))
})}.generate()
Apply green colorization to a photo

Outline a transparent shape, using 'orange' as the outline color (e_outline,co_orange).

Ruby:
Copy to clipboard
cl_image_tag("ring2.png", :effect=>"outline", :color=>"orange")
PHP v1:
Copy to clipboard
cl_image_tag("ring2.png", array("effect"=>"outline", "color"=>"orange"))
PHP v2:
Copy to clipboard
(new ImageTag('ring2.png'))
  ->effect(Effect::outline()->color(Color::ORANGE));
Python:
Copy to clipboard
CloudinaryImage("ring2.png").image(effect="outline", color="orange")
Node.js:
Copy to clipboard
cloudinary.image("ring2.png", {effect: "outline", color: "orange"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("outline").color("orange")).imageTag("ring2.png");
JS:
Copy to clipboard
cloudinary.imageTag('ring2.png', {effect: "outline", color: "orange"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("ring2.png", {effect: "outline", color: "orange"})
React:
Copy to clipboard
<Image publicId="ring2.png" >
  <Transformation effect="outline" color="orange" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="ring2.png" >
  <cld-transformation effect="outline" color="orange" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="ring2.png" >
  <cl-transformation effect="outline" color="orange">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("outline").Color("orange")).BuildImageTag("ring2.png")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("outline").setColor("orange")).generate("ring2.png")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("outline").color("orange")).generate("ring2.png");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("ring2.png")
effect(Effect.outline() {
color(Color.ORANGE)
})}.generate()
Use an orange color for the outline of a transparent shape.

cs (color space)

 cs_<color space mode>

Controls the color space used for the delivered image or video. If you don't include this parameter in your transformation, the color space of the original asset is generally retained. In some cases for videos, the color space is normalized for web delivery, unless cs_copy is specified.

Value Type Description
color space mode constant Required. The color space mode to use when delivering the image or video.

Possible values:

  • sRGB: Renders the image or video in the sRGB color space.
  • tinysrgb: Renders the image or video using Facebook's truncated sRGB color space.
  • cmyk: Renders the image or video in the CMYK color space.
  • no_cmyk: If the original image or video used the CMYK color space, converts it to sRGB.
  • keep_cmyk: Retains the CMYK color space when generating derived images or videos.
  • srgb:truecolor: Image only. Encodes the image as RGB, rather than palette or grayscale. Not applicable when using q_auto.
  • cs_icc:[public_id]: Image only. Renders the image using the specified color space (icc) file. The icc file must be uploaded to your account as a raw and authenticated file. Specify the public ID of your icc file including the file extension.
  • copy: Video only. Retains the original color space of the video. This prevents the color space from being normalized when the video is re-encoded by Cloudinary if another transformation is applied.

Examples

  1. Render an image in the sRGB color space (cs_srgb).
    Ruby:
    Copy to clipboard
    cl_image_tag("face_top.jpg", :color_space=>"srgb")
    PHP v1:
    Copy to clipboard
    cl_image_tag("face_top.jpg", array("color_space"=>"srgb"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('face_top.jpg'))
      ->delivery(Delivery::colorSpace(ColorSpace::srgb()));
    Python:
    Copy to clipboard
    CloudinaryImage("face_top.jpg").image(color_space="srgb")
    Node.js:
    Copy to clipboard
    cloudinary.image("face_top.jpg", {color_space: "srgb"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().colorSpace("srgb")).imageTag("face_top.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('face_top.jpg', {colorSpace: "srgb"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("face_top.jpg", {color_space: "srgb"})
    React:
    Copy to clipboard
    <Image publicId="face_top.jpg" >
      <Transformation colorSpace="srgb" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="face_top.jpg" >
      <cld-transformation colorSpace="srgb" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="face_top.jpg" >
      <cl-transformation color-space="srgb">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().ColorSpace("srgb")).BuildImageTag("face_top.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setColorSpace("srgb")).generate("face_top.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().colorSpace("srgb")).generate("face_top.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("face_top.jpg")
    delivery(Delivery.colorSpace(ColorSpace.srgb()))}.generate()
    Render image in sRGB color space
  2. Render an image in the CMYK color space (cs_keep_cmyk).
    Ruby:
    Copy to clipboard
    cl_image_tag("face_top.jpg", :color_space=>"keep_cmyk")
    PHP v1:
    Copy to clipboard
    cl_image_tag("face_top.jpg", array("color_space"=>"keep_cmyk"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('face_top.jpg'))
      ->delivery(Delivery::colorSpace(ColorSpace::keepCmyk()));
    Python:
    Copy to clipboard
    CloudinaryImage("face_top.jpg").image(color_space="keep_cmyk")
    Node.js:
    Copy to clipboard
    cloudinary.image("face_top.jpg", {color_space: "keep_cmyk"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().colorSpace("keep_cmyk")).imageTag("face_top.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('face_top.jpg', {colorSpace: "keep_cmyk"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("face_top.jpg", {color_space: "keep_cmyk"})
    React:
    Copy to clipboard
    <Image publicId="face_top.jpg" >
      <Transformation colorSpace="keep_cmyk" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="face_top.jpg" >
      <cld-transformation colorSpace="keep_cmyk" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="face_top.jpg" >
      <cl-transformation color-space="keep_cmyk">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().ColorSpace("keep_cmyk")).BuildImageTag("face_top.jpg")
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setColorSpace("keep_cmyk")).generate("face_top.jpg")!, cloudinary: cloudinary)
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().colorSpace("keep_cmyk")).generate("face_top.jpg");
    Kotlin:
    Copy to clipboard
    cloudinary.image {
    publicId("face_top.jpg")
    delivery(Delivery.colorSpace(ColorSpace.keepCmyk()))}.generate()
    Retain the CMYK color space when generating a derived image

d (default image)

 d_<image asset>

Specifies a backup placeholder image to be delivered in the case that the actual requested delivery image or social media picture does not exist. Any requested transformations are applied on the placeholder image as well.

Value Type Description
image asset string Required. The public ID of the placeholder image plus the file extension.

Example

Return the image with the 'avatar' public ID as a PNG if the requested image in the URL: 'non_existing_id' does not exist (d_avatar.png).

Ruby:
Copy to clipboard
cl_image_tag("non_existing_id.png", :default_image=>"avatar.png")
PHP v1:
Copy to clipboard
cl_image_tag("non_existing_id.png", array("default_image"=>"avatar.png"))
PHP v2:
Copy to clipboard
(new ImageTag('non_existing_id.png'))
  ->delivery(Delivery::defaultImage('avatar.png'));
Python:
Copy to clipboard
CloudinaryImage("non_existing_id.png").image(default_image="avatar.png")
Node.js:
Copy to clipboard
cloudinary.image("non_existing_id.png", {default_image: "avatar.png"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().defaultImage("avatar.png")).imageTag("non_existing_id.png");
JS:
Copy to clipboard
cloudinary.imageTag('non_existing_id.png', {defaultImage: "avatar.png"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("non_existing_id.png", {default_image: "avatar.png"})
React:
Copy to clipboard
<Image publicId="non_existing_id.png" >
  <Transformation defaultImage="avatar.png" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="non_existing_id.png" >
  <cld-transformation defaultImage="avatar.png" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="non_existing_id.png" >
  <cl-transformation default-image="avatar.png">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().DefaultImage("avatar.png")).BuildImageTag("non_existing_id.png")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setDefaultImage("avatar.png")).generate("non_existing_id.png")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().defaultImage("avatar.png")).generate("non_existing_id.png");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("non_existing_id.png")
delivery(Delivery.defaultImage("avatar.png"))}.generate()
Return the image with the 'avatar' public ID if an image with the ID of 'non_existing_id' does not exist

dl (delay)

 dl_<time value>

Controls the time delay between the frames of a delivered animated image. (The source asset can be an image or a video.)

Value Type Description
time integer Required. The delay in milliseconds between frames.

Related flag: fl_animated

Example

Convert a video to an animated image, and apply a delay of 200 milliseconds between frames (dl_200).

Ruby:
Copy to clipboard
cl_image_tag("dog.gif", :delay=>"200", :resource_type=>"video")
PHP v1:
Copy to clipboard
cl_image_tag("dog.gif", array("delay"=>"200", "resource_type"=>"video"))
PHP v2:
Copy to clipboard
(new ImageTag('dog.gif'))
  ->transcode(Transcode::toAnimated()->sampling(200))
  ->assetType(AssetType::VIDEO);
Python:
Copy to clipboard
CloudinaryVideo("dog.gif").image(delay="200")
Node.js:
Copy to clipboard
cloudinary.image("dog.gif", {delay: "200", resource_type: "video"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().delay("200")).resourceType("video").imageTag("dog.gif");
JS:
Copy to clipboard
cloudinary.videoTag('dog.gif', {delay: "200"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("dog.gif", {delay: "200", resource_type: "video"})
React:
Copy to clipboard
<Video publicId="dog.gif" resourceType="video">
  <Transformation delay="200" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog.gif" resourceType="video">
  <cld-transformation delay="200" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog.gif" resource-type="video">
  <cl-transformation delay="200">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Delay("200")).BuildImageTag("dog.gif")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setDelay("200")).generate("dog.gif")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().delay("200")).resourceType("video").generate("dog.gif");
Kotlin:
Copy to clipboard
cloudinary.video {
publicId("dog.gif")
transcode(Transcode.toAnimated() {
sampling(200)
})
assetType("video")}.generate()
Deliver an animated image based on a video with a delay between frames of 200 milliseconds

dn (density)

 dn_<dots per inch>

Controls the density to use when delivering an image or when converting a vector file such as a PDF or EPS document to a web image delivery format.

  • For web image formats: By default, if an image does not contain resolution information in its embedded metadata, Cloudinary normalizes any derived images for web optimization purposes and delivers them at 150 dpi. Controlling the dpi can be useful when generating a derived image intended for printing.

    Tip
    You can take advantage of the idn (initial density) value to automatically set the density of your image to the (pre-normalized) initial density of the original image (for example, dn_idn). This value is taken from the original image's metadata.

  • For vector files (PDF, EPS, etc.): When you deliver a vector file in a web image format, it is delivered by default at 150 dpi.

See also: Arithmetic expressions

Learn more: Deliver a PDF page as an image

Value Type Description
dots per inch integer Required. The dpi of the delivered image.

Example

Deliver a JPEG image of the first page of the PDF file with a density of 20 (dn_20):

Ruby:
Copy to clipboard
cl_image_tag("multi_page_pdf.jpg", :density=>20)
PHP v1:
Copy to clipboard
cl_image_tag("multi_page_pdf.jpg", array("density"=>20))
PHP v2:
Copy to clipboard
(new ImageTag('multi_page_pdf.jpg'))
  ->delivery(Delivery::density(20));
Python:
Copy to clipboard
CloudinaryImage("multi_page_pdf.jpg").image(density=20)
Node.js:
Copy to clipboard
cloudinary.image("multi_page_pdf.jpg", {density: 20})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().density(20)).imageTag("multi_page_pdf.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('multi_page_pdf.jpg', {density: 20}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("multi_page_pdf.jpg", {density: 20})
React:
Copy to clipboard
<Image publicId="multi_page_pdf.jpg" >
  <Transformation density="20" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="multi_page_pdf.jpg" >
  <cld-transformation density="20" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="multi_page_pdf.jpg" >
  <cl-transformation density="20">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Density(20)).BuildImageTag("multi_page_pdf.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setDensity(20)).generate("multi_page_pdf.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().density(20)).generate("multi_page_pdf.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("multi_page_pdf.jpg")
delivery(Delivery.density(20))}.generate()
JPEG image of the PDF with 20 density

dpr (DPR)

 

Sets the device pixel ratio (DPR) for the delivered image or video using a specified value or automatically based on the requesting device.

<pixel ratio>

 dpr_<pixel ratio>

Delivers the image or video in the specified device pixel ratio.

Important
When delivering at a DPR value larger than 1, ensure that you also set the desired final display dimensions in your image or video tag. For example, if you set h_300,dpr_2 in your delivery URL, you should also set height=300 in your image tag. Otherwise, the image will be delivered at 2.0 x the requested dimensions (a height of 600px in this example).

Learn more: Set Device Pixel Ratio (DPR)

See also: Arithmetic expressions

Value Type Description
pixel ratio float Required. A positive value for the device pixel ratio to use when delivering the image or video.

Example

Deliver the image with a dpr of 2.0 (dpr_2.0).

Note
While the code example below shows only the transformation URL, the image tag for the displayed inline image includes a hard-coded height definition in the image tag, to ensure that the doubled-DPR is still delivered within a display of 150px. If you view just the transformed dpr_2 URL outside the image tag, it displays with a height of 300px.

Copy to clipboard
<img title="Deliver the image with a dpr of 2.0" 
    alt="Deliver the image with a dpr of 2.0" 
    style="margin: 0 auto;display: block" 
    src="https://res.cloudinary.com/demo/image/upload/h_300,dpr_2.0/face_top.jpg"
    height="150" 
>

Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg", :height=>150, :dpr=>2.0, :crop=>"scale")
PHP v1:
Copy to clipboard
cl_image_tag("face_top.jpg", array("height"=>150, "dpr"=>"2.0", "crop"=>"scale"))
PHP v2:
Copy to clipboard
(new ImageTag('face_top.jpg'))
  ->resize(Resize::scale()->height(150))
  ->delivery(Delivery::dpr(2.0));
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image(height=150, dpr="2.0", crop="scale")
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg", {height: 150, dpr: "2.0", crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(150).dpr(2.0).crop("scale")).imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg', {height: 150, dpr: "2.0", crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg", {height: 150, dpr: "2.0", crop: "scale"})
React:
Copy to clipboard
<Image publicId="face_top.jpg" >
  <Transformation height="150" dpr="2.0" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >
  <cld-transformation height="150" dpr="2.0" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >
  <cl-transformation height="150" dpr="2.0" crop="scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(150).Dpr(2.0).Crop("scale")).BuildImageTag("face_top.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(150).setDpr(2.0).setCrop("scale")).generate("face_top.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(150).dpr(2.0).crop("scale")).generate("face_top.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("face_top.jpg")
resize(Resize.scale() {
height(150)
})
delivery(Delivery.dpr(2.0f))}.generate()
Deliver the image with a dpr of 2.0

auto

 dpr_auto

Delivers the image in a resolution that automatically matches the DPR (Device Pixel Ratio) setting of the requesting device, rounded up to the nearest integer. Only works for certain browsers and when Client-Hints are enabled.

Learn more: Automatic DPR

Example

Deliver the image with a dpr automatically set (dpr_auto).

Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg", :height=>150, :dpr=>"auto", :crop=>"scale")
PHP v1:
Copy to clipboard
cl_image_tag("face_top.jpg", array("height"=>150, "dpr"=>"auto", "crop"=>"scale"))
PHP v2:
Copy to clipboard
(new ImageTag('face_top.jpg'))
  ->resize(Resize::scale()->height(150))
  ->delivery(Delivery::dpr(Dpr::auto()));
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image(height=150, dpr="auto", crop="scale")
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg", {height: 150, dpr: "auto", crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(150).dpr("auto").crop("scale")).imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg', {height: 150, dpr: "auto", crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg", {height: 150, dpr: "auto", crop: "scale"})
React:
Copy to clipboard
<Image publicId="face_top.jpg" >
  <Transformation height="150" dpr="auto" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >
  <cld-transformation height="150" dpr="auto" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >
  <cl-transformation height="150" dpr="auto" crop="scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(150).Dpr("auto").Crop("scale")).BuildImageTag("face_top.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(150).setDpr("auto").setCrop("scale")).generate("face_top.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(150).dpr("auto").crop("scale")).generate("face_top.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("face_top.jpg")
resize(Resize.scale() {
height(150)
})
delivery(Delivery.dpr(Dpr.auto()))}.generate()
Deliver the image with a dpr automatically set

du (duration)

 du_<time value>

Sets the duration (in seconds) of a video or audio clip.

  • Can be used independently to trim a video or audio clip to the specified length. This parameter is often used in conjunction with the so (start offset) and/or eo (end offset) parameters.
  • Can be used as a qualifier to control the length of time for a corresponding transformation.

As a qualifier, use with: e_boomerang | l_video | l_<image id>

Value Type Description
time value float | string Required. Specify the duration as either:

  • The time in seconds (e.g. 6.12).
  • The time as a percentage of the whole duration (e.g. 60p).

Examples

  1. Deliver a video with a duration of 3 seconds (du_3):

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :duration=>"3")
    PHP v1:
    Copy to clipboard
    cl_video_tag("dog", array("duration"=>"3"))
    PHP v2:
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->videoEdit(VideoEdit::trim()->duration(3));
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(duration="3")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {duration: "3"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().duration("3")).videoTag("dog");
    JS:
    Copy to clipboard
    cloudinary.videoTag('dog', {duration: "3"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {duration: "3"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation duration="3" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video publicId="dog" >
      <cld-transformation duration="3" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation duration="3">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Duration("3")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setDuration("3")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().duration("3")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
    publicId("dog.mp4")
    videoEdit(VideoEdit.trim() {
    duration(3)
    })}.generate()

  2. Deliver a video with a duration of 50% (du_50p) and a start offset of 2 seconds (so_2):

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :duration=>"50p", :start_offset=>"2")
    PHP v1:
    Copy to clipboard
    cl_video_tag("dog", array("duration"=>"50p", "start_offset"=>"2"))
    PHP v2:
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->videoEdit(VideoEdit::trim()->startOffset(2)->duration('50%'));
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(duration="50p", start_offset="2")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {duration: "50p", start_offset: "2"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().duration("50p").startOffset("2")).videoTag("dog");
    JS:
    Copy to clipboard
    cloudinary.videoTag('dog', {duration: "50p", startOffset: "2"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {duration: "50p", start_offset: "2"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation duration="50p" startOffset="2" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video publicId="dog" >
      <cld-transformation duration="50p" startOffset="2" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation duration="50p" start-offset="2">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Duration("50p").StartOffset("2")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setDuration("50p").setStartOffset("2")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().duration("50p").startOffset("2")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
    publicId("dog.mp4")
    videoEdit(VideoEdit.trim() {
    startOffset(2)
    duration("50%")
    })}.generate()

e (effect)

 

Applies the specified effect to an asset.

accelerate

 e_accelerate[:<acceleration percentage>]

Speeds up the video playback by the specified percentage.

Value Type Description
acceleration percentage integer The acceleration percentage. A negative value slows down the playback speed.

Range: -50 to 100. Default: 0.

Example

Speed up the playback of a video by 100% - twice normal speed (e_accelerate:100):

Ruby:
Copy to clipboard
cl_video_tag("dog", :effect=>"accelerate:100")
PHP v1:
Copy to clipboard
cl_video_tag("dog", array("effect"=>"accelerate:100"))
PHP v2:
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->effect(Effect::accelerate()->rate(100));
Python:
Copy to clipboard
CloudinaryVideo("dog").video(effect="accelerate:100")
Node.js:
Copy to clipboard
cloudinary.video("dog", {effect: "accelerate:100"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("accelerate:100")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {effect: "accelerate:100"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {effect: "accelerate:100"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation effect="accelerate:100" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation effect="accelerate:100" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation effect="accelerate:100">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("accelerate:100")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEffect("accelerate:100")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("accelerate:100")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
publicId("dog.mp4")
effect(Effect.accelerate() {
rate(100)
})}.generate()

adv_redeye

 e_adv_redeye

Requires the Advanced Facial Attribute Detection add-on.
Automatically removes red eyes from an image.

Example

Apply red eye removal to this picture (e_adv_redeye):

Ruby:
Copy to clipboard
cl_image_tag("docs/redeyeman.jpg", :effect=>"adv_redeye")
PHP v1:
Copy to clipboard
cl_image_tag("docs/redeyeman.jpg", array("effect"=>"adv_redeye"))
PHP v2:
Copy to clipboard
(new ImageTag('docs/redeyeman.jpg'))
  ->effect(Effect::advancedRedEye());
Python:
Copy to clipboard
CloudinaryImage("docs/redeyeman.jpg").image(effect="adv_redeye")
Node.js:
Copy to clipboard
cloudinary.image("docs/redeyeman.jpg", {effect: "adv_redeye"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("adv_redeye")).imageTag("docs/redeyeman.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('docs/redeyeman.jpg', {effect: "adv_redeye"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/redeyeman.jpg", {effect: "adv_redeye"})
React:
Copy to clipboard
<Image publicId="docs/redeyeman.jpg" >
  <Transformation effect="adv_redeye" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="docs/redeyeman.jpg" >
  <cld-transformation effect="adv_redeye" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/redeyeman.jpg" >
  <cl-transformation effect="adv_redeye">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("adv_redeye")).BuildImageTag("docs/redeyeman.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("adv_redeye")).generate("docs/redeyeman.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("adv_redeye")).generate("docs/redeyeman.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
publicId("docs/redeyeman.jpg")
effect(Effect.advancedRedEye())}.generate()
Image of eyes with redeye removed

anti_removal

 e_anti_removal[:<distortion level>]

A qualifier that slightly distorts the corresponding image overlay to prevent easy removal.

Use with: l_<image id> | l_fetch | l_text | u (underlay)

Learn more: Smart anti-removal

Value Type Description
distortion level integer The level of distortion.

Range: 1 to 100. Default: 50.

Example

Add an overlay with a distortion level of 95 (e_anti_removal:95):

Ruby:
Copy to clipboard
cl_image_tag("horses.jpg", :effect=>"anti_removal:95", :overlay=>"cloudinary_icon", :gravity=>"north_west")
PHP v1:
Copy to clipboard
cl_image_tag("horses.jpg", array("effect"=>"anti_removal:95", "overlay"=>"cloudinary_icon", "gravity"=>"north_west"))
PHP v2:
Copy to clipboard
(new ImageTag('horses.jpg'))
  ->overlay(Overlay::source(Source::image('cloudinary_icon'))
    ->position((new Position())
      ->gravity(Gravity::compass(Compass::northWest())))
    ->blendMode(BlendMode::antiRemoval(95)));
Python:
Copy to clipboard
CloudinaryImage("horses.jpg").image(effect="anti_removal:95", overlay="cloudinary_icon", gravity="north_west")
Node.js:
Copy to clipboard
cloudinary.image("horses.jpg", {effect: "anti_removal:95", overlay: "cloudinary_icon", gravity: "north_west"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("anti_removal:95").overlay(new Layer().publicId("cloudinary_icon")).gravity("north_west")).imageTag("horses.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('horses.jpg', {effect: "anti_removal:95", overlay: new cloudinary.Layer().publicId("cloudinary_icon"), gravity: "north_west"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("horses.jpg", {effect: "anti_removal:95", overlay: new cloudinary.Layer().publicId("cloudinary_icon"), gravity: "north_west"})
React:
Copy to clipboard
<Image publicId="horses.jpg" >
  <Transformation effect="anti_removal:95" overlay="cloudinary_icon" gravity="north_west" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="horses.jpg" >
  <cld-transformation effect="anti_removal:95" :overlay="cloudinary_icon" gravity="north_west" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="horses.jpg" >
  <cl-transformation effect="anti_removal:95" overlay="cloudinary_icon" gravity="north_west">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("anti_removal:95").Overlay(new Layer().PublicId("cloudinary_icon")).Gravity("north_west")).BuildImageTag("horses.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("anti_removal:95").setOverlay("cloudinary_icon").setGravity("north_west")).generate("horses.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("anti_removal:95").overlay(new Layer().publicId("cloudinary_icon")).gravity("north_west")).generate("horses.jpg