Visual image effects and enhancements

Cloudinary supports a large number of effects and enhancements that can be applied to change the visual appearance of delivered images. You can also apply multiple effects to an image by applying each effect as a separate chained transformation.

On this page:

Overview
Simple syntax examples
Advanced syntax examples

Overview

Cloudinary's visual effects and enhancements are a great way to easily change the way your images look within your site or application. For example, you can change the shape of your images, blur and pixelate them, apply quality improvements, make color adjustments, change the look and feel with fun effects, apply filters, and much more.

Some transformations use fairly simple syntax, whereas others require more explanation - examples of these types of transformations are shown in the advanced syntax examples.

Besides the examples on this page, there are many more effects available and you can find a full list of them, including examples, by checking out our URL transformation reference.

Here are some popular options for using effects and artistic enhancements. Click each image to see the URL parameters applied in each case:

Cartoonify
your images

Add a vignette to
your images

Generate low quality
image placeholders

Add image
outlines

Simple syntax examples

Here are some examples of effects and enhancements that use a simple transformation syntax. Click the links to see the full syntax for each transformation in the URL transformation reference.

Artistic filters

Apply an artistic filter using the art effect, specifying one of the filters shown.

Available filters

Original image:

Filters:

al_dente

athena

audrey

aurora

daguerre

eucalyptus

fes

frost

hairspray

hokusai

incognito

linen

peacock

primavera

quartz

red_rock

refresh

sizzle

sonnet

ukulele

zorro

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_art:zorro/horses.jpg

Ruby:

cl_image_tag("horses.jpg", :effect=>"art:zorro")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("horses.jpg", array("effect"=>"art:zorro"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('horses.jpg'))
  ->effect(Effect::artisticFilter(ArtisticFilter::zorro()));

Library:

Python:

CloudinaryImage("horses.jpg").image(effect="art:zorro")

Node.js:

cloudinary.image("horses.jpg", {effect: "art:zorro"})

Java:

cloudinary.url().transformation(new Transformation().effect("art:zorro")).imageTag("horses.jpg");

JS:

cloudinary.imageTag('horses.jpg', {effect: "art:zorro"}).toHtml();

jQuery:

$.cloudinary.image("horses.jpg", {effect: "art:zorro"})

React:

<Image publicId="horses.jpg" >
  <Transformation effect="art:zorro" />
</Image>

Vue.js:

<cld-image public-id="horses.jpg" >
  <cld-transformation effect="art:zorro" />
</cld-image>

Angular:

<cl-image public-id="horses.jpg" >
  <cl-transformation effect="art:zorro">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("art:zorro")).BuildImageTag("horses.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("art:zorro")).generate("horses.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("art:zorro")).generate("horses.jpg");

Kotlin:

cloudinary.image {
publicId("horses.jpg")
effect(Effect.artisticFilter(ArtisticFilter.zorro()))
}.generate()

See full syntax: e_art in the Transformation Reference.

Cartoonify

Make an image look more like a cartoon using the cartoonify effect.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_cartoonify/horses.jpg

Ruby:

cl_image_tag("horses.jpg", :effect=>"cartoonify")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("horses.jpg", array("effect"=>"cartoonify"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('horses.jpg'))
  ->effect(Effect::cartoonify());

Library:

Python:

CloudinaryImage("horses.jpg").image(effect="cartoonify")

Node.js:

cloudinary.image("horses.jpg", {effect: "cartoonify"})

Java:

cloudinary.url().transformation(new Transformation().effect("cartoonify")).imageTag("horses.jpg");

JS:

cloudinary.imageTag('horses.jpg', {effect: "cartoonify"}).toHtml();

jQuery:

$.cloudinary.image("horses.jpg", {effect: "cartoonify"})

React:

<Image publicId="horses.jpg" >
  <Transformation effect="cartoonify" />
</Image>

Vue.js:

<cld-image public-id="horses.jpg" >
  <cld-transformation effect="cartoonify" />
</cld-image>

Angular:

<cl-image public-id="horses.jpg" >
  <cl-transformation effect="cartoonify">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("cartoonify")).BuildImageTag("horses.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("cartoonify")).generate("horses.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("cartoonify")).generate("horses.jpg");

Kotlin:

cloudinary.image {
publicId("horses.jpg")
effect(Effect.cartoonify())
}.generate()

See full syntax: e_cartoonify in the Transformation Reference.

Opacity

Adjust the opacity of an image using the opacity transformation (o in URLs). Specify a value between 0 and 100, representing the percentage of transparency, where 100 means completely opaque and 0 is completely transparent. In this case the image is delivered with 30% opacity:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/o_30/horses.jpg

Ruby:

cl_image_tag("horses.jpg", :opacity=>30)

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("horses.jpg", array("opacity"=>30))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('horses.jpg'))
  ->adjust(Adjust::opacity(30));

Library:

Python:

CloudinaryImage("horses.jpg").image(opacity=30)

Node.js:

cloudinary.image("horses.jpg", {opacity: 30})

Java:

cloudinary.url().transformation(new Transformation().opacity(30)).imageTag("horses.jpg");

JS:

cloudinary.imageTag('horses.jpg', {opacity: 30}).toHtml();

jQuery:

$.cloudinary.image("horses.jpg", {opacity: 30})

React:

<Image publicId="horses.jpg" >
  <Transformation opacity="30" />
</Image>

Vue.js:

<cld-image public-id="horses.jpg" >
  <cld-transformation opacity="30" />
</cld-image>

Angular:

<cl-image public-id="horses.jpg" >
  <cl-transformation opacity="30">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(30)).BuildImageTag("horses.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOpacity(30)).generate("horses.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().opacity(30)).generate("horses.jpg");

Kotlin:

cloudinary.image {
publicId("horses.jpg")
adjust(Adjust.opacity(30))
}.generate()

See full syntax: o (opacity) in the Transformation Reference.

Pixelate

Pixelate an image using the pixelate effect.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_pixelate:20/horses.jpg

Ruby:

cl_image_tag("horses.jpg", :effect=>"pixelate:20")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("horses.jpg", array("effect"=>"pixelate:20"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('horses.jpg'))
  ->effect(Effect::pixelate()->squareSize(20));

Library:

Python:

CloudinaryImage("horses.jpg").image(effect="pixelate:20")

Node.js:

cloudinary.image("horses.jpg", {effect: "pixelate:20"})

Java:

cloudinary.url().transformation(new Transformation().effect("pixelate:20")).imageTag("horses.jpg");

JS:

cloudinary.imageTag('horses.jpg', {effect: "pixelate:20"}).toHtml();

jQuery:

$.cloudinary.image("horses.jpg", {effect: "pixelate:20"})

React:

<Image publicId="horses.jpg" >
  <Transformation effect="pixelate:20" />
</Image>

Vue.js:

<cld-image public-id="horses.jpg" >
  <cld-transformation effect="pixelate:20" />
</cld-image>

Angular:

<cl-image public-id="horses.jpg" >
  <cl-transformation effect="pixelate:20">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate:20")).BuildImageTag("horses.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("pixelate:20")).generate("horses.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("pixelate:20")).generate("horses.jpg");

Kotlin:

cloudinary.image {
publicId("horses.jpg")
effect(Effect.pixelate() {
squareSize(20)
})
}.generate()

See full syntax: e_pixelate in the Transformation Reference.

Sepia

Change the colors of an image to shades of sepia using the sepia effect.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_sepia/horses.jpg

Ruby:

cl_image_tag("horses.jpg", :effect=>"sepia")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("horses.jpg", array("effect"=>"sepia"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('horses.jpg'))
  ->effect(Effect::sepia());

Library:

Python:

CloudinaryImage("horses.jpg").image(effect="sepia")

Node.js:

cloudinary.image("horses.jpg", {effect: "sepia"})

Java:

cloudinary.url().transformation(new Transformation().effect("sepia")).imageTag("horses.jpg");

JS:

cloudinary.imageTag('horses.jpg', {effect: "sepia"}).toHtml();

jQuery:

$.cloudinary.image("horses.jpg", {effect: "sepia"})

React:

<Image publicId="horses.jpg" >
  <Transformation effect="sepia" />
</Image>

Vue.js:

<cld-image public-id="horses.jpg" >
  <cld-transformation effect="sepia" />
</cld-image>

Angular:

<cl-image public-id="horses.jpg" >
  <cl-transformation effect="sepia">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sepia")).BuildImageTag("horses.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("sepia")).generate("horses.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("sepia")).generate("horses.jpg");

Kotlin:

cloudinary.image {
publicId("horses.jpg")
effect(Effect.sepia())
}.generate()

See full syntax: e_sepia in the Transformation Reference.

Vignette

Fade the edges of an image into the background using the vignette effect.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_vignette/horses.jpg

Ruby:

cl_image_tag("horses.jpg", :effect=>"vignette")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("horses.jpg", array("effect"=>"vignette"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('horses.jpg'))
  ->effect(Effect::vignette());

Library:

Python:

CloudinaryImage("horses.jpg").image(effect="vignette")

Node.js:

cloudinary.image("horses.jpg", {effect: "vignette"})

Java:

cloudinary.url().transformation(new Transformation().effect("vignette")).imageTag("horses.jpg");

JS:

cloudinary.imageTag('horses.jpg', {effect: "vignette"}).toHtml();

jQuery:

$.cloudinary.image("horses.jpg", {effect: "vignette"})

React:

<Image publicId="horses.jpg" >
  <Transformation effect="vignette" />
</Image>

Vue.js:

<cld-image public-id="horses.jpg" >
  <cld-transformation effect="vignette" />
</cld-image>

Angular:

<cl-image public-id="horses.jpg" >
  <cl-transformation effect="vignette">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("vignette")).BuildImageTag("horses.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("vignette")).generate("horses.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("vignette")).generate("horses.jpg");

Kotlin:

cloudinary.image {
publicId("horses.jpg")
effect(Effect.vignette())
}.generate()

See full syntax: e_vignette in the Transformation Reference.

Advanced syntax examples

In general, most of the visual effects and enhancements can take an additional option to tailor the effect to your liking. For some, however, you may need to provide additional syntax and use some more complex concepts. It is important to understand how these advanced transformations work when attempting to use them. The sections below outline some of the more advanced transformations and help you to use these with your own assets.

Remember, there are many more transformations available and you can find a full list of them, including examples, by checking out our URL transformation reference.

Background color

Use the background parameter (b in URLs) to set the background color of the image. The image background is visible when padding is added with one of the padding crop modes, when rounding corners, when adding overlays, and with semi-transparent PNGs and GIFs.

An opaque color can be set as an RGB hex triplet (e.g., b_rgb:3e2222), a 3-digit RGB hex (e.g., b_rgb:777) or a named color (e.g., b_green). Cloudinary's client libraries also support a # shortcut for RGB (e.g., setting background to #3e2222 which is then translated to rgb:3e2222).

For example, the uploaded image named sample padded to a width and height of 300 pixels with a green background:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/b_green,c_pad,h_300,w_300/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :background=>"green", :height=>300, :width=>300, :crop=>"pad")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("sample.jpg", array("background"=>"green", "height"=>300, "width"=>300, "crop"=>"pad"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('sample.jpg'))
  ->resize(Resize::pad()->width(300)->height(300)
    ->background(Background::color(Color::GREEN)));

Library:

Python:

CloudinaryImage("sample.jpg").image(background="green", height=300, width=300, crop="pad")

Node.js:

cloudinary.image("sample.jpg", {background: "green", height: 300, width: 300, crop: "pad"})

Java:

cloudinary.url().transformation(new Transformation().background("green").height(300).width(300).crop("pad")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {background: "green", height: 300, width: 300, crop: "pad"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {background: "green", height: 300, width: 300, crop: "pad"})

React:

<Image publicId="sample.jpg" >
  <Transformation background="green" height="300" width="300" crop="pad" />
</Image>

Vue.js:

<cld-image public-id="sample.jpg" >
  <cld-transformation background="green" height="300" width="300" crop="pad" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation background="green" height="300" width="300" crop="pad">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("green").Height(300).Width(300).Crop("pad")).BuildImageTag("sample.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("green").setHeight(300).setWidth(300).setCrop("pad")).generate("sample.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().background("green").height(300).width(300).crop("pad")).generate("sample.jpg");

Kotlin:

cloudinary.image {
publicId("sample.jpg")
resize(Resize.pad() {
width(300)
height(300)
background(Background.color(Color.GREEN))
})
}.generate()

Image padded to a width and height of 300 pixels with green background

You can also use a 4-digit or 8-digit RGBA hex quadruplet for the background color, where the 4th hex value represents the alpha (opacity) value (e.g., co_rgb:3e222240 results in 25% opacity).

Note

When using the background parameter to set the background color of a text overlay, you can also set the color to predominant_contrast. This selects the strongest contrasting color to the predominant color while taking all pixels in the image into account. For example, l_text:Arial_30:foo,b_predominant_contrast.

See full syntax: b (background) in the Transformation Reference.

Content-aware padding

You can automatically set the background color to the most prominent color in the image when applying one of the padding crop modes (pad, lpad, or mpad) by setting the background parameter to auto (b_auto in URLs). The parameter can also accept an additional value as follows:

b_auto:border - selects the predominant color while taking only the image border pixels into account. This is the default option for b_auto.
b_auto:predominant - selects the predominant color while taking all pixels in the image into account.
b_auto:border_contrast - selects the strongest contrasting color to the predominant color while taking only the image border pixels into account.
b_auto:predominant_contrast - selects the strongest contrasting color to the predominant color while taking all pixels in the image into account.

b_auto:border

b_auto:predominant

b_auto:border_contrast

b_auto:predominant_contrast

For example, padding the sample image to a width and height of 300 pixels, and with the background color set to the predominant color in the image:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/b_auto:predominant,c_pad,h_300,w_300/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :background=>"auto:predominant", :height=>300, :width=>300, :crop=>"pad")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("sample.jpg", array("background"=>"auto:predominant", "height"=>300, "width"=>300, "crop"=>"pad"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('sample.jpg'))
  ->resize(Resize::pad()->width(300)->height(300)
    ->background(Background::predominant()));

Library:

Python:

CloudinaryImage("sample.jpg").image(background="auto:predominant", height=300, width=300, crop="pad")

Node.js:

cloudinary.image("sample.jpg", {background: "auto:predominant", height: 300, width: 300, crop: "pad"})

Java:

cloudinary.url().transformation(new Transformation().background("auto:predominant").height(300).width(300).crop("pad")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {background: "auto:predominant", height: 300, width: 300, crop: "pad"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {background: "auto:predominant", height: 300, width: 300, crop: "pad"})

React:

<Image publicId="sample.jpg" >
  <Transformation background="auto:predominant" height="300" width="300" crop="pad" />
</Image>

Vue.js:

<cld-image public-id="sample.jpg" >
  <cld-transformation background="auto:predominant" height="300" width="300" crop="pad" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation background="auto:predominant" height="300" width="300" crop="pad">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("auto:predominant").Height(300).Width(300).Crop("pad")).BuildImageTag("sample.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("auto:predominant").setHeight(300).setWidth(300).setCrop("pad")).generate("sample.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().background("auto:predominant").height(300).width(300).crop("pad")).generate("sample.jpg");

Kotlin:

cloudinary.image {
publicId("sample.jpg")
resize(Resize.pad() {
width(300)
height(300)
background(Background.predominant())
})
}.generate()

Pad to 300x300 with the predominant color set as the background color

See full syntax: b_auto in the Transformation Reference.

Gradient fade

You can also apply a padding gradient fade effect with the predominant colors in the image by adjusting the value of the b_auto parameter as follows:

b_auto:[gradient_type]:[number]:[direction]

Where:

gradient_type - one of the following values:
- predominant_gradient - base the gradient fade effect on the predominant colors in the image
- predominant_gradient_contrast - base the effect on the colors that contrast the predominant colors in the image
- border_gradient - base the gradient fade effect on the predominant colors in the border pixels of the image
- border_gradient_contrast - base the effect on the colors that contrast the predominant colors in the border pixels of the image
number - the number of predominant colors to select. Possible values: 2 or 4. Default: 2
direction - if 2 colors are selected, this parameter specifies the direction to blend the 2 colors together (if 4 colors are selected each gets interpolated between the four corners). Possible values: horizontal, vertical, diagonal_desc, and diagonal_asc. Default: horizontal

predominant_gradient:2:diagonal_desc

predominant_gradient_contrast:4

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/b_auto:predominant_gradient_contrast:4,c_pad,h_300,w_300/horse.jpg

Ruby:

cl_image_tag("horse.jpg", :background=>"auto:predominant_gradient_contrast:4", :height=>300, :width=>300, :crop=>"pad")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("horse.jpg", array("background"=>"auto:predominant_gradient_contrast:4", "height"=>300, "width"=>300, "crop"=>"pad"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('horse.jpg'))
  ->resize(Resize::pad()->width(300)->height(300)
    ->background(Background::predominantGradient()
      ->contrast()->gradientColors(4)));

Library:

Python:

CloudinaryImage("horse.jpg").image(background="auto:predominant_gradient_contrast:4", height=300, width=300, crop="pad")

Node.js:

cloudinary.image("horse.jpg", {background: "auto:predominant_gradient_contrast:4", height: 300, width: 300, crop: "pad"})

Java:

cloudinary.url().transformation(new Transformation().background("auto:predominant_gradient_contrast:4").height(300).width(300).crop("pad")).imageTag("horse.jpg");

JS:

cloudinary.imageTag('horse.jpg', {background: "auto:predominant_gradient_contrast:4", height: 300, width: 300, crop: "pad"}).toHtml();

jQuery:

$.cloudinary.image("horse.jpg", {background: "auto:predominant_gradient_contrast:4", height: 300, width: 300, crop: "pad"})

React:

<Image publicId="horse.jpg" >
  <Transformation background="auto:predominant_gradient_contrast:4" height="300" width="300" crop="pad" />
</Image>

Vue.js:

<cld-image public-id="horse.jpg" >
  <cld-transformation background="auto:predominant_gradient_contrast:4" height="300" width="300" crop="pad" />
</cld-image>

Angular:

<cl-image public-id="horse.jpg" >
  <cl-transformation background="auto:predominant_gradient_contrast:4" height="300" width="300" crop="pad">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("auto:predominant_gradient_contrast:4").Height(300).Width(300).Crop("pad")).BuildImageTag("horse.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("auto:predominant_gradient_contrast:4").setHeight(300).setWidth(300).setCrop("pad")).generate("horse.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().background("auto:predominant_gradient_contrast:4").height(300).width(300).crop("pad")).generate("horse.jpg");

Kotlin:

cloudinary.image {
publicId("horse.jpg")
resize(Resize.pad() {
width(300)
height(300)
background(Background.predominantGradient() {
contrast()
gradientColors(4)
})
})
}.generate()

Custom color palette

Add a custom palette to limit the selected color to one of the colors in the palette that you provide. Once the predominant color has been calculated then the closest color from the available palette is selected. Append a colon and then the value palette followed by a list of colors, each separated by an underscore. For example, to automatically add padding and a palette that limits the possible choices to green, red and blue: b_auto:palette_red_green_blue

The palette can be used in combination with any of the various values for b_auto, and the same color in the palette can be selected more than once when requesting multiple predominant colors. For example, padding to a width and height of 300 pixels, with a 4 color gradient fade in the auto colored padding, and limiting the possible colors to red, green, blue, and orange:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/b_auto:predominant_gradient:4:palette_red_green_blue_orange,c_pad,h_300,w_300/horse.jpg

Ruby:

cl_image_tag("horse.jpg", :background=>"auto:predominant_gradient:4:palette_red_green_blue_orange", :height=>300, :width=>300, :crop=>"pad")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("horse.jpg", array("background"=>"auto:predominant_gradient:4:palette_red_green_blue_orange", "height"=>300, "width"=>300, "crop"=>"pad"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('horse.jpg'))
  ->resize(Resize::pad()->width(300)->height(300)
    ->background(Background::predominantGradient()
      ->gradientColors(4)
      ->palette(Color::RED, Color::GREEN, Color::BLUE, Color::ORANGE)));

Library:

Python:

CloudinaryImage("horse.jpg").image(background="auto:predominant_gradient:4:palette_red_green_blue_orange", height=300, width=300, crop="pad")

Node.js:

cloudinary.image("horse.jpg", {background: "auto:predominant_gradient:4:palette_red_green_blue_orange", height: 300, width: 300, crop: "pad"})

Java:

cloudinary.url().transformation(new Transformation().background("auto:predominant_gradient:4:palette_red_green_blue_orange").height(300).width(300).crop("pad")).imageTag("horse.jpg");

JS:

cloudinary.imageTag('horse.jpg', {background: "auto:predominant_gradient:4:palette_red_green_blue_orange", height: 300, width: 300, crop: "pad"}).toHtml();

jQuery:

$.cloudinary.image("horse.jpg", {background: "auto:predominant_gradient:4:palette_red_green_blue_orange", height: 300, width: 300, crop: "pad"})

React:

<Image publicId="horse.jpg" >
  <Transformation background="auto:predominant_gradient:4:palette_red_green_blue_orange" height="300" width="300" crop="pad" />
</Image>

Vue.js:

<cld-image public-id="horse.jpg" >
  <cld-transformation background="auto:predominant_gradient:4:palette_red_green_blue_orange" height="300" width="300" crop="pad" />
</cld-image>

Angular:

<cl-image public-id="horse.jpg" >
  <cl-transformation background="auto:predominant_gradient:4:palette_red_green_blue_orange" height="300" width="300" crop="pad">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("auto:predominant_gradient:4:palette_red_green_blue_orange").Height(300).Width(300).Crop("pad")).BuildImageTag("horse.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("auto:predominant_gradient:4:palette_red_green_blue_orange").setHeight(300).setWidth(300).setCrop("pad")).generate("horse.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().background("auto:predominant_gradient:4:palette_red_green_blue_orange").height(300).width(300).crop("pad")).generate("horse.jpg");

Kotlin:

cloudinary.image {
publicId("horse.jpg")
resize(Resize.pad() {
width(300)
height(300)
background(Background.predominantGradient() {
gradientColors(4)
palette(Color.RED, Color.GREEN, Color.BLUE, Color.ORANGE)
})
})
}.generate()

Pad to 300x300 with 4 color gradient fade from given palette

Gradient fade into padding

Fade the image into the added padding by adding the gradient_fade effect with a value of symmetric_pad (e_gradient_fade:symmetric_pad in URLs). The padding blends into the edge of the image with a strength indicated by an additional value, separated by a colon (Range: 0 to 100, Default: 20). Values for x and y can also be specified as a percentage (range: 0.0 to 1.0), or in pixels (integer values) to indicate how far into the image to apply the gradient effect. By default, the gradient is applied 30% into the image (x_0.3).

For example, padding the sample image to a width and height of 300 pixels, with the background color set to the predominant color, and with a gradient fade effect, between the added padding and 50% into the image.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/b_auto:predominant,c_pad,h_300,w_300/e_gradient_fade:symmetric_pad,x_0.5/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :transformation=>[
  {:background=>"auto:predominant", :height=>300, :width=>300, :crop=>"pad"},
  {:effect=>"gradient_fade:symmetric_pad", :x=>0.5}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("background"=>"auto:predominant", "height"=>300, "width"=>300, "crop"=>"pad"),
  array("effect"=>"gradient_fade:symmetric_pad", "x"=>"0.5")
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('sample.jpg'))
  ->resize(Resize::pad()->width(300)->height(300)->background(Background::predominant()))
  ->effect(Effect::gradientFade()
    ->type(GradientFade::symmetricPad())
    ->horizontalStartPoint(0.5));

Library:

Python:

CloudinaryImage("sample.jpg").image(transformation=[
  {'background': "auto:predominant", 'height': 300, 'width': 300, 'crop': "pad"},
  {'effect': "gradient_fade:symmetric_pad", 'x': "0.5"}
  ])

Node.js:

cloudinary.image("sample.jpg", {transformation: [
  {background: "auto:predominant", height: 300, width: 300, crop: "pad"},
  {effect: "gradient_fade:symmetric_pad", x: "0.5"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .background("auto:predominant").height(300).width(300).crop("pad").chain()
  .effect("gradient_fade:symmetric_pad").x(0.5)).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {transformation: [
  {background: "auto:predominant", height: 300, width: 300, crop: "pad"},
  {effect: "gradient_fade:symmetric_pad", x: "0.5"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {transformation: [
  {background: "auto:predominant", height: 300, width: 300, crop: "pad"},
  {effect: "gradient_fade:symmetric_pad", x: "0.5"}
  ]})

React:

<Image publicId="sample.jpg" >
  <Transformation background="auto:predominant" height="300" width="300" crop="pad" />
  <Transformation effect="gradient_fade:symmetric_pad" x="0.5" />
</Image>

Vue.js:

<cld-image public-id="sample.jpg" >
  <cld-transformation background="auto:predominant" height="300" width="300" crop="pad" />
  <cld-transformation effect="gradient_fade:symmetric_pad" x="0.5" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation background="auto:predominant" height="300" width="300" crop="pad">
  </cl-transformation>
  <cl-transformation effect="gradient_fade:symmetric_pad" x="0.5">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Background("auto:predominant").Height(300).Width(300).Crop("pad").Chain()
  .Effect("gradient_fade:symmetric_pad").X(0.5)).BuildImageTag("sample.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setBackground("auto:predominant").setHeight(300).setWidth(300).setCrop("pad").chain()
  .setEffect("gradient_fade:symmetric_pad").setX(0.5)).generate("sample.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .background("auto:predominant").height(300).width(300).crop("pad").chain()
  .effect("gradient_fade:symmetric_pad").x(0.5)).generate("sample.jpg");

Kotlin:

cloudinary.image {
publicId("sample.jpg")
resize(Resize.pad() {
width(300)
height(300)
background(Background.predominant())
})
effect(Effect.gradientFade() {
type(GradientFade.symmetricPad())
horizontalStartPoint(0.5f)
})
}.generate()

Pad to 300x300 with the predominant color set as the background color and gradient fade into padding

See full syntax: e_gradient_fade in the Transformation Reference.

Borders

Add a solid border around an image with the border parameter (bo in URLs). The parameter accepts a value with a CSS-like format: width_style_color (e.g., 3px_solid_black).

An opaque color can be set as an RGB hex triplet (e.g., rgb:3e2222), a 3-digit RGB hex (e.g., rgb:777) or a named color (e.g., green).

You can also use a 4-digit or 8-digit RGBA hex quadruplet for the color, where the 4th hex value represents the alpha (opacity) value (e.g., co_rgb:3e222240 results in 25% opacity).

Additionally, Cloudinary's client libraries also support a # shortcut for RGB (e.g., setting color to #3e2222 which is then translated to rgb:3e2222), and when using Cloudinary's client libraries, you can optionally set the border values programmatically instead of as a single string (e.g., :border => { :width => 4, :color => 'black' }).

Note

Currently only the 'solid' border style is supported.

For example, the uploaded jpg image named sample delivered with a 5 pixel red border:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/bo_5px_solid_red/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :border=>"5px_solid_red")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("sample.jpg", array("border"=>"5px_solid_red"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('sample.jpg'))
  ->border(Border::solid(5, Color::RED));

Library:

Python:

CloudinaryImage("sample.jpg").image(border="5px_solid_red")

Node.js:

cloudinary.image("sample.jpg", {border: "5px_solid_red"})

Java:

cloudinary.url().transformation(new Transformation().border("5px_solid_red")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {border: "5px_solid_red"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {border: "5px_solid_red"})

React:

<Image publicId="sample.jpg" >
  <Transformation border="5px_solid_red" />
</Image>

Vue.js:

<cld-image public-id="sample.jpg" >
  <cld-transformation border="5px_solid_red" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation border="5px_solid_red">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("5px_solid_red")).BuildImageTag("sample.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBorder("5px_solid_red")).generate("sample.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().border("5px_solid_red")).generate("sample.jpg");

Kotlin:

cloudinary.image {
publicId("sample.jpg")
border(Border.solid(5, Color.RED))
}.generate()

Borders are also useful for adding to overlays to clearly define the overlaying image, and also automatically adapt to any rounded corner transformations. For example, an image of lady cropped with face detection and given rounded corners with a 10 pixel grey border, and an overlay of the image of young_couple resized to a 150x150 circular thumbnail with face detection and a black 3 pixel border, added to the northeast corner:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/c_crop,g_face/bo_10px_solid_grey,r_75/l_young_couple/c_thumb,g_faces,h_150,w_150/bo_3px_solid_black,r_max/fl_layer_apply,g_north_east/lady.jpg

Ruby:

cl_image_tag("lady.jpg", :transformation=>[
  {:gravity=>"face", :crop=>"crop"},
  {:border=>"10px_solid_grey", :radius=>75},
  {:overlay=>"young_couple"},
  {:gravity=>"faces", :height=>150, :width=>150, :crop=>"thumb"},
  {:border=>"3px_solid_black", :radius=>"max"},
  {:flags=>"layer_apply", :gravity=>"north_east"}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("lady.jpg", array("transformation"=>array(
  array("gravity"=>"face", "crop"=>"crop"),
  array("border"=>"10px_solid_grey", "radius"=>75),
  array("overlay"=>"young_couple"),
  array("gravity"=>"faces", "height"=>150, "width"=>150, "crop"=>"thumb"),
  array("border"=>"3px_solid_black", "radius"=>"max"),
  array("flags"=>"layer_apply", "gravity"=>"north_east")
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('lady.jpg'))
  ->resize(Resize::crop()->gravity(Gravity::focusOn(FocusOn::face())))
  ->border(Border::solid(10, Color::GREY)->roundCorners(RoundCorners::byRadius(75)))
  ->overlay(
      Overlay::source(Source::image('young_couple')
        ->transformation((new ImageTransformation())
          ->resize(Resize::thumbnail()->width(150)->height(150)->gravity(Gravity::focusOn(FocusOn::faces())))
          ->border(Border::solid(3, Color::BLACK)->roundCorners(RoundCorners::max()))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::northEast()))
  ));

Library:

Python:

CloudinaryImage("lady.jpg").image(transformation=[
  {'gravity': "face", 'crop': "crop"},
  {'border': "10px_solid_grey", 'radius': 75},
  {'overlay': "young_couple"},
  {'gravity': "faces", 'height': 150, 'width': 150, 'crop': "thumb"},
  {'border': "3px_solid_black", 'radius': "max"},
  {'flags': "layer_apply", 'gravity': "north_east"}
  ])

Node.js:

cloudinary.image("lady.jpg", {transformation: [
  {gravity: "face", crop: "crop"},
  {border: "10px_solid_grey", radius: 75},
  {overlay: "young_couple"},
  {gravity: "faces", height: 150, width: 150, crop: "thumb"},
  {border: "3px_solid_black", radius: "max"},
  {flags: "layer_apply", gravity: "north_east"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .gravity("face").crop("crop").chain()
  .border("10px_solid_grey").radius(75).chain()
  .overlay(new Layer().publicId("young_couple")).chain()
  .gravity("faces").height(150).width(150).crop("thumb").chain()
  .border("3px_solid_black").radius("max").chain()
  .flags("layer_apply").gravity("north_east")).imageTag("lady.jpg");

JS:

cloudinary.imageTag('lady.jpg', {transformation: [
  {gravity: "face", crop: "crop"},
  {border: "10px_solid_grey", radius: 75},
  {overlay: new cloudinary.Layer().publicId("young_couple")},
  {gravity: "faces", height: 150, width: 150, crop: "thumb"},
  {border: "3px_solid_black", radius: "max"},
  {flags: "layer_apply", gravity: "north_east"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("lady.jpg", {transformation: [
  {gravity: "face", crop: "crop"},
  {border: "10px_solid_grey", radius: 75},
  {overlay: new cloudinary.Layer().publicId("young_couple")},
  {gravity: "faces", height: 150, width: 150, crop: "thumb"},
  {border: "3px_solid_black", radius: "max"},
  {flags: "layer_apply", gravity: "north_east"}
  ]})

React:

<Image publicId="lady.jpg" >
  <Transformation gravity="face" crop="crop" />
  <Transformation border="10px_solid_grey" radius="75" />
  <Transformation overlay="young_couple" />
  <Transformation gravity="faces" height="150" width="150" crop="thumb" />
  <Transformation border="3px_solid_black" radius="max" />
  <Transformation flags="layer_apply" gravity="north_east" />
</Image>

Vue.js:

<cld-image public-id="lady.jpg" >
  <cld-transformation gravity="face" crop="crop" />
  <cld-transformation border="10px_solid_grey" radius="75" />
  <cld-transformation :overlay="young_couple" />
  <cld-transformation gravity="faces" height="150" width="150" crop="thumb" />
  <cld-transformation border="3px_solid_black" radius="max" />
  <cld-transformation flags="layer_apply" gravity="north_east" />
</cld-image>

Angular:

<cl-image public-id="lady.jpg" >
  <cl-transformation gravity="face" crop="crop">
  </cl-transformation>
  <cl-transformation border="10px_solid_grey" radius="75">
  </cl-transformation>
  <cl-transformation overlay="young_couple">
  </cl-transformation>
  <cl-transformation gravity="faces" height="150" width="150" crop="thumb">
  </cl-transformation>
  <cl-transformation border="3px_solid_black" radius="max">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Crop("crop").Chain()
  .Border("10px_solid_grey").Radius(75).Chain()
  .Overlay(new Layer().PublicId("young_couple")).Chain()
  .Gravity("faces").Height(150).Width(150).Crop("thumb").Chain()
  .Border("3px_solid_black").Radius("max").Chain()
  .Flags("layer_apply").Gravity("north_east")).BuildImageTag("lady.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setCrop("crop").chain()
  .setBorder("10px_solid_grey").setRadius(75).chain()
  .setOverlay("young_couple").chain()
  .setGravity("faces").setHeight(150).setWidth(150).setCrop("thumb").chain()
  .setBorder("3px_solid_black").setRadius("max").chain()
  .setFlags("layer_apply").setGravity("north_east")).generate("lady.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .gravity("face").crop("crop").chain()
  .border("10px_solid_grey").radius(75).chain()
  .overlay(new Layer().publicId("young_couple")).chain()
  .gravity("faces").height(150).width(150).crop("thumb").chain()
  .border("3px_solid_black").radius("max").chain()
  .flags("layer_apply").gravity("north_east")).generate("lady.jpg");

Kotlin:

cloudinary.image {
publicId("lady.jpg")
resize(Resize.crop() {
gravity(Gravity.focusOn(FocusOn.face()))
})
border(Border.solid(10, Color.GREY) {
roundCorners(RoundCorners.byRadius(75))
})
overlay(Overlay.source(Source.image("young_couple") {
transformation(ImageTransformation {
resize(Resize.thumbnail() {
width(150)
height(150)
gravity(Gravity.focusOn(FocusOn.faces()))
})
border(Border.solid(3, Color.BLACK) {
roundCorners(RoundCorners.max())
})
})
}) {
position(Position {
gravity(Gravity.compass(Compass.northEast()))
})
})
}.generate()

Base image with rounded corners + overlay with rounded corners

Note

When using the border parameter to set the border color of a text overlay, you can also set the color to predominant_contrast. This selects the strongest contrasting color to the predominant color while taking all pixels in the image into account. For example, l_text:Arial_30:foo,bo_3px_solid_predominant_contrast

See full syntax: bo (border) in the Transformation Reference.

Color blind effects

Cloudinary has a number of features that can help you to choose the best images as well as to transform problematic images to ones that are more accessible to color blind people. You can use Cloudinary to:

Simulate how an image would look to people with different color blind conditions.
Assist people with color blind conditions to help differentiate problematic colors.
Analyze images to provide color blind accessibility scores and information on which colors are the hardest to differentiate.

Simulate color blind conditions

You can simulate a number of different color blind conditions using the simulate_colorblind effect. For full syntax and supported conditions, see the e_simulate_colorblind parameter in the Transformation URL API Reference.

Simulate the way an image would appear to someone with deuteranopia (most common form of) color blindness:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_simulate_colorblind:deuteranopia/docs/colorblind_green_red.jpg

Ruby:

cl_image_tag("docs/colorblind_green_red.jpg", :effect=>"simulate_colorblind:deuteranopia")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("docs/colorblind_green_red.jpg", array("effect"=>"simulate_colorblind:deuteranopia"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('docs/colorblind_green_red.jpg'))
  ->effect(Effect::simulateColorBlind()
    ->condition(SimulateColorBlind::deuteranopia()));

Library:

Python:

CloudinaryImage("docs/colorblind_green_red.jpg").image(effect="simulate_colorblind:deuteranopia")

Node.js:

cloudinary.image("docs/colorblind_green_red.jpg", {effect: "simulate_colorblind:deuteranopia"})

Java:

cloudinary.url().transformation(new Transformation().effect("simulate_colorblind:deuteranopia")).imageTag("docs/colorblind_green_red.jpg");

JS:

cloudinary.imageTag('docs/colorblind_green_red.jpg', {effect: "simulate_colorblind:deuteranopia"}).toHtml();

jQuery:

$.cloudinary.image("docs/colorblind_green_red.jpg", {effect: "simulate_colorblind:deuteranopia"})

React:

<Image publicId="docs/colorblind_green_red.jpg" >
  <Transformation effect="simulate_colorblind:deuteranopia" />
</Image>

Vue.js:

<cld-image public-id="docs/colorblind_green_red.jpg" >
  <cld-transformation effect="simulate_colorblind:deuteranopia" />
</cld-image>

Angular:

<cl-image public-id="docs/colorblind_green_red.jpg" >
  <cl-transformation effect="simulate_colorblind:deuteranopia">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("simulate_colorblind:deuteranopia")).BuildImageTag("docs/colorblind_green_red.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("simulate_colorblind:deuteranopia")).generate("docs/colorblind_green_red.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("simulate_colorblind:deuteranopia")).generate("docs/colorblind_green_red.jpg");

Kotlin:

cloudinary.image {
publicId("docs/colorblind_green_red.jpg")
effect(Effect.simulateColorBlind() {
condition(SimulateColorBlind.deuteranopia())
})
}.generate()

Original image

Red and green image when simulating color blind condition

Deuteranopia simulation

See full syntax: e_simulate_colorblind in the Transformation Reference.

Assist people with color blind conditions

Use the assist_colorblind effect (e_assist_colorblind in URLs) to help people with color blind conditions to differentiate between colors.

You can add stripes in different directions and thicknesses to different colors, making them easier to differentiate, for example:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_assist_colorblind:8/docs/colorblind_green_red.jpg

Ruby:

cl_image_tag("docs/colorblind_green_red.jpg", :effect=>"assist_colorblind:8")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("docs/colorblind_green_red.jpg", array("effect"=>"assist_colorblind:8"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('docs/colorblind_green_red.jpg'))
  ->effect(Effect::assistColorBlind()->stripesStrength(8));

Library:

Python:

CloudinaryImage("docs/colorblind_green_red.jpg").image(effect="assist_colorblind:8")

Node.js:

cloudinary.image("docs/colorblind_green_red.jpg", {effect: "assist_colorblind:8"})

Java:

cloudinary.url().transformation(new Transformation().effect("assist_colorblind:8")).imageTag("docs/colorblind_green_red.jpg");

JS:

cloudinary.imageTag('docs/colorblind_green_red.jpg', {effect: "assist_colorblind:8"}).toHtml();

jQuery:

$.cloudinary.image("docs/colorblind_green_red.jpg", {effect: "assist_colorblind:8"})

React:

<Image publicId="docs/colorblind_green_red.jpg" >
  <Transformation effect="assist_colorblind:8" />
</Image>

Vue.js:

<cld-image public-id="docs/colorblind_green_red.jpg" >
  <cld-transformation effect="assist_colorblind:8" />
</cld-image>

Angular:

<cl-image public-id="docs/colorblind_green_red.jpg" >
  <cl-transformation effect="assist_colorblind:8">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("assist_colorblind:8")).BuildImageTag("docs/colorblind_green_red.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("assist_colorblind:8")).generate("docs/colorblind_green_red.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("assist_colorblind:8")).generate("docs/colorblind_green_red.jpg");

Kotlin:

cloudinary.image {
publicId("docs/colorblind_green_red.jpg")
effect(Effect.assistColorBlind() {
stripesStrength(8)
})
}.generate()

Help a color blind user differentiate similar colors with stripes

A color blind person would see the stripes like this:

Stripe color-blind assistance with simulation

Alternatively, you can use color shifts to make colors easier to distinguish by specifying the xray assist type, for example:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_assist_colorblind:xray/docs/colorblind_green_red.jpg

Ruby:

cl_image_tag("docs/colorblind_green_red.jpg", :effect=>"assist_colorblind:xray")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("docs/colorblind_green_red.jpg", array("effect"=>"assist_colorblind:xray"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('docs/colorblind_green_red.jpg'))
  ->effect(Effect::assistColorBlind()->xray(true));

Library:

Python:

CloudinaryImage("docs/colorblind_green_red.jpg").image(effect="assist_colorblind:xray")

Node.js:

cloudinary.image("docs/colorblind_green_red.jpg", {effect: "assist_colorblind:xray"})

Java:

cloudinary.url().transformation(new Transformation().effect("assist_colorblind:xray")).imageTag("docs/colorblind_green_red.jpg");

JS:

cloudinary.imageTag('docs/colorblind_green_red.jpg', {effect: "assist_colorblind:xray"}).toHtml();

jQuery:

$.cloudinary.image("docs/colorblind_green_red.jpg", {effect: "assist_colorblind:xray"})

React:

<Image publicId="docs/colorblind_green_red.jpg" >
  <Transformation effect="assist_colorblind:xray" />
</Image>

Vue.js:

<cld-image public-id="docs/colorblind_green_red.jpg" >
  <cld-transformation effect="assist_colorblind:xray" />
</cld-image>

Angular:

<cl-image public-id="docs/colorblind_green_red.jpg" >
  <cl-transformation effect="assist_colorblind:xray">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("assist_colorblind:xray")).BuildImageTag("docs/colorblind_green_red.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("assist_colorblind:xray")).generate("docs/colorblind_green_red.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("assist_colorblind:xray")).generate("docs/colorblind_green_red.jpg");

Kotlin:

cloudinary.image {
publicId("docs/colorblind_green_red.jpg")
effect(Effect.assistColorBlind() {
xray()
})
}.generate()

Help a colorblind user differentiate similar colors with color shifts

See full syntax: e_assist_colorblind in the Transformation Reference.

Distort

Using the distort effect, you can change the shape of an image, distorting its dimensions and the image itself. It works in one of two modes: you can either change the positioning of each of the corners, or you can warp the image into an arc.

To change the positioning of each of the corners, it is helpful to have in mind a picture like the one below. The solid rectangle shows the coordinates of the corners of the original image. The intended result of the distortion is represented by the dashed shape. The new corner coordinates are specified in the distort effect as x,y pairs, clockwise from top-left. For example:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/c_scale,w_300/e_distort:40:25:280:60:260:155:35:165/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :transformation=>[
  {:width=>300, :crop=>"scale"},
  {:effect=>"distort:40:25:280:60:260:155:35:165"}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("width"=>300, "crop"=>"scale"),
  array("effect"=>"distort:40:25:280:60:260:155:35:165")
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->width(300))
  ->reshape(Reshape::distort([40, 25, 280, 60, 260, 155, 35, 165]));

Library:

Python:

CloudinaryImage("sample.jpg").image(transformation=[
  {'width': 300, 'crop': "scale"},
  {'effect': "distort:40:25:280:60:260:155:35:165"}
  ])

Node.js:

cloudinary.image("sample.jpg", {transformation: [
  {width: 300, crop: "scale"},
  {effect: "distort:40:25:280:60:260:155:35:165"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .effect("distort:40:25:280:60:260:155:35:165")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {transformation: [
  {width: 300, crop: "scale"},
  {effect: "distort:40:25:280:60:260:155:35:165"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {transformation: [
  {width: 300, crop: "scale"},
  {effect: "distort:40:25:280:60:260:155:35:165"}
  ]})

React:

<Image publicId="sample.jpg" >
  <Transformation width="300" crop="scale" />
  <Transformation effect="distort:40:25:280:60:260:155:35:165" />
</Image>

Vue.js:

<cld-image public-id="sample.jpg" >
  <cld-transformation width="300" crop="scale" />
  <cld-transformation effect="distort:40:25:280:60:260:155:35:165" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
  <cl-transformation effect="distort:40:25:280:60:260:155:35:165">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Crop("scale").Chain()
  .Effect("distort:40:25:280:60:260:155:35:165")).BuildImageTag("sample.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setCrop("scale").chain()
  .setEffect("distort:40:25:280:60:260:155:35:165")).generate("sample.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .effect("distort:40:25:280:60:260:155:35:165")).generate("sample.jpg");

Kotlin:

cloudinary.image {
publicId("sample.jpg")
resize(Resize.scale() {
width(300)
})
reshape(Reshape.distort(listOf(40, 25, 280, 60, 260, 155, 35, 165)))
}.generate()

For more details on perspective warping with the distort effect, see the article on How to dynamically distort images to fit your graphic design.

To curve an image, you can specify arc and the number of degrees in the distort effect, instead of the corner coordinates. If you specify a positive value for the number of degrees, the image is curved upwards, like a frown. Negative values curve the image downwards, like a smile.

You can distort text in the same way as images, for example, to add curved text to the frisbee image (e_distort:arc:-120):

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/co_white,l_text:impact_150:Your Brand Name or Logo Here/o_60/e_distort:arc:-120.0/fl_layer_apply,g_south,y_840/frisbee.jpg

Ruby:

cl_image_tag("frisbee.jpg", :transformation=>[
  {:color=>"white", :overlay=>{:font_family=>"impact", :font_size=>150, :text=>"Your%20Brand%20Name%20or%20Logo%20Here"}},
  {:opacity=>60},
  {:effect=>"distort:arc:-120.0"},
  {:flags=>"layer_apply", :gravity=>"south", :y=>840}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("frisbee.jpg", array("transformation"=>array(
  array("color"=>"white", "overlay"=>array("font_family"=>"impact", "font_size"=>150, "text"=>"Your%20Brand%20Name%20or%20Logo%20Here")),
  array("opacity"=>60),
  array("effect"=>"distort:arc:-120.0"),
  array("flags"=>"layer_apply", "gravity"=>"south", "y"=>840)
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('frisbee.jpg'))
  ->overlay(
      Overlay::source(Source::text('Your Brand Name or Logo Here', (new TextStyle('impact', 150)))
        ->textColor(Color::WHITE)
        ->transformation((new ImageTransformation())
          ->adjust(Adjust::opacity(60))
          ->reshape(Reshape::distortArc(-120.0))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::south()))
        ->offsetY(840)
  ));

Library:

Python:

CloudinaryImage("frisbee.jpg").image(transformation=[
  {'color': "white", 'overlay': {'font_family': "impact", 'font_size': 150, 'text': "Your%20Brand%20Name%20or%20Logo%20Here"}},
  {'opacity': 60},
  {'effect': "distort:arc:-120.0"},
  {'flags': "layer_apply", 'gravity': "south", 'y': 840}
  ])

Node.js:

cloudinary.image("frisbee.jpg", {transformation: [
  {color: "white", overlay: {font_family: "impact", font_size: 150, text: "Your%20Brand%20Name%20or%20Logo%20Here"}},
  {opacity: 60},
  {effect: "distort:arc:-120.0"},
  {flags: "layer_apply", gravity: "south", y: 840}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .color("white").overlay(new TextLayer().fontFamily("impact").fontSize(150).text("Your%20Brand%20Name%20or%20Logo%20Here")).chain()
  .opacity(60).chain()
  .effect("distort:arc:-120.0").chain()
  .flags("layer_apply").gravity("south").y(840)).imageTag("frisbee.jpg");

JS:

cloudinary.imageTag('frisbee.jpg', {transformation: [
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("impact").fontSize(150).text("Your%20Brand%20Name%20or%20Logo%20Here")},
  {opacity: 60},
  {effect: "distort:arc:-120.0"},
  {flags: "layer_apply", gravity: "south", y: 840}
  ]}).toHtml();

jQuery:

$.cloudinary.image("frisbee.jpg", {transformation: [
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("impact").fontSize(150).text("Your%20Brand%20Name%20or%20Logo%20Here")},
  {opacity: 60},
  {effect: "distort:arc:-120.0"},
  {flags: "layer_apply", gravity: "south", y: 840}
  ]})

React:

<Image publicId="frisbee.jpg" >
  <Transformation color="white" overlay={{fontFamily: "impact", fontSize: 150, text: "Your%20Brand%20Name%20or%20Logo%20Here"}} />
  <Transformation opacity="60" />
  <Transformation effect="distort:arc:-120.0" />
  <Transformation flags="layer_apply" gravity="south" y="840" />
</Image>

Vue.js:

<cld-image public-id="frisbee.jpg" >
  <cld-transformation color="white" :overlay="{fontFamily: 'impact', fontSize: 150, text: 'Your%20Brand%20Name%20or%20Logo%20Here'}" />
  <cld-transformation opacity="60" />
  <cld-transformation effect="distort:arc:-120.0" />
  <cld-transformation flags="layer_apply" gravity="south" y="840" />
</cld-image>

Angular:

<cl-image public-id="frisbee.jpg" >
  <cl-transformation color="white" overlay="text:impact_150:Your%20Brand%20Name%20or%20Logo%20Here">
  </cl-transformation>
  <cl-transformation opacity="60">
  </cl-transformation>
  <cl-transformation effect="distort:arc:-120.0">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south" y="840">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Color("white").Overlay(new TextLayer().FontFamily("impact").FontSize(150).Text("Your%20Brand%20Name%20or%20Logo%20Here")).Chain()
  .Opacity(60).Chain()
  .Effect("distort:arc:-120.0").Chain()
  .Flags("layer_apply").Gravity("south").Y(840)).BuildImageTag("frisbee.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setColor("white").setOverlay("text:impact_150:Your%20Brand%20Name%20or%20Logo%20Here").chain()
  .setOpacity(60).chain()
  .setEffect("distort:arc:-120.0").chain()
  .setFlags("layer_apply").setGravity("south").setY(840)).generate("frisbee.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .color("white").overlay(new TextLayer().fontFamily("impact").fontSize(150).text("Your%20Brand%20Name%20or%20Logo%20Here")).chain()
  .opacity(60).chain()
  .effect("distort:arc:-120.0").chain()
  .flags("layer_apply").gravity("south").y(840)).generate("frisbee.jpg");

Kotlin:

cloudinary.image {
publicId("frisbee.jpg")
overlay(Overlay.source(Source.text("Your Brand Name or Logo Here", TextStyle("impact", 150)) {
textColor(Color.WHITE)
transformation(ImageTransformation {
adjust(Adjust.opacity(60))
reshape(Reshape.distortArc(-120.0f))
})
}) {
position(Position {
gravity(Gravity.compass(Compass.south()))
offsetY(840)
})
})
}.generate()

See full syntax: e_distort in the Transformation Reference.

Outline

The outline effect (e_outline in URLs) enables you to add an outline to your transparent images. The parameter can also be passed additional values as follows:

outline:[mode]:[width]:[blur]

mode - how to apply the outline effect which can be one of the following values: inner, inner_fill, outer, fill. Default value: inner and outer.
width - the first integer supplied applies to the thickness of the outline in pixels. Default value: 5. Range: 1 - 100
blur - the second integer supplied applies to the level of blur of the outline. Default value: 0. Range: 0 - 2000

Original

e_outline

e_outline:inner

e_outline:inner_fill

e_outline:outer

e_outline:fill

Use the color parameter (co in URLs) to define a new color for the outline (the default is black). The color can be specified as an RGB hex triplet (e.g., rgb:3e2222), a 3-digit RGB hex (e.g., rgb:777) or a named color (e.g., green). For example, to add an orange outline:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/c_scale,h_200/co_orange,e_outline:15:200/balloon.png

Ruby:

cl_image_tag("balloon.png", :transformation=>[
  {:height=>200, :crop=>"scale"},
  {:color=>"orange", :effect=>"outline:15:200"}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("balloon.png", array("transformation"=>array(
  array("height"=>200, "crop"=>"scale"),
  array("color"=>"orange", "effect"=>"outline:15:200")
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('balloon.png'))
  ->resize(Resize::scale()->height(200))
  ->effect(Effect::outline()->width(15)->blurLevel(200)
    ->color(Color::ORANGE));

Library:

Python:

CloudinaryImage("balloon.png").image(transformation=[
  {'height': 200, 'crop': "scale"},
  {'color': "orange", 'effect': "outline:15:200"}
  ])

Node.js:

cloudinary.image("balloon.png", {transformation: [
  {height: 200, crop: "scale"},
  {color: "orange", effect: "outline:15:200"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .height(200).crop("scale").chain()
  .color("orange").effect("outline:15:200")).imageTag("balloon.png");

JS:

cloudinary.imageTag('balloon.png', {transformation: [
  {height: 200, crop: "scale"},
  {color: "orange", effect: "outline:15:200"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("balloon.png", {transformation: [
  {height: 200, crop: "scale"},
  {color: "orange", effect: "outline:15:200"}
  ]})

React:

<Image publicId="balloon.png" >
  <Transformation height="200" crop="scale" />
  <Transformation color="orange" effect="outline:15:200" />
</Image>

Vue.js:

<cld-image public-id="balloon.png" >
  <cld-transformation height="200" crop="scale" />
  <cld-transformation color="orange" effect="outline:15:200" />
</cld-image>

Angular:

<cl-image public-id="balloon.png" >
  <cl-transformation height="200" crop="scale">
  </cl-transformation>
  <cl-transformation color="orange" effect="outline:15:200">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(200).Crop("scale").Chain()
  .Color("orange").Effect("outline:15:200")).BuildImageTag("balloon.png")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(200).setCrop("scale").chain()
  .setColor("orange").setEffect("outline:15:200")).generate("balloon.png")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .height(200).crop("scale").chain()
  .color("orange").effect("outline:15:200")).generate("balloon.png");

Kotlin:

cloudinary.image {
publicId("balloon.png")
resize(Resize.scale() {
height(200)
})
effect(Effect.outline() {
width(15)
blurLevel(200)
color(Color.ORANGE)
})
}.generate()

You can also add a multi-colored outline by creating successive outline effect components. For example:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/c_scale,w_200/co_red,e_outline:20:200/co_orange,e_outline:15:200/co_yellow,e_outline:10:200/shoes.png

Ruby:

cl_image_tag("shoes.png", :transformation=>[
  {:width=>200, :crop=>"scale"},
  {:color=>"red", :effect=>"outline:20:200"},
  {:color=>"orange", :effect=>"outline:15:200"},
  {:color=>"yellow", :effect=>"outline:10:200"}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("shoes.png", array("transformation"=>array(
  array("width"=>200, "crop"=>"scale"),
  array("color"=>"red", "effect"=>"outline:20:200"),
  array("color"=>"orange", "effect"=>"outline:15:200"),
  array("color"=>"yellow", "effect"=>"outline:10:200")
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('shoes.png'))
  ->resize(Resize::scale()->width(200))
  ->effect(Effect::outline()->width(20)->blurLevel(200)->color(Color::RED))
  ->effect(Effect::outline()->width(15)->blurLevel(200)->color(Color::ORANGE))
  ->effect(Effect::outline()->width(10)->blurLevel(200)
    ->color(Color::YELLOW));

Library:

Python:

CloudinaryImage("shoes.png").image(transformation=[
  {'width': 200, 'crop': "scale"},
  {'color': "red", 'effect': "outline:20:200"},
  {'color': "orange", 'effect': "outline:15:200"},
  {'color': "yellow", 'effect': "outline:10:200"}
  ])

Node.js:

cloudinary.image("shoes.png", {transformation: [
  {width: 200, crop: "scale"},
  {color: "red", effect: "outline:20:200"},
  {color: "orange", effect: "outline:15:200"},
  {color: "yellow", effect: "outline:10:200"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .color("red").effect("outline:20:200").chain()
  .color("orange").effect("outline:15:200").chain()
  .color("yellow").effect("outline:10:200")).imageTag("shoes.png");

JS:

cloudinary.imageTag('shoes.png', {transformation: [
  {width: 200, crop: "scale"},
  {color: "red", effect: "outline:20:200"},
  {color: "orange", effect: "outline:15:200"},
  {color: "yellow", effect: "outline:10:200"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("shoes.png", {transformation: [
  {width: 200, crop: "scale"},
  {color: "red", effect: "outline:20:200"},
  {color: "orange", effect: "outline:15:200"},
  {color: "yellow", effect: "outline:10:200"}
  ]})

React:

<Image publicId="shoes.png" >
  <Transformation width="200" crop="scale" />
  <Transformation color="red" effect="outline:20:200" />
  <Transformation color="orange" effect="outline:15:200" />
  <Transformation color="yellow" effect="outline:10:200" />
</Image>

Vue.js:

<cld-image public-id="shoes.png" >
  <cld-transformation width="200" crop="scale" />
  <cld-transformation color="red" effect="outline:20:200" />
  <cld-transformation color="orange" effect="outline:15:200" />
  <cld-transformation color="yellow" effect="outline:10:200" />
</cld-image>

Angular:

<cl-image public-id="shoes.png" >
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
  <cl-transformation color="red" effect="outline:20:200">
  </cl-transformation>
  <cl-transformation color="orange" effect="outline:15:200">
  </cl-transformation>
  <cl-transformation color="yellow" effect="outline:10:200">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Crop("scale").Chain()
  .Color("red").Effect("outline:20:200").Chain()
  .Color("orange").Effect("outline:15:200").Chain()
  .Color("yellow").Effect("outline:10:200")).BuildImageTag("shoes.png")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setCrop("scale").chain()
  .setColor("red").setEffect("outline:20:200").chain()
  .setColor("orange").setEffect("outline:15:200").chain()
  .setColor("yellow").setEffect("outline:10:200")).generate("shoes.png")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .color("red").effect("outline:20:200").chain()
  .color("orange").effect("outline:15:200").chain()
  .color("yellow").effect("outline:10:200")).generate("shoes.png");

Kotlin:

cloudinary.image {
publicId("shoes.png")
resize(Resize.scale() {
width(200)
})
effect(Effect.outline() {
width(20)
blurLevel(200)
color(Color.RED)
})
effect(Effect.outline() {
width(15)
blurLevel(200)
color(Color.ORANGE)
})
effect(Effect.outline() {
width(10)
blurLevel(200)
color(Color.YELLOW)
})
}.generate()

See full syntax: e_outline in the Transformation Reference.

Replace color

You can replace a color in an image using the replace_color effect. Unless you specify otherwise, the most prominent high-saturation color in an image is selected as the color to change. By default, a tolerance of 50 is applied to this color, representing a radius in the LAB color space, so that similar shades are also replaced, achieving a more natural effect.

For example, without specifying a color to change, the most prominent color is changed to the specified maroon:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_replace_color:maroon/blue_burlap.png

Ruby:

cl_image_tag("blue_burlap.png", :effect=>"replace_color:maroon")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("blue_burlap.png", array("effect"=>"replace_color:maroon"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('blue_burlap.png'))
  ->adjust(Adjust::replaceColor(Color::MAROON));

Library:

Python:

CloudinaryImage("blue_burlap.png").image(effect="replace_color:maroon")

Node.js:

cloudinary.image("blue_burlap.png", {effect: "replace_color:maroon"})

Java:

cloudinary.url().transformation(new Transformation().effect("replace_color:maroon")).imageTag("blue_burlap.png");

JS:

cloudinary.imageTag('blue_burlap.png', {effect: "replace_color:maroon"}).toHtml();

jQuery:

$.cloudinary.image("blue_burlap.png", {effect: "replace_color:maroon"})

React:

<Image publicId="blue_burlap.png" >
  <Transformation effect="replace_color:maroon" />
</Image>

Vue.js:

<cld-image public-id="blue_burlap.png" >
  <cld-transformation effect="replace_color:maroon" />
</cld-image>

Angular:

<cl-image public-id="blue_burlap.png" >
  <cl-transformation effect="replace_color:maroon">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("replace_color:maroon")).BuildImageTag("blue_burlap.png")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("replace_color:maroon")).generate("blue_burlap.png")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("replace_color:maroon")).generate("blue_burlap.png");

Kotlin:

cloudinary.image {
publicId("blue_burlap.png")
adjust(Adjust.replaceColor(Color.MAROON))
}.generate()

Original blue bag

Predominant color recolored

Adding a tolerance value of 10 (e_replace_color:maroon:10) prevents the handle also changing color:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_replace_color:maroon:10/blue_burlap.png

Ruby:

cl_image_tag("blue_burlap.png", :effect=>"replace_color:maroon:10")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("blue_burlap.png", array("effect"=>"replace_color:maroon:10"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('blue_burlap.png'))
  ->adjust(Adjust::replaceColor(Color::MAROON)
    ->tolerance(10));

Library:

Python:

CloudinaryImage("blue_burlap.png").image(effect="replace_color:maroon:10")

Node.js:

cloudinary.image("blue_burlap.png", {effect: "replace_color:maroon:10"})

Java:

cloudinary.url().transformation(new Transformation().effect("replace_color:maroon:10")).imageTag("blue_burlap.png");

JS:

cloudinary.imageTag('blue_burlap.png', {effect: "replace_color:maroon:10"}).toHtml();

jQuery:

$.cloudinary.image("blue_burlap.png", {effect: "replace_color:maroon:10"})

React:

<Image publicId="blue_burlap.png" >
  <Transformation effect="replace_color:maroon:10" />
</Image>

Vue.js:

<cld-image public-id="blue_burlap.png" >
  <cld-transformation effect="replace_color:maroon:10" />
</cld-image>

Angular:

<cl-image public-id="blue_burlap.png" >
  <cl-transformation effect="replace_color:maroon:10">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("replace_color:maroon:10")).BuildImageTag("blue_burlap.png")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("replace_color:maroon:10")).generate("blue_burlap.png")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("replace_color:maroon:10")).generate("blue_burlap.png");

Kotlin:

cloudinary.image {
publicId("blue_burlap.png")
adjust(Adjust.replaceColor(Color.MAROON) {
tolerance(10)
})
}.generate()

Original blue bag

Handle not recolored

Specifying blue as the color to replace (to a tolerance of 80 from the color #2b38aa) replaces the blue sides with parallel shades of maroon, taking into account shadows, lighting, etc:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_replace_color:maroon:80:2b38aa/blue_burlap.png

Ruby:

cl_image_tag("blue_burlap.png", :effect=>"replace_color:maroon:80:2b38aa")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("blue_burlap.png", array("effect"=>"replace_color:maroon:80:2b38aa"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('blue_burlap.png'))
  ->adjust(Adjust::replaceColor(Color::MAROON)
    ->fromColor(Color::rgb('2b38aa'))
    ->tolerance(80));

Library:

Python:

CloudinaryImage("blue_burlap.png").image(effect="replace_color:maroon:80:2b38aa")

Node.js:

cloudinary.image("blue_burlap.png", {effect: "replace_color:maroon:80:2b38aa"})

Java:

cloudinary.url().transformation(new Transformation().effect("replace_color:maroon:80:2b38aa")).imageTag("blue_burlap.png");

JS:

cloudinary.imageTag('blue_burlap.png', {effect: "replace_color:maroon:80:2b38aa"}).toHtml();

jQuery:

$.cloudinary.image("blue_burlap.png", {effect: "replace_color:maroon:80:2b38aa"})

React:

<Image publicId="blue_burlap.png" >
  <Transformation effect="replace_color:maroon:80:2b38aa" />
</Image>

Vue.js:

<cld-image public-id="blue_burlap.png" >
  <cld-transformation effect="replace_color:maroon:80:2b38aa" />
</cld-image>

Angular:

<cl-image public-id="blue_burlap.png" >
  <cl-transformation effect="replace_color:maroon:80:2b38aa">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("replace_color:maroon:80:2b38aa")).BuildImageTag("blue_burlap.png")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("replace_color:maroon:80:2b38aa")).generate("blue_burlap.png")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("replace_color:maroon:80:2b38aa")).generate("blue_burlap.png");

Kotlin:

cloudinary.image {
publicId("blue_burlap.png")
adjust(Adjust.replaceColor(Color.MAROON) {
fromColor(Color.rgb("#2b38aa"))
tolerance(80)
})
}.generate()

Original blue bag

Blues recolored to maroon shades

See full syntax: e_replace_color in the Transformation Reference.

Rotation

Rotate an image by any arbitrary angle in degrees with the angle parameter (a in URLs). A positive integer value rotates the image clockwise, and a negative integer value rotates the image counterclockwise. If the angle is not a multiple of 90 then a rectangular bounding box is added containing the rotated image and empty space.

Note

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

Other possible rotation values instead of an integer value include:

auto_right - Rotate the image 90 degrees clockwise only if the requested aspect ratio does not match the image's aspect ratio.
auto_left - Rotate the image 90 degrees counterclockwise only if the requested aspect ratio does not match the image's aspect ratio.
vflip - Vertical mirror flip of the image.
hflip - Horizontal mirror flip of the image.
ignore - By default, the image is automatically rotated according to the EXIF data stored by the camera when the image was taken. Set the rotation to 'ignore' if you do not want the image to be automatically rotated.

Note

To apply multiple values, separate each value with a dot (.). For example to horizontally flip the image and rotate it by 45 degrees: angle: hflip.45

Examples with the uploaded image named sample (all images are also scaled down to a width of 100 pixels):

Rotate the image by 90 degrees:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/c_scale,w_100/a_90/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :transformation=>[
  {:width=>100, :crop=>"scale"},
  {:angle=>90}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("width"=>100, "crop"=>"scale"),
  array("angle"=>90)
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->width(100))
  ->rotate(Rotate::byAngle(90));

Library:

Python:

CloudinaryImage("sample.jpg").image(transformation=[
  {'width': 100, 'crop': "scale"},
  {'angle': 90}
  ])

Node.js:

cloudinary.image("sample.jpg", {transformation: [
  {width: 100, crop: "scale"},
  {angle: 90}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(100).crop("scale").chain()
  .angle(90)).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {transformation: [
  {width: 100, crop: "scale"},
  {angle: 90}
  ]}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {transformation: [
  {width: 100, crop: "scale"},
  {angle: 90}
  ]})

React:

<Image publicId="sample.jpg" >
  <Transformation width="100" crop="scale" />
  <Transformation angle="90" />
</Image>

Vue.js:

<cld-image public-id="sample.jpg" >
  <cld-transformation width="100" crop="scale" />
  <cld-transformation angle="90" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="100" crop="scale">
  </cl-transformation>
  <cl-transformation angle="90">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(100).Crop("scale").Chain()
  .Angle(90)).BuildImageTag("sample.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(100).setCrop("scale").chain()
  .setAngle(90)).generate("sample.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(100).crop("scale").chain()
  .angle(90)).generate("sample.jpg");

Kotlin:

cloudinary.image {
publicId("sample.jpg")
resize(Resize.scale() {
width(100)
})
rotate(Rotate.byAngle(90))
}.generate()

Rotate the image by -20 degrees (automatically adds a bounding box):

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/c_scale,w_100/a_-20/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :transformation=>[
  {:width=>100, :crop=>"scale"},
  {:angle=>-20}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("width"=>100, "crop"=>"scale"),
  array("angle"=>-20)
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->width(100))
  ->rotate(Rotate::byAngle(-20));

Library:

Python:

CloudinaryImage("sample.jpg").image(transformation=[
  {'width': 100, 'crop': "scale"},
  {'angle': -20}
  ])

Node.js:

cloudinary.image("sample.jpg", {transformation: [
  {width: 100, crop: "scale"},
  {angle: -20}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(100).crop("scale").chain()
  .angle(-20)).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {transformation: [
  {width: 100, crop: "scale"},
  {angle: -20}
  ]}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {transformation: [
  {width: 100, crop: "scale"},
  {angle: -20}
  ]})

React:

<Image publicId="sample.jpg" >
  <Transformation width="100" crop="scale" />
  <Transformation angle="-20" />
</Image>

Vue.js:

<cld-image public-id="sample.jpg" >
  <cld-transformation width="100" crop="scale" />
  <cld-transformation angle="-20" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="100" crop="scale">
  </cl-transformation>
  <cl-transformation angle="-20">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(100).Crop("scale").Chain()
  .Angle(-20)).BuildImageTag("sample.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(100).setCrop("scale").chain()
  .setAngle(-20)).generate("sample.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(100).crop("scale").chain()
  .angle(-20)).generate("sample.jpg");

Kotlin:

cloudinary.image {
publicId("sample.jpg")
resize(Resize.scale() {
width(100)
})
rotate(Rotate.byAngle(-20))
}.generate()

Image rotated 20 degrees counterclockwise

Vertically mirror flip the image and rotate by 45 degrees (automatically adds a bounding box):

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/c_scale,w_100/a_vflip/a_45/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :transformation=>[
  {:width=>100, :crop=>"scale"},
  {:angle=>"vflip"},
  {:angle=>45}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("width"=>100, "crop"=>"scale"),
  array("angle"=>"vflip"),
  array("angle"=>45)
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->width(100))
  ->rotate(Rotate::mode(RotationMode::verticalFlip()))
  ->rotate(Rotate::byAngle(45));

Library:

Python:

CloudinaryImage("sample.jpg").image(transformation=[
  {'width': 100, 'crop': "scale"},
  {'angle': "vflip"},
  {'angle': 45}
  ])

Node.js:

cloudinary.image("sample.jpg", {transformation: [
  {width: 100, crop: "scale"},
  {angle: "vflip"},
  {angle: 45}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(100).crop("scale").chain()
  .angle("vflip").chain()
  .angle(45)).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {transformation: [
  {width: 100, crop: "scale"},
  {angle: "vflip"},
  {angle: 45}
  ]}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {transformation: [
  {width: 100, crop: "scale"},
  {angle: "vflip"},
  {angle: 45}
  ]})

React:

<Image publicId="sample.jpg" >
  <Transformation width="100" crop="scale" />
  <Transformation angle="vflip" />
  <Transformation angle="45" />
</Image>

Vue.js:

<cld-image public-id="sample.jpg" >
  <cld-transformation width="100" crop="scale" />
  <cld-transformation angle="vflip" />
  <cld-transformation angle="45" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="100" crop="scale">
  </cl-transformation>
  <cl-transformation angle="vflip">
  </cl-transformation>
  <cl-transformation angle="45">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(100).Crop("scale").Chain()
  .Angle("vflip").Chain()
  .Angle(45)).BuildImageTag("sample.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(100).setCrop("scale").chain()
  .setAngle("vflip").chain()
  .setAngle(45)).generate("sample.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(100).crop("scale").chain()
  .angle("vflip").chain()
  .angle(45)).generate("sample.jpg");

Kotlin:

cloudinary.image {
publicId("sample.jpg")
resize(Resize.scale() {
width(100)
})
rotate(Rotate.mode(RotationMode.verticalFlip()))
rotate(Rotate.byAngle(45))
}.generate()

Image vertically flipped and rotated 45 degrees clockwise

Crop the image to a 200x200 circle, then rotate the image by 30 degrees (automatically adds a bounding box) and finally trim the extra whitespace added:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/c_fill,h_200,w_200/r_max/a_30/e_trim/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :transformation=>[
  {:height=>200, :width=>200, :crop=>"fill"},
  {:radius=>"max"},
  {:angle=>30},
  {:effect=>"trim"}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("height"=>200, "width"=>200, "crop"=>"fill"),
  array("radius"=>"max"),
  array("angle"=>30),
  array("effect"=>"trim")
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('sample.jpg'))
  ->resize(Resize::fill()->width(200)->height(200))
  ->roundCorners(RoundCorners::max())
  ->rotate(Rotate::byAngle(30))
  ->reshape(Reshape::trim());

Library:

Python:

CloudinaryImage("sample.jpg").image(transformation=[
  {'height': 200, 'width': 200, 'crop': "fill"},
  {'radius': "max"},
  {'angle': 30},
  {'effect': "trim"}
  ])

Node.js:

cloudinary.image("sample.jpg", {transformation: [
  {height: 200, width: 200, crop: "fill"},
  {radius: "max"},
  {angle: 30},
  {effect: "trim"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .height(200).width(200).crop("fill").chain()
  .radius("max").chain()
  .angle(30).chain()
  .effect("trim")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {transformation: [
  {height: 200, width: 200, crop: "fill"},
  {radius: "max"},
  {angle: 30},
  {effect: "trim"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {transformation: [
  {height: 200, width: 200, crop: "fill"},
  {radius: "max"},
  {angle: 30},
  {effect: "trim"}
  ]})

React:

<Image publicId="sample.jpg" >
  <Transformation height="200" width="200" crop="fill" />
  <Transformation radius="max" />
  <Transformation angle="30" />
  <Transformation effect="trim" />
</Image>

Vue.js:

<cld-image public-id="sample.jpg" >
  <cld-transformation height="200" width="200" crop="fill" />
  <cld-transformation radius="max" />
  <cld-transformation angle="30" />
  <cld-transformation effect="trim" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation height="200" width="200" crop="fill">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
  <cl-transformation angle="30">
  </cl-transformation>
  <cl-transformation effect="trim">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(200).Width(200).Crop("fill").Chain()
  .Radius("max").Chain()
  .Angle(30).Chain()
  .Effect("trim")).BuildImageTag("sample.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(200).setWidth(200).setCrop("fill").chain()
  .setRadius("max").chain()
  .setAngle(30).chain()
  .setEffect("trim")).generate("sample.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .height(200).width(200).crop("fill").chain()
  .radius("max").chain()
  .angle(30).chain()
  .effect("trim")).generate("sample.jpg");

Kotlin:

cloudinary.image {
publicId("sample.jpg")
resize(Resize.fill() {
width(200)
height(200)
})
roundCorners(RoundCorners.max())
rotate(Rotate.byAngle(30))
reshape(Reshape.trim())
}.generate()

image cropped to a 200x200 circle, rotated 30 degrees clockwise and trimmed

See full syntax: a (angle) in the Transformation Reference.

Rounding

Many website designs need images with rounded corners, while some websites require images with a complete circular or oval (ellipse) crop. Twitter, for example, uses rounded corners for its users' profile pictures.

Programmatically, rounded corners can be achieved using the original rectangular images combined with modern CSS properties or image masking overlays. However, it is sometimes useful to deliver images with rounded corners in the first place. This is particularly helpful when you want to embed images inside an email (most mail clients can't add CSS based rounded corners), a PDF or a mobile application. Delivering images with already rounded corners is also useful if you want to simplify your CSS and markup or when you need to support older browsers.

Transforming an image to a rounded version is done using the radius parameter (r in URLs). You can manually specify the amount to round various corners, or you can set it to automatically round to an exact ellipse or circle.

Note

To deliver a rounded image with a transparent background, deliver as PNG. Formats that do not support transparency will be delivered by default with a white background, which can be adjusted with the background transformation parameter. Keep in mind that the PNG format produces larger files than the JPEG format. For more information, see the article on PNG optimization - saving bandwidth on transparent PNGs with dynamic underlay.

Manually setting rounding values

To manually control the rounding, use the radius parameter with between 1 and 4 values defining the rounding amount (in pixels, separated by colons), following the same concept as the border-radius CSS property. When specifying multiple values, keep a corner untouched by specifying '0'.

One value: Symmetrical. All four corners are rounded equally according to the specified value.
Two values: Opposites are symmetrical. The first value applies to the top-left and bottom-right corners. The second value applies to the top-right and bottom-left corners.
Three values: One set of corners is symmetrical. The first value applies to the top-left. The second value applies to the top-right and bottom-left corners. The third value applies to the bottom-right.
Four values: The rounding for each corner is specified separately, in clockwise order, starting with the top-left.

For example:

r_20

r_25:0

r_10:40:25

r_30:0:30:30

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/c_fill,h_100,w_150/r_25:0/Pi.png

Ruby:

cl_image_tag("Pi.png", :transformation=>[
  {:height=>100, :width=>150, :crop=>"fill"},
  {:radius=>"25:0"}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("Pi.png", array("transformation"=>array(
  array("height"=>100, "width"=>150, "crop"=>"fill"),
  array("radius"=>"25:0")
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('Pi.png'))
  ->resize(Resize::fill()->width(150)->height(100))
  ->roundCorners(RoundCorners::byRadius(25, 0));

Library:

Python:

CloudinaryImage("Pi.png").image(transformation=[
  {'height': 100, 'width': 150, 'crop': "fill"},
  {'radius': "25:0"}
  ])

Node.js:

cloudinary.image("Pi.png", {transformation: [
  {height: 100, width: 150, crop: "fill"},
  {radius: "25:0"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .height(100).width(150).crop("fill").chain()
  .radius("25:0")).imageTag("Pi.png");

JS:

cloudinary.imageTag('Pi.png', {transformation: [
  {height: 100, width: 150, crop: "fill"},
  {radius: "25:0"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("Pi.png", {transformation: [
  {height: 100, width: 150, crop: "fill"},
  {radius: "25:0"}
  ]})

React:

<Image publicId="Pi.png" >
  <Transformation height="100" width="150" crop="fill" />
  <Transformation radius="25:0" />
</Image>

Vue.js:

<cld-image public-id="Pi.png" >
  <cld-transformation height="100" width="150" crop="fill" />
  <cld-transformation radius="25:0" />
</cld-image>

Angular:

<cl-image public-id="Pi.png" >
  <cl-transformation height="100" width="150" crop="fill">
  </cl-transformation>
  <cl-transformation radius="25:0">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(100).Width(150).Crop("fill").Chain()
  .Radius("25:0")).BuildImageTag("Pi.png")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(100).setWidth(150).setCrop("fill").chain()
  .setRadius("25:0")).generate("Pi.png")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .height(100).width(150).crop("fill").chain()
  .radius("25:0")).generate("Pi.png");

Kotlin:

cloudinary.image {
publicId("Pi.png")
resize(Resize.fill() {
width(150)
height(100)
})
roundCorners(RoundCorners.byRadius(25, 0))
}.generate()

Automatically rounding to an ellipse or circle

Rather than specifying specific rounding values, you can automatically crop images to the shape of an ellipse (if the requested image size is a rectangle) or a circle (if the requested image size is a square). Simply pass max as the value of the radius parameter instead of numeric values.

The following example transforms an uploaded JPEG to a 250x150 PNG with maximum radius cropping, which generates the ellipse shape with a transparent background:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/c_fill,h_150,w_250/r_max/pi.png

Ruby:

cl_image_tag("pi.png", :transformation=>[
  {:height=>150, :width=>250, :crop=>"fill"},
  {:radius=>"max"}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("pi.png", array("transformation"=>array(
  array("height"=>150, "width"=>250, "crop"=>"fill"),
  array("radius"=>"max")
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('pi.png'))
  ->resize(Resize::fill()->width(250)->height(150))
  ->roundCorners(RoundCorners::max());

Library:

Python:

CloudinaryImage("pi.png").image(transformation=[
  {'height': 150, 'width': 250, 'crop': "fill"},
  {'radius': "max"}
  ])

Node.js:

cloudinary.image("pi.png", {transformation: [
  {height: 150, width: 250, crop: "fill"},
  {radius: "max"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .height(150).width(250).crop("fill").chain()
  .radius("max")).imageTag("pi.png");

JS:

cloudinary.imageTag('pi.png', {transformation: [
  {height: 150, width: 250, crop: "fill"},
  {radius: "max"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("pi.png", {transformation: [
  {height: 150, width: 250, crop: "fill"},
  {radius: "max"}
  ]})

React:

<Image publicId="pi.png" >
  <Transformation height="150" width="250" crop="fill" />
  <Transformation radius="max" />
</Image>

Vue.js:

<cld-image public-id="pi.png" >
  <cld-transformation height="150" width="250" crop="fill" />
  <cld-transformation radius="max" />
</cld-image>

Angular:

<cl-image public-id="pi.png" >
  <cl-transformation height="150" width="250" crop="fill">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(150).Width(250).Crop("fill").Chain()
  .Radius("max")).BuildImageTag("pi.png")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(150).setWidth(250).setCrop("fill").chain()
  .setRadius("max")).generate("pi.png")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .height(150).width(250).crop("fill").chain()
  .radius("max")).generate("pi.png");

Kotlin:

cloudinary.image {
publicId("pi.png")
resize(Resize.fill() {
width(250)
height(150)
})
roundCorners(RoundCorners.max())
}.generate()

As the following example shows, displaying pictures of your web site's users as circle headshots is very easy to achieve with Cloudinary using face gravity with max radius:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_200,w_200/r_max/face_left.png

Ruby:

cl_image_tag("face_left.png", :transformation=>[
  {:gravity=>"face", :height=>200, :width=>200, :crop=>"thumb"},
  {:radius=>"max"}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("face_left.png", array("transformation"=>array(
  array("gravity"=>"face", "height"=>200, "width"=>200, "crop"=>"thumb"),
  array("radius"=>"max")
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('face_left.png'))
  ->resize(Resize::thumbnail()->width(200)->height(200)->gravity(Gravity::focusOn(FocusOn::face())))
  ->roundCorners(RoundCorners::max());

Library:

Python:

CloudinaryImage("face_left.png").image(transformation=[
  {'gravity': "face", 'height': 200, 'width': 200, 'crop': "thumb"},
  {'radius': "max"}
  ])

Node.js:

cloudinary.image("face_left.png", {transformation: [
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {radius: "max"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .gravity("face").height(200).width(200).crop("thumb").chain()
  .radius("max")).imageTag("face_left.png");

JS:

cloudinary.imageTag('face_left.png', {transformation: [
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {radius: "max"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("face_left.png", {transformation: [
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {radius: "max"}
  ]})

React:

<Image publicId="face_left.png" >
  <Transformation gravity="face" height="200" width="200" crop="thumb" />
  <Transformation radius="max" />
</Image>

Vue.js:

<cld-image public-id="face_left.png" >
  <cld-transformation gravity="face" height="200" width="200" crop="thumb" />
  <cld-transformation radius="max" />
</cld-image>

Angular:

<cl-image public-id="face_left.png" >
  <cl-transformation gravity="face" height="200" width="200" crop="thumb">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Height(200).Width(200).Crop("thumb").Chain()
  .Radius("max")).BuildImageTag("face_left.png")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setHeight(200).setWidth(200).setCrop("thumb").chain()
  .setRadius("max")).generate("face_left.png")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .gravity("face").height(200).width(200).crop("thumb").chain()
  .radius("max")).generate("face_left.png");

Kotlin:

cloudinary.image {
publicId("face_left.png")
resize(Resize.thumbnail() {
width(200)
height(200)
gravity(Gravity.focusOn(FocusOn.face()))
})
roundCorners(RoundCorners.max())
}.generate()

You can also overlay circular pictures of your users on other images using the layer_apply flag that tells Cloudinary to apply the rounding (and other transformations) to the overlay image and not to the base image:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/l_face_left/c_thumb,g_face,h_200,w_200/r_max/fl_layer_apply,g_north_east/flower.jpg

Ruby:

cl_image_tag("flower.jpg", :transformation=>[
  {:overlay=>"face_left"},
  {:gravity=>"face", :height=>200, :width=>200, :crop=>"thumb"},
  {:radius=>"max"},
  {:flags=>"layer_apply", :gravity=>"north_east"}
  ])

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("flower.jpg", array("transformation"=>array(
  array("overlay"=>"face_left"),
  array("gravity"=>"face", "height"=>200, "width"=>200, "crop"=>"thumb"),
  array("radius"=>"max"),
  array("flags"=>"layer_apply", "gravity"=>"north_east")
  )))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('flower.jpg'))
  ->overlay(
      Overlay::source(Source::image('face_left')
        ->transformation((new ImageTransformation())
          ->resize(Resize::thumbnail()->width(200)->height(200)->gravity(Gravity::focusOn(FocusOn::face())))
          ->roundCorners(RoundCorners::max())))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::northEast()))
  ));

Library:

Python:

CloudinaryImage("flower.jpg").image(transformation=[
  {'overlay': "face_left"},
  {'gravity': "face", 'height': 200, 'width': 200, 'crop': "thumb"},
  {'radius': "max"},
  {'flags': "layer_apply", 'gravity': "north_east"}
  ])

Node.js:

cloudinary.image("flower.jpg", {transformation: [
  {overlay: "face_left"},
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {radius: "max"},
  {flags: "layer_apply", gravity: "north_east"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("face_left")).chain()
  .gravity("face").height(200).width(200).crop("thumb").chain()
  .radius("max").chain()
  .flags("layer_apply").gravity("north_east")).imageTag("flower.jpg");

JS:

cloudinary.imageTag('flower.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("face_left")},
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {radius: "max"},
  {flags: "layer_apply", gravity: "north_east"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("flower.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("face_left")},
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {radius: "max"},
  {flags: "layer_apply", gravity: "north_east"}
  ]})

React:

<Image publicId="flower.jpg" >
  <Transformation overlay="face_left" />
  <Transformation gravity="face" height="200" width="200" crop="thumb" />
  <Transformation radius="max" />
  <Transformation flags="layer_apply" gravity="north_east" />
</Image>

Vue.js:

<cld-image public-id="flower.jpg" >
  <cld-transformation :overlay="face_left" />
  <cld-transformation gravity="face" height="200" width="200" crop="thumb" />
  <cld-transformation radius="max" />
  <cld-transformation flags="layer_apply" gravity="north_east" />
</cld-image>

Angular:

<cl-image public-id="flower.jpg" >
  <cl-transformation overlay="face_left">
  </cl-transformation>
  <cl-transformation gravity="face" height="200" width="200" crop="thumb">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("face_left")).Chain()
  .Gravity("face").Height(200).Width(200).Crop("thumb").Chain()
  .Radius("max").Chain()
  .Flags("layer_apply").Gravity("north_east")).BuildImageTag("flower.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("face_left").chain()
  .setGravity("face").setHeight(200).setWidth(200).setCrop("thumb").chain()
  .setRadius("max").chain()
  .setFlags("layer_apply").setGravity("north_east")).generate("flower.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("face_left")).chain()
  .gravity("face").height(200).width(200).crop("thumb").chain()
  .radius("max").chain()
  .flags("layer_apply").gravity("north_east")).generate("flower.jpg");

Kotlin:

cloudinary.image {
publicId("flower.jpg")
overlay(Overlay.source(Source.image("face_left") {
transformation(ImageTransformation {
resize(Resize.thumbnail() {
width(200)
height(200)
gravity(Gravity.focusOn(FocusOn.face()))
})
roundCorners(RoundCorners.max())
})
}) {
position(Position {
gravity(Gravity.compass(Compass.northEast()))
})
})
}.generate()

See full syntax: r (round corners) in the Transformation Reference.

Theme

Use the theme effect to change the color theme of a screen capture, either to match or contrast with your own website. The effect applies an algorithm that intelligently adjusts the color of illustrations, such as backgrounds, designs, texts, and logos, while keeping photographic elements in their original colors. If needed, luma gets reversed (so if the original has dark text on a bright background, and the target background is dark, the text becomes bright).

In the example below, a screen capture with a predominantly light theme is converted to a dark theme by specifying black as the target background color:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_theme:color_black:photosensitivity_110/docs/cloudinary_website.png

Ruby:

cl_image_tag("docs/cloudinary_website.png", :effect=>"theme:color_black:photosensitivity_110")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("docs/cloudinary_website.png", array("effect"=>"theme:color_black:photosensitivity_110"))

Library:

PHP (cloudinary_php v2.x):

# This code example is not currently available.

Library:

Python:

CloudinaryImage("docs/cloudinary_website.png").image(effect="theme:color_black:photosensitivity_110")

Node.js:

cloudinary.image("docs/cloudinary_website.png", {effect: "theme:color_black:photosensitivity_110"})

Java:

cloudinary.url().transformation(new Transformation().effect("theme:color_black:photosensitivity_110")).imageTag("docs/cloudinary_website.png");

JS:

cloudinary.imageTag('docs/cloudinary_website.png', {effect: "theme:color_black:photosensitivity_110"}).toHtml();

jQuery:

$.cloudinary.image("docs/cloudinary_website.png", {effect: "theme:color_black:photosensitivity_110"})

React:

<Image publicId="docs/cloudinary_website.png" >
  <Transformation effect="theme:color_black:photosensitivity_110" />
</Image>

Vue.js:

<cld-image public-id="docs/cloudinary_website.png" >
  <cld-transformation effect="theme:color_black:photosensitivity_110" />
</cld-image>

Angular:

<cl-image public-id="docs/cloudinary_website.png" >
  <cl-transformation effect="theme:color_black:photosensitivity_110">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("theme:color_black:photosensitivity_110")).BuildImageTag("docs/cloudinary_website.png")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("theme:color_black:photosensitivity_110")).generate("docs/cloudinary_website.png")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("theme:color_black:photosensitivity_110")).generate("docs/cloudinary_website.png");

Kotlin:

// This code example is not currently available.

Screen capture of the Cloudinary website

See full syntax: e_theme in the Transformation Reference.

Tint

The tint:<options> effect enables you to blend your images with one or more colors and specify the blend strength. Advanced users can also equalize the image for increased contrast and specify the positioning of the gradient blend for each color.

By default, e_tint applies a red color at 60% blend strength.

Specify the colors and blend strength amount in the format:

e_tint:[amount]:[color1]:[color2]:...:[color10].

amount is a value from 0-100, where 0 keeps the original color and 100 blends the specified colors completely.

The color can be specified as an RGB hex triplet (e.g., rgb:3e2222), a 3-digit RGB hex (e.g., rgb:777) or a named color (e.g., green).

For example:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_tint:100:red:blue:yellow/greece_landscape.jpg

Ruby:

cl_image_tag("greece_landscape.jpg", :effect=>"tint:100:red:blue:yellow")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("greece_landscape.jpg", array("effect"=>"tint:100:red:blue:yellow"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('greece_landscape.jpg'))
  ->adjust(Adjust::tint('100:red:blue:yellow'));

Library:

Python:

CloudinaryImage("greece_landscape.jpg").image(effect="tint:100:red:blue:yellow")

Node.js:

cloudinary.image("greece_landscape.jpg", {effect: "tint:100:red:blue:yellow"})

Java:

cloudinary.url().transformation(new Transformation().effect("tint:100:red:blue:yellow")).imageTag("greece_landscape.jpg");

JS:

cloudinary.imageTag('greece_landscape.jpg', {effect: "tint:100:red:blue:yellow"}).toHtml();

jQuery:

$.cloudinary.image("greece_landscape.jpg", {effect: "tint:100:red:blue:yellow"})

React:

<Image publicId="greece_landscape.jpg" >
  <Transformation effect="tint:100:red:blue:yellow" />
</Image>

Vue.js:

<cld-image public-id="greece_landscape.jpg" >
  <cld-transformation effect="tint:100:red:blue:yellow" />
</cld-image>

Angular:

<cl-image public-id="greece_landscape.jpg" >
  <cl-transformation effect="tint:100:red:blue:yellow">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("tint:100:red:blue:yellow")).BuildImageTag("greece_landscape.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("tint:100:red:blue:yellow")).generate("greece_landscape.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("tint:100:red:blue:yellow")).generate("greece_landscape.jpg");

Kotlin:

cloudinary.image {
publicId("greece_landscape.jpg")
adjust(Adjust.tint("100:red:blue:yellow"))
}.generate()

To equalize the colors in your image before tinting, set equalize to true (false by default). For example:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_tint:equalize:80:red:blue:yellow/greece_landscape.jpg

Ruby:

cl_image_tag("greece_landscape.jpg", :effect=>"tint:equalize:80:red:blue:yellow")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("greece_landscape.jpg", array("effect"=>"tint:equalize:80:red:blue:yellow"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('greece_landscape.jpg'))
  ->adjust(Adjust::tint('equalize:80:red:blue:yellow'));

Library:

Python:

CloudinaryImage("greece_landscape.jpg").image(effect="tint:equalize:80:red:blue:yellow")

Node.js:

cloudinary.image("greece_landscape.jpg", {effect: "tint:equalize:80:red:blue:yellow"})

Java:

cloudinary.url().transformation(new Transformation().effect("tint:equalize:80:red:blue:yellow")).imageTag("greece_landscape.jpg");

JS:

cloudinary.imageTag('greece_landscape.jpg', {effect: "tint:equalize:80:red:blue:yellow"}).toHtml();

jQuery:

$.cloudinary.image("greece_landscape.jpg", {effect: "tint:equalize:80:red:blue:yellow"})

React:

<Image publicId="greece_landscape.jpg" >
  <Transformation effect="tint:equalize:80:red:blue:yellow" />
</Image>

Vue.js:

<cld-image public-id="greece_landscape.jpg" >
  <cld-transformation effect="tint:equalize:80:red:blue:yellow" />
</cld-image>

Angular:

<cl-image public-id="greece_landscape.jpg" >
  <cl-transformation effect="tint:equalize:80:red:blue:yellow">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("tint:equalize:80:red:blue:yellow")).BuildImageTag("greece_landscape.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("tint:equalize:80:red:blue:yellow")).generate("greece_landscape.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("tint:equalize:80:red:blue:yellow")).generate("greece_landscape.jpg");

Kotlin:

cloudinary.image {
publicId("greece_landscape.jpg")
adjust(Adjust.tint("equalize:80:red:blue:yellow"))
}.generate()

By default, the specified colors are distributed evenly. To adjust the positioning of the gradient blend, specify a position value between 0p-100p. If specifying positioning, you must specify a position value for all colors. For example:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_tint:equalize:80:red:50p:blue:60p:yellow:40p/greece_landscape.jpg

Ruby:

cl_image_tag("greece_landscape.jpg", :effect=>"tint:equalize:80:red:50p:blue:60p:yellow:40p")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("greece_landscape.jpg", array("effect"=>"tint:equalize:80:red:50p:blue:60p:yellow:40p"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('greece_landscape.jpg'))
  ->adjust(Adjust::tint('equalize:80:red:50p:blue:60p:yellow:40p'));

Library:

Python:

CloudinaryImage("greece_landscape.jpg").image(effect="tint:equalize:80:red:50p:blue:60p:yellow:40p")

Node.js:

cloudinary.image("greece_landscape.jpg", {effect: "tint:equalize:80:red:50p:blue:60p:yellow:40p"})

Java:

cloudinary.url().transformation(new Transformation().effect("tint:equalize:80:red:50p:blue:60p:yellow:40p")).imageTag("greece_landscape.jpg");

JS:

cloudinary.imageTag('greece_landscape.jpg', {effect: "tint:equalize:80:red:50p:blue:60p:yellow:40p"}).toHtml();

jQuery:

$.cloudinary.image("greece_landscape.jpg", {effect: "tint:equalize:80:red:50p:blue:60p:yellow:40p"})

React:

<Image publicId="greece_landscape.jpg" >
  <Transformation effect="tint:equalize:80:red:50p:blue:60p:yellow:40p" />
</Image>

Vue.js:

<cld-image public-id="greece_landscape.jpg" >
  <cld-transformation effect="tint:equalize:80:red:50p:blue:60p:yellow:40p" />
</cld-image>

Angular:

<cl-image public-id="greece_landscape.jpg" >
  <cl-transformation effect="tint:equalize:80:red:50p:blue:60p:yellow:40p">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("tint:equalize:80:red:50p:blue:60p:yellow:40p")).BuildImageTag("greece_landscape.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("tint:equalize:80:red:50p:blue:60p:yellow:40p")).generate("greece_landscape.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("tint:equalize:80:red:50p:blue:60p:yellow:40p")).generate("greece_landscape.jpg");

Kotlin:

cloudinary.image {
publicId("greece_landscape.jpg")
adjust(Adjust.tint("equalize:80:red:50p:blue:60p:yellow:40p"))
}.generate()

Original

default red color at 20% strength

red, blue, yellow at 100% strength

equalized, red, blue, yellow tinting at 80% strength, with adjusted gradients

equalized, mutli-color, 80%, adjusted gradients

¹Equalizing colors redistributes the pixels in your image so that they are equally balanced across the entire range of brightness values, which increases the overall contrast in the image. The lightest area is remapped to pure white, and the darkest area is remapped to pure black.

See full syntax: e_tint in the Transformation Reference.

Vectorize

The vectorize effect (e_vectorize in URLs) can be used to convert a raster image to a vector format such as SVG. This can be useful for a variety of use-cases, such as:

Converting a logo graphic in PNG format to an SVG, allowing the graphic to scale as required.
Creating a low quality image placeholder that resembles the original image but with a reduced number of colors and lower file-size.
Vectorizing as an artistic effect.

The vectorize effect can also be controlled with additional parameters to fine tune it to your use-case. See full syntax : e_vectorize in the Transformation Reference.

Below you can see a variety of potential outputs using these options. The top-left image is the original photo. Following it, you can see the vector graphics, output as JPG, with varying levels of detail, color, despeckling and more. Click each image to open in a new tab and see the full transformation.

Converting a logo PNG to SVG

If you have a logo or graphic as a raster image such as a PNG that you need to scale up or deliver in a more compact form, you can use the vectorize effect to create an SVG version that matches the original as closely as possible.

The original racoon PNG below is 256px wide and 28kb.

If you want to display this image at a larger size, it will become blurry and the file size will increase with the resolution, as you can see in the below example which is twice the size of the original.

To avoid the issues above, it's much better to deliver a vector image for this graphic using the vectorize effect. The example below delivers an SVG at the maximum detail (1.0) with 3 colors (like the original) and an intermediate value of 40 for the corners. This yields an extremely compact, 8 KB file that will provide pixel-perfect scaling to any size.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_vectorize:colors:3:corners:40:detail:1.0/docs/racoon.png

Ruby:

cl_image_tag("docs/racoon.png", :effect=>"vectorize:colors:3:corners:40:detail:1.0")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("docs/racoon.png", array("effect"=>"vectorize:colors:3:corners:40:detail:1.0"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('docs/racoon.png'))
  ->effect(Effect::vectorize()->numOfColors(3)
    ->detailsLevel(1.0)->cornersLevel(40));

Library:

Python:

CloudinaryImage("docs/racoon.png").image(effect="vectorize:colors:3:corners:40:detail:1.0")

Node.js:

cloudinary.image("docs/racoon.png", {effect: "vectorize:colors:3:corners:40:detail:1.0"})

Java:

cloudinary.url().transformation(new Transformation().effect("vectorize:colors:3:corners:40:detail:1.0")).imageTag("docs/racoon.png");

JS:

cloudinary.imageTag('docs/racoon.png', {effect: "vectorize:colors:3:corners:40:detail:1.0"}).toHtml();

jQuery:

$.cloudinary.image("docs/racoon.png", {effect: "vectorize:colors:3:corners:40:detail:1.0"})

React:

<Image publicId="docs/racoon.png" >
  <Transformation effect="vectorize:colors:3:corners:40:detail:1.0" />
</Image>

Vue.js:

<cld-image public-id="docs/racoon.png" >
  <cld-transformation effect="vectorize:colors:3:corners:40:detail:1.0" />
</cld-image>

Angular:

<cl-image public-id="docs/racoon.png" >
  <cl-transformation effect="vectorize:colors:3:corners:40:detail:1.0">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("vectorize:colors:3:corners:40:detail:1.0")).BuildImageTag("docs/racoon.png")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("vectorize:colors:3:corners:40:detail:1.0")).generate("docs/racoon.png")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("vectorize:colors:3:corners:40:detail:1.0")).generate("docs/racoon.png");

Kotlin:

cloudinary.image {
publicId("docs/racoon.png")
effect(Effect.vectorize() {
numOfColors(3)
detailsLevel(1.0f)
cornersLevel(40)
})
}.generate()

Creating a low quality image placeholder SVG

When delivering high quality photos, it's good web design practice to first deliver Low Quality Image Placeholders (LQIPs) that are very compact in size, and load extremely quickly. Cloudinary supports a large variety of compressions that can potentially be used for generating placeholders. You can read some more about those here.

Using SVGs is a nice way to display a placeholder. As an example, the lion jpeg image below with Cloudinary's optimizations applied, still gets delivered at 397 KB.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/f_auto,q_auto/docs/lion.jpg

Ruby:

cl_image_tag("docs/lion.jpg", :quality=>"auto", :fetch_format=>:auto)

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("docs/lion.jpg", array("quality"=>"auto", "fetch_format"=>"auto"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('docs/lion'))
  ->delivery(Delivery::format(Format::auto()))
  ->delivery(Delivery::quality(Quality::auto()));

Library:

Python:

CloudinaryImage("docs/lion.jpg").image(quality="auto", fetch_format="auto")

Node.js:

cloudinary.image("docs/lion.jpg", {quality: "auto", fetch_format: "auto"})

Java:

cloudinary.url().transformation(new Transformation().quality("auto").fetchFormat("auto")).imageTag("docs/lion.jpg");

JS:

cloudinary.imageTag('docs/lion.jpg', {quality: "auto", fetchFormat: "auto"}).toHtml();

jQuery:

$.cloudinary.image("docs/lion.jpg", {quality: "auto", fetch_format: "auto"})

React:

<Image publicId="docs/lion.jpg" >
  <Transformation quality="auto" fetchFormat="auto" />
</Image>

Vue.js:

<cld-image public-id="docs/lion.jpg" >
  <cld-transformation quality="auto" fetch-format="auto" />
</cld-image>

Angular:

<cl-image public-id="docs/lion.jpg" >
  <cl-transformation quality="auto" fetch-format="auto">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto").FetchFormat("auto")).BuildImageTag("docs/lion.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto").setFetchFormat("auto")).generate("docs/lion.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().quality("auto").fetchFormat("auto")).generate("docs/lion.jpg");

Kotlin:

cloudinary.image {
publicId("docs/lion")
delivery(Delivery.format(Format.auto()))
delivery(Delivery.quality(Quality.auto()))
}.generate()

Instead, an SVG LQIP can be used while lazy loading the full-sized image.

The placeholder should still represent the subject matter of the original but also be very compact. Confining the SVG to 2 colors and a detail level of 5% produces an easily identifiable image with a file size of just 6 KB.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/e_vectorize:colors:2:detail:0.05/docs/lion.svg

Ruby:

cl_image_tag("docs/lion.svg", :effect=>"vectorize:colors:2:detail:0.05")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("docs/lion.svg", array("effect"=>"vectorize:colors:2:detail:0.05"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('docs/lion.svg'))
  ->effect(Effect::vectorize()->numOfColors(2)
    ->detailsLevel(0.05));

Library:

Python:

CloudinaryImage("docs/lion.svg").image(effect="vectorize:colors:2:detail:0.05")

Node.js:

cloudinary.image("docs/lion.svg", {effect: "vectorize:colors:2:detail:0.05"})

Java:

cloudinary.url().transformation(new Transformation().effect("vectorize:colors:2:detail:0.05")).imageTag("docs/lion.svg");

JS:

cloudinary.imageTag('docs/lion.svg', {effect: "vectorize:colors:2:detail:0.05"}).toHtml();

jQuery:

$.cloudinary.image("docs/lion.svg", {effect: "vectorize:colors:2:detail:0.05"})

React:

<Image publicId="docs/lion.svg" >
  <Transformation effect="vectorize:colors:2:detail:0.05" />
</Image>

Vue.js:

<cld-image public-id="docs/lion.svg" >
  <cld-transformation effect="vectorize:colors:2:detail:0.05" />
</cld-image>

Angular:

<cl-image public-id="docs/lion.svg" >
  <cl-transformation effect="vectorize:colors:2:detail:0.05">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("vectorize:colors:2:detail:0.05")).BuildImageTag("docs/lion.svg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("vectorize:colors:2:detail:0.05")).generate("docs/lion.svg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().effect("vectorize:colors:2:detail:0.05")).generate("docs/lion.svg");

Kotlin:

cloudinary.image {
publicId("docs/lion.svg")
effect(Effect.vectorize() {
numOfColors(2)
detailsLevel(0.05f)
})
}.generate()

Vectorizing as an artistic effect

Vectorizing is a great way to capture the main shapes and objects composing a photo or drawing and also produces a nice effect. When using the vectorize effect for an artistic transformation, you can deliver the vectorized images in any format, simply by specifying the relevant extension.

For example, the image of a fruit stand below has been vectorized to create a nice artistic effect and subsequently delivered as an optimized jpg file.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/upload/q_auto,e_vectorize/docs/fruit-stand.jpg

Ruby:

cl_image_tag("docs/fruit-stand.jpg", :quality=>"auto", :effect=>"vectorize")

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("docs/fruit-stand.jpg", array("quality"=>"auto", "effect"=>"vectorize"))

Library:

PHP (cloudinary_php v2.x):

(new ImageTag('docs/fruit-stand.jpg'))
  ->effect(Effect::vectorize())
  ->delivery(Delivery::quality(Quality::auto()));

Library:

Python:

CloudinaryImage("docs/fruit-stand.jpg").image(quality="auto", effect="vectorize")

Node.js:

cloudinary.image("docs/fruit-stand.jpg", {quality: "auto", effect: "vectorize"})

Java:

cloudinary.url().transformation(new Transformation().quality("auto").effect("vectorize")).imageTag("docs/fruit-stand.jpg");

JS:

cloudinary.imageTag('docs/fruit-stand.jpg', {quality: "auto", effect: "vectorize"}).toHtml();

jQuery:

$.cloudinary.image("docs/fruit-stand.jpg", {quality: "auto", effect: "vectorize"})

React:

<Image publicId="docs/fruit-stand.jpg" >
  <Transformation quality="auto" effect="vectorize" />
</Image>

Vue.js:

<cld-image public-id="docs/fruit-stand.jpg" >
  <cld-transformation quality="auto" effect="vectorize" />
</cld-image>

Angular:

<cl-image public-id="docs/fruit-stand.jpg" >
  <cl-transformation quality="auto" effect="vectorize">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto").Effect("vectorize")).BuildImageTag("docs/fruit-stand.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto").setEffect("vectorize")).generate("docs/fruit-stand.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().quality("auto").effect("vectorize")).generate("docs/fruit-stand.jpg");

Kotlin:

cloudinary.image {
publicId("docs/fruit-stand.jpg")
effect(Effect.vectorize())
delivery(Delivery.quality(Quality.auto()))
}.generate()

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page: