Relative size overlays

Resize overlays to a given percentage of the main image, either related to width, height or both by setting the flags parameter to relative (fl_relative in URLs) while also setting the width and/or height parameters to the percentage value you need, represented by a decimal value (e.g., 0.4 for 40%).

Main image

Main image

100% width-related

100% width-related

Including text

Including text
Ruby:
Copy to clipboard
cl_image_tag("black_bar.png")
PHP:
Copy to clipboard
cl_image_tag("black_bar.png")
Python:
Copy to clipboard
CloudinaryImage("black_bar.png").image()
Node.js:
Copy to clipboard
cloudinary.image("black_bar.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("black_bar.png");
JS:
Copy to clipboard
cloudinary.imageTag('black_bar.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("black_bar.png")
React:
Copy to clipboard
<Image publicId="black_bar.png" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="black_bar.png" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("black_bar.png")
Android:
Copy to clipboard
MediaManager.get().url().generate("black_bar.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("black_bar.png")!, cloudinary: cloudinary)
by Itay Taragano

Change image opacity

Change the image's opacity level by setting the opacity parameter (o in URLs) to a value between 0 to 100 which represents the visibility percentage. Control the opacity level of either the main image or overlaid images.

Original

Original

50% opacity

50% opacity

Flashlight effect

Flashlight effect
Ruby:
Copy to clipboard
cl_image_tag("sheep.jpg", :opacity=>50)
PHP:
Copy to clipboard
cl_image_tag("sheep.jpg", array("opacity"=>50))
Python:
Copy to clipboard
CloudinaryImage("sheep.jpg").image(opacity=50)
Node.js:
Copy to clipboard
cloudinary.image("sheep.jpg", {opacity: 50})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().opacity(50)).imageTag("sheep.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sheep.jpg', {opacity: 50}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sheep.jpg", {opacity: 50})
React:
Copy to clipboard
<Image publicId="sheep.jpg" >
  <Transformation opacity="50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sheep.jpg" >
  <cld-transformation opacity="50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sheep.jpg" >
  <cl-transformation opacity="50">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(50)).BuildImageTag("sheep.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().opacity(50)).generate("sheep.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOpacity(50)).generate("sheep.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Overlay an image over detected faces

Overlay another image of your choice on top of the faces which are automatically detected in your image. This is done by setting the overlay parameter (l in URLs) to the overlay image's public ID while setting the gravity parameter to faces (g_faces in URLs).

Original

Original

Faces overlay

Faces overlay

Funny overlay

Funny overlay
Ruby:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", :overlay=>"badge", :gravity=>"faces", :width=>30, :type=>"fetch")
PHP:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", array("overlay"=>"badge", "gravity"=>"faces", "width"=>30, "type"=>"fetch"))
Python:
Copy to clipboard
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg").image(overlay="badge", gravity="faces", width=30, type="fetch")
Node.js:
Copy to clipboard
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", {overlay: "badge", gravity: "faces", width: 30, type: "fetch"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("badge")).gravity("faces").width(30)).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg', {overlay: new cloudinary.Layer().publicId("badge"), gravity: "faces", width: 30, type: "fetch"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", {overlay: new cloudinary.Layer().publicId("badge"), gravity: "faces", width: 30, type: "fetch"})
React:
Copy to clipboard
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <Transformation overlay="badge" gravity="faces" width="30" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <cld-transformation overlay="badge" gravity="faces" width="30" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <cl-transformation overlay="badge" gravity="faces" width="30">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("badge")).Gravity("faces").Width(30)).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("badge")).gravity("faces").width(30)).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setOverlay("badge").setGravity("faces").setWidth(30)).generate("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Blur or pixelate faces

Hide faces in your images by telling Cloudinary to either blur or automatically pixelate the detected faces. This is done by setting the effect parameter to either blur_faces or pixelate_faces (e_blur_faces or e_pixelate_faces in URLs). The level of blurring and the size of the pixel squares can customized.

Original

Original

Blur faces

Blur faces

Pixelate faces

Pixelate faces
Ruby:
Copy to clipboard
cl_image_tag("young_couple.jpg", :effect=>"blur_faces")
PHP:
Copy to clipboard
cl_image_tag("young_couple.jpg", array("effect"=>"blur_faces"))
Python:
Copy to clipboard
CloudinaryImage("young_couple.jpg").image(effect="blur_faces")
Node.js:
Copy to clipboard
cloudinary.image("young_couple.jpg", {effect: "blur_faces"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("blur_faces")).imageTag("young_couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('young_couple.jpg', {effect: "blur_faces"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("young_couple.jpg", {effect: "blur_faces"})
React:
Copy to clipboard
<Image publicId="young_couple.jpg" >
  <Transformation effect="blur_faces" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="young_couple.jpg" >
  <cld-transformation effect="blur_faces" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="young_couple.jpg" >
  <cl-transformation effect="blur_faces">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("blur_faces")).BuildImageTag("young_couple.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("blur_faces")).generate("young_couple.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("blur_faces")).generate("young_couple.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Add a border to images

Add a border to your images by setting the value of the border parameter (bo in URLs). The border's color, width and opacity can be customized dynamically, and borders can be applied either on main images or on overlaid images.

Original

Original

Bordered

Bordered

Colored circle

Colored circle
Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg", :border=>"2px_solid_black")
PHP:
Copy to clipboard
cl_image_tag("face_top.jpg", array("border"=>"2px_solid_black"))
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image(border="2px_solid_black")
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().border("2px_solid_black")).imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg', {border: "2px_solid_black"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
React:
Copy to clipboard
<Image publicId="face_top.jpg" >
  <Transformation border="2px_solid_black" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >
  <cld-transformation border="2px_solid_black" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >
  <cl-transformation border="2px_solid_black">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("2px_solid_black")).BuildImageTag("face_top.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().border("2px_solid_black")).generate("face_top.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBorder("2px_solid_black")).generate("face_top.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Trim photo background

Apply the trim filter to remove the edges around the image. Do this by setting the effect parameter to trim (e_trim in URLs). You can customize the color similarity tolerance between 0 and 100. The default level is10`.

Original

Original

Trimmed

Trimmed

Custom level

Custom level
Ruby:
Copy to clipboard
cl_image_tag("business_man_padded.jpg", :effect=>"trim")
PHP:
Copy to clipboard
cl_image_tag("business_man_padded.jpg", array("effect"=>"trim"))
Python:
Copy to clipboard
CloudinaryImage("business_man_padded.jpg").image(effect="trim")
Node.js:
Copy to clipboard
cloudinary.image("business_man_padded.jpg", {effect: "trim"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("trim")).imageTag("business_man_padded.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('business_man_padded.jpg', {effect: "trim"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("business_man_padded.jpg", {effect: "trim"})
React:
Copy to clipboard
<Image publicId="business_man_padded.jpg" >
  <Transformation effect="trim" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="business_man_padded.jpg" >
  <cld-transformation effect="trim" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="business_man_padded.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim")).BuildImageTag("business_man_padded.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("trim")).generate("business_man_padded.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("trim")).generate("business_man_padded.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Adjust the hue value of images

Create a different mixture of colors for your images with the Hue filter. This can be applied by setting the effect parameter to hue (e_hue in URLs). The hue level can be customized.

Original

Original

Default level

Default level

Custom level

Custom level
Ruby:
Copy to clipboard
cl_image_tag("white_chicken.jpg", :effect=>"hue")
PHP:
Copy to clipboard
cl_image_tag("white_chicken.jpg", array("effect"=>"hue"))
Python:
Copy to clipboard
CloudinaryImage("white_chicken.jpg").image(effect="hue")
Node.js:
Copy to clipboard
cloudinary.image("white_chicken.jpg", {effect: "hue"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("hue")).imageTag("white_chicken.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('white_chicken.jpg', {effect: "hue"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("white_chicken.jpg", {effect: "hue"})
React:
Copy to clipboard
<Image publicId="white_chicken.jpg" >
  <Transformation effect="hue" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="white_chicken.jpg" >
  <cld-transformation effect="hue" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="white_chicken.jpg" >
  <cl-transformation effect="hue">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("hue")).BuildImageTag("white_chicken.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("hue")).generate("white_chicken.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("hue")).generate("white_chicken.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Increase fill light of photos

Fill your images with a lighting effect. This is very handy when dealing with darker images. How? Set the effect parameter to fill_light (e_fill_light in URLs). You can control the fill light level, the range is between -100 and 100. The default value is 0.

Original

Original

Default level

Default level

Custom level

Custom level
Ruby:
Copy to clipboard
cl_image_tag("8jsb1xofxdqamu2rzwt9q.jpg", :effect=>"fill_light")
PHP:
Copy to clipboard
cl_image_tag("8jsb1xofxdqamu2rzwt9q.jpg", array("effect"=>"fill_light"))
Python:
Copy to clipboard
CloudinaryImage("8jsb1xofxdqamu2rzwt9q.jpg").image(effect="fill_light")
Node.js:
Copy to clipboard
cloudinary.image("8jsb1xofxdqamu2rzwt9q.jpg", {effect: "fill_light"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("fill_light")).imageTag("8jsb1xofxdqamu2rzwt9q.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('8jsb1xofxdqamu2rzwt9q.jpg', {effect: "fill_light"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("8jsb1xofxdqamu2rzwt9q.jpg", {effect: "fill_light"})
React:
Copy to clipboard
<Image publicId="8jsb1xofxdqamu2rzwt9q.jpg" >
  <Transformation effect="fill_light" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="8jsb1xofxdqamu2rzwt9q.jpg" >
  <cld-transformation effect="fill_light" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="8jsb1xofxdqamu2rzwt9q.jpg" >
  <cl-transformation effect="fill_light">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("fill_light")).BuildImageTag("8jsb1xofxdqamu2rzwt9q.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("fill_light")).generate("8jsb1xofxdqamu2rzwt9q.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("fill_light")).generate("8jsb1xofxdqamu2rzwt9q.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Apply a sepia effect

Add a warm, antique feeling to your photos using the 'Sepia' filter effect. This is done by setting the effect parameter to sepia (e_sepia in URLs). You can also customize the strength of the Sepia effect.

Original

Original

Sepia

Sepia

Custom strength

Custom strength
Ruby:
Copy to clipboard
cl_image_tag("coast.jpg", :effect=>"sepia")
PHP:
Copy to clipboard
cl_image_tag("coast.jpg", array("effect"=>"sepia"))
Python:
Copy to clipboard
CloudinaryImage("coast.jpg").image(effect="sepia")
Node.js:
Copy to clipboard
cloudinary.image("coast.jpg", {effect: "sepia"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("sepia")).imageTag("coast.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('coast.jpg', {effect: "sepia"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("coast.jpg", {effect: "sepia"})
React:
Copy to clipboard
<Image publicId="coast.jpg" >
  <Transformation effect="sepia" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="coast.jpg" >
  <cld-transformation effect="sepia" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="coast.jpg" >
  <cl-transformation effect="sepia">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sepia")).BuildImageTag("coast.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("sepia")).generate("coast.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("sepia")).generate("coast.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Convert image to grayscale

Convert images to grayscale by setting the effect parameter to grayscale (e_grayscale in URLs). You can add further transformations in order to achieve the exact result you need.

Original

Original

Grayscale

Grayscale

Gradient fade

Gradient fade
Ruby:
Copy to clipboard
cl_image_tag("happy_dog.jpg", :effect=>"grayscale")
PHP:
Copy to clipboard
cl_image_tag("happy_dog.jpg", array("effect"=>"grayscale"))
Python:
Copy to clipboard
CloudinaryImage("happy_dog.jpg").image(effect="grayscale")
Node.js:
Copy to clipboard
cloudinary.image("happy_dog.jpg", {effect: "grayscale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("grayscale")).imageTag("happy_dog.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('happy_dog.jpg', {effect: "grayscale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("happy_dog.jpg", {effect: "grayscale"})
React:
Copy to clipboard
<Image publicId="happy_dog.jpg" >
  <Transformation effect="grayscale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="happy_dog.jpg" >
  <cld-transformation effect="grayscale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="happy_dog.jpg" >
  <cl-transformation effect="grayscale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("grayscale")).BuildImageTag("happy_dog.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("grayscale")).generate("happy_dog.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("grayscale")).generate("happy_dog.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Extract frames from an animated GIF

Extract frames from an animated GIF, you can choose which frame to deliver, apply any further image manipulations including resizing, cropping, overlays and much more.

Original

Original

1st frame-Default

1st frame-Default

10th frame

10th frame
Ruby:
Copy to clipboard
cl_image_tag("bored_animation.jpg")
PHP:
Copy to clipboard
cl_image_tag("bored_animation.jpg")
Python:
Copy to clipboard
CloudinaryImage("bored_animation.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("bored_animation.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("bored_animation.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('bored_animation.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("bored_animation.jpg")
React:
Copy to clipboard
<Image publicId="bored_animation.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="bored_animation.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="bored_animation.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("bored_animation.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("bored_animation.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("bored_animation.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Animated GIF manipulation

Transform animated GIFs just like any other image. Use Cloudinary's powerful image transformation tools to manipulate your animated GIFs just like you do for other standard still images.

Original

Original

Rotated

Rotated

Adding text

Adding text
Ruby:
Copy to clipboard
cl_image_tag("cloudinary_animation.gif", :width=>0.5, :crop=>"scale")
PHP:
Copy to clipboard
cl_image_tag("cloudinary_animation.gif", array("width"=>0.5, "crop"=>"scale"))
Python:
Copy to clipboard
CloudinaryImage("cloudinary_animation.gif").image(width=0.5, crop="scale")
Node.js:
Copy to clipboard
cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("cloudinary_animation.gif");
JS:
Copy to clipboard
cloudinary.imageTag('cloudinary_animation.gif', {width: "0.5", crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
React:
Copy to clipboard
<Image publicId="cloudinary_animation.gif" >
  <Transformation width="0.5" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="cloudinary_animation.gif" >
  <cld-transformation width="0.5" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("cloudinary_animation.gif")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("cloudinary_animation.gif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("cloudinary_animation.gif")!, cloudinary: cloudinary)
by Itay Taragano

Adding watermarks as an overlay

Add your watermark as an overlay on top of any image by setting the overlay parameter (l in URLs) as your watermark image's public ID. The overlaid image's size and position is customizable.

Overlaying

Overlaying

Scale and position

Scale and position

Semi-transparent

Semi-transparent
Ruby:
Copy to clipboard
cl_image_tag("envelope.jpg", :overlay=>"cloudinary_icon")
PHP:
Copy to clipboard
cl_image_tag("envelope.jpg", array("overlay"=>"cloudinary_icon"))
Python:
Copy to clipboard
CloudinaryImage("envelope.jpg").image(overlay="cloudinary_icon")
Node.js:
Copy to clipboard
cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon"))).imageTag("envelope.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('envelope.jpg', {overlay: new cloudinary.Layer().publicId("cloudinary_icon")}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("envelope.jpg", {overlay: new cloudinary.Layer().publicId("cloudinary_icon")})
React:
Copy to clipboard
<Image publicId="envelope.jpg" >
  <Transformation overlay="cloudinary_icon" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="envelope.jpg" >
  <cld-transformation overlay="cloudinary_icon" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="envelope.jpg" >
  <cl-transformation overlay="cloudinary_icon">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_icon"))).BuildImageTag("envelope.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon"))).generate("envelope.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_icon")).generate("envelope.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Converting an image format

Convert your images to any other format either by simply changing the extension of the file, or by setting the format parameter. You can either covert the image's format while uploading or upload the image as is and dynamically convert its format on delivery.

GIF

GIF

Circle cropped PNG

Circle cropped PNG

Low quality JPG

Low quality JPG
Ruby:
Copy to clipboard
cl_image_tag("nice_beach.gif")
PHP:
Copy to clipboard
cl_image_tag("nice_beach.gif")
Python:
Copy to clipboard
CloudinaryImage("nice_beach.gif").image()
Node.js:
Copy to clipboard
cloudinary.image("nice_beach.gif")
Java:
Copy to clipboard
cloudinary.url().imageTag("nice_beach.gif");
JS:
Copy to clipboard
cloudinary.imageTag('nice_beach.gif').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("nice_beach.gif")
React:
Copy to clipboard
<Image publicId="nice_beach.gif" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="nice_beach.gif" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="nice_beach.gif" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("nice_beach.gif")
Android:
Copy to clipboard
MediaManager.get().url().generate("nice_beach.gif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("nice_beach.gif")!, cloudinary: cloudinary)
by Itay Taragano

Generate your photo collage online

Take your base image and use the overlay parameter (l in URLs) to add any further images. Set the required width and height (w and h in URLs) with the required crop mode, and add any further transformations, effects and texts.

Various images

Various images

Collage with text

Collage with text

Another collage

Another collage
Ruby:
Copy to clipboard
cl_image_tag("yellow_tulip.jpg", :transformation=>[
  {:width=>220, :height=>140, :crop=>"fill"},
  {:overlay=>"brown_sheep", :width=>220, :height=>140, :x=>220, :crop=>"fill"},
  {:overlay=>"horses", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>"fill"},
  {:overlay=>"white_chicken", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>"fill"},
  {:overlay=>"butterfly.png", :height=>200, :x=>-10, :angle=>10},
  {:width=>400, :height=>260, :radius=>20, :crop=>"crop"},
  {:overlay=>{:font_family=>"Parisienne", :font_size=>35, :font_weight=>"bold", :text=>"Memories%20from%20our%20trip"}, :color=>"#990C47", :y=>155},
  {:effect=>"shadow"}
  ])
PHP:
Copy to clipboard
cl_image_tag("yellow_tulip.jpg", array("transformation"=>array(
  array("width"=>220, "height"=>140, "crop"=>"fill"),
  array("overlay"=>"brown_sheep", "width"=>220, "height"=>140, "x"=>220, "crop"=>"fill"),
  array("overlay"=>"horses", "width"=>220, "height"=>140, "y"=>140, "x"=>-110, "crop"=>"fill"),
  array("overlay"=>"white_chicken", "width"=>220, "height"=>140, "y"=>70, "x"=>110, "crop"=>"fill"),
  array("overlay"=>"butterfly.png", "height"=>200, "x"=>-10, "angle"=>10),
  array("width"=>400, "height"=>260, "radius"=>20, "crop"=>"crop"),
  array("overlay"=>array("font_family"=>"Parisienne", "font_size"=>35, "font_weight"=>"bold", "text"=>"Memories%20from%20our%20trip"), "color"=>"#990C47", "y"=>155),
  array("effect"=>"shadow")
  )))
Python:
Copy to clipboard
CloudinaryImage("yellow_tulip.jpg").image(transformation=[
  {'width': 220, 'height': 140, 'crop': "fill"},
  {'overlay': "brown_sheep", 'width': 220, 'height': 140, 'x': 220, 'crop': "fill"},
  {'overlay': "horses", 'width': 220, 'height': 140, 'y': 140, 'x': -110, 'crop': "fill"},
  {'overlay': "white_chicken", 'width': 220, 'height': 140, 'y': 70, 'x': 110, 'crop': "fill"},
  {'overlay': "butterfly.png", 'height': 200, 'x': -10, 'angle': 10},
  {'width': 400, 'height': 260, 'radius': 20, 'crop': "crop"},
  {'overlay': {'font_family': "Parisienne", 'font_size': 35, 'font_weight': "bold", 'text': "Memories%20from%20our%20trip"}, 'color': "#990C47", 'y': 155},
  {'effect': "shadow"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("yellow_tulip.jpg", {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: "butterfly.png", height: 200, x: -10, angle: 10},
  {width: 400, height: 260, radius: 20, crop: "crop"},
  {overlay: {font_family: "Parisienne", font_size: 35, font_weight: "bold", text: "Memories%20from%20our%20trip"}, color: "#990C47", y: 155},
  {effect: "shadow"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(220).height(140).crop("fill").chain()
  .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain()
  .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain()
  .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain()
  .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain()
  .width(400).height(260).radius(20).crop("crop").chain()
  .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip")).color("#990C47").y(155).chain()
  .effect("shadow")).imageTag("yellow_tulip.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('yellow_tulip.jpg', {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10},
  {width: 400, height: 260, radius: 20, crop: "crop"},
  {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip"), color: "#990C47", y: 155},
  {effect: "shadow"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("yellow_tulip.jpg", {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10},
  {width: 400, height: 260, radius: 20, crop: "crop"},
  {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip"), color: "#990C47", y: 155},
  {effect: "shadow"}
  ]})
React:
Copy to clipboard
<Image publicId="yellow_tulip.jpg" >
  <Transformation width="220" height="140" crop="fill" />
  <Transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" />
  <Transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" />
  <Transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" />
  <Transformation overlay="butterfly.png" height="200" x="-10" angle="10" />
  <Transformation width="400" height="260" radius="20" crop="crop" />
  <Transformation overlay={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" />
  <Transformation effect="shadow" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="yellow_tulip.jpg" >
  <cld-transformation width="220" height="140" crop="fill" />
  <cld-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" />
  <cld-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" />
  <cld-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" />
  <cld-transformation overlay="butterfly.png" height="200" x="-10" angle="10" />
  <cld-transformation width="400" height="260" radius="20" crop="crop" />
  <cld-transformation overlay={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" />
  <cld-transformation effect="shadow" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="yellow_tulip.jpg" >
  <cl-transformation width="220" height="140" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="butterfly.png" height="200" x="-10" angle="10">
  </cl-transformation>
  <cl-transformation width="400" height="260" radius="20" crop="crop">
  </cl-transformation>
  <cl-transformation overlay="text:Parisienne_35_bold:Memories%20from%20our%20trip" color="#990C47" y="155">
  </cl-transformation>
  <cl-transformation effect="shadow">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(220).Height(140).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("brown_sheep")).Width(220).Height(140).X(220).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("horses")).Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("white_chicken")).Width(220).Height(140).Y(70).X(110).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("butterfly.png")).Height(200).X(-10).Angle(10).Chain()
  .Width(400).Height(260).Radius(20).Crop("crop").Chain()
  .Overlay(new TextLayer().FontFamily("Parisienne").FontSize(35).FontWeight("bold").Text("Memories%20from%20our%20trip")).Color("#990C47").Y(155).Chain()
  .Effect("shadow")).BuildImageTag("yellow_tulip.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(220).height(140).crop("fill").chain()
  .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain()
  .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain()
  .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain()
  .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain()
  .width(400).height(260).radius(20).crop("crop").chain()
  .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip")).color("#990C47").y(155).chain()
  .effect("shadow")).generate("yellow_tulip.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(220).setHeight(140).setCrop("fill").chain()
  .setOverlay("brown_sheep").setWidth(220).setHeight(140).setX(220).setCrop("fill").chain()
  .setOverlay("horses").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop("fill").chain()
  .setOverlay("white_chicken").setWidth(220).setHeight(140).setY(70).setX(110).setCrop("fill").chain()
  .setOverlay("butterfly.png").setHeight(200).setX(-10).setAngle(10).chain()
  .setWidth(400).setHeight(260).setRadius(20).setCrop("crop").chain()
  .setOverlay("text:Parisienne_35_bold:Memories%20from%20our%20trip").setColor("#990C47").setY(155).chain()
  .setEffect("shadow")).generate("yellow_tulip.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Applying rounded corners to an image

Transforming an image to a rounded version is simply done by using the radius parameter (r in URLs). It accepts the number of pixels of the radius of all four corners.

Original

Original

Rounded corners

Rounded corners

Facebook picture

Facebook picture
Ruby:
Copy to clipboard
cl_image_tag("front_face.jpg", :radius=>50)
PHP:
Copy to clipboard
cl_image_tag("front_face.jpg", array("radius"=>50))
Python:
Copy to clipboard
CloudinaryImage("front_face.jpg").image(radius=50)
Node.js:
Copy to clipboard
cloudinary.image("front_face.jpg", {radius: 50})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().radius(50)).imageTag("front_face.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('front_face.jpg', {radius: 50}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("front_face.jpg", {radius: 50})
React:
Copy to clipboard
<Image publicId="front_face.jpg" >
  <Transformation radius="50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="front_face.jpg" >
  <cld-transformation radius="50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="front_face.jpg" >
  <cl-transformation radius="50">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Radius(50)).BuildImageTag("front_face.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().radius(50)).generate("front_face.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setRadius(50)).generate("front_face.jpg")!, cloudinary: cloudinary)
by Itay Taragano
Tags:

Text overlay positioning

Customize text overlay's position by setting the gravity (g in URLs) and the optional offset of the x and y. While the default text positioning ('gravity') is center, you can place your text in any other area of the image (tip: even outside the image's boundaries).

Default - center

Default - center

South gravity

South gravity

Custom position

Custom position
Ruby:
Copy to clipboard
cl_image_tag("face_center.jpg", :overlay=>{:font_family=>"Arial", :font_size=>45, :font_weight=>"bold", :text=>"Hello%20World"}, :gravity=>"north_west", :x=>20, :y=>20)
PHP:
Copy to clipboard
cl_image_tag("face_center.jpg", array("overlay"=>array("font_family"=>"Arial", "font_size"=>45, "font_weight"=>"bold", "text"=>"Hello%20World"), "gravity"=>"north_west", "x"=>20, "y"=>20))
Python:
Copy to clipboard
CloudinaryImage("face_center.jpg").image(overlay={'font_family': "Arial", 'font_size': 45, 'font_weight': "bold", 'text': "Hello%20World"}, gravity="north_west", x=20, y=20)
Node.js:
Copy to clipboard
cloudinary.image("face_center.jpg", {overlay: {font_family: "Arial", font_size: 45, font_weight: "bold", text: "Hello%20World"}, gravity: "north_west", x: 20, y: 20})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World")).gravity("north_west").x(20).y(20)).imageTag("face_center.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_center.jpg', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World"), gravity: "north_west", x: 20, y: 20}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_center.jpg", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World"), gravity: "north_west", x: 20, y: 20})
React:
Copy to clipboard
<Image publicId="face_center.jpg" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 45, fontWeight: "bold", text: "Hello%20World"}} gravity="north_west" x="20" y="20" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_center.jpg" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 45, fontWeight: "bold", text: "Hello%20World"}} gravity="north_west" x="20" y="20" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_center.jpg" >
  <cl-transformation overlay="text:Arial_45_bold:Hello%20World" gravity="north_west" x="20" y="20">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(45).FontWeight("bold").Text("Hello%20World")).Gravity("north_west").X(20).Y(20)).BuildImageTag("face_center.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World")).gravity("north_west").x(20).y(20)).generate("face_center.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_45_bold:Hello%20World").setGravity("north_west").setX(20).setY(20)).generate("face_center.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Limiting an image by specified dimensions

Limit the size of the image by specifying the width and height (w and h in URLs) while setting the crop parameter to limit. This will create an image that does not exceed the given width and height. All original image parts remain visible and the aspect ratio of the original image is kept.

Original

Original

70x70 Limited

70x70 Limited

1000x1000 Limited

1000x1000 Limited
Ruby:
Copy to clipboard
cl_image_tag("cashew_chicken.jpg", :width=>70, :height=>70, :crop=>"limit")
PHP:
Copy to clipboard
cl_image_tag("cashew_chicken.jpg", array("width"=>70, "height"=>70, "crop"=>"limit"))
Python:
Copy to clipboard
CloudinaryImage("cashew_chicken.jpg").image(width=70, height=70, crop="limit")
Node.js:
Copy to clipboard
cloudinary.image("cashew_chicken.jpg", {width: 70, height: 70, crop: "limit"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(70).height(70).crop("limit")).imageTag("cashew_chicken.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('cashew_chicken.jpg', {width: 70, height: 70, crop: "limit"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("cashew_chicken.jpg", {width: 70, height: 70, crop: "limit"})
React:
Copy to clipboard
<Image publicId="cashew_chicken.jpg" >
  <Transformation width="70" height="70" crop="limit" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="cashew_chicken.jpg" >
  <cld-transformation width="70" height="70" crop="limit" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="cashew_chicken.jpg" >
  <cl-transformation width="70" height="70" crop="limit">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(70).Height(70).Crop("limit")).BuildImageTag("cashew_chicken.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(70).height(70).crop("limit")).generate("cashew_chicken.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(70).setHeight(70).setCrop("limit")).generate("cashew_chicken.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Face detection-based image cropping

Crop an image based on an automatically detected face or faces by specifying the width and height (w and h in URLs), setting the gravity parameter to face or faces (g_face or g_faces in URLs), then choose the crop mode most suitable to your requirements.

Original

Original

Face detection

Face detection

Faces detection

Faces detection
Ruby:
Copy to clipboard
cl_image_tag("couple.jpg", :width=>100, :height=>100, :gravity=>"face", :crop=>"thumb")
PHP:
Copy to clipboard
cl_image_tag("couple.jpg", array("width"=>100, "height"=>100, "gravity"=>"face", "crop"=>"thumb"))
Python:
Copy to clipboard
CloudinaryImage("couple.jpg").image(width=100, height=100, gravity="face", crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "face", crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").crop("thumb")).imageTag("couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('couple.jpg', {width: 100, height: 100, gravity: "face", crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "face", crop: "thumb"})
React:
Copy to clipboard
<Image publicId="couple.jpg" >
  <Transformation width="100" height="100" gravity="face" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="couple.jpg" >
  <cld-transformation width="100" height="100" gravity="face" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="couple.jpg" >
  <cl-transformation width="100" height="100" gravity="face" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Crop("thumb")).BuildImageTag("couple.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(100).height(100).gravity("face").crop("thumb")).generate("couple.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(100).setHeight(100).setGravity("face").setCrop("thumb")).generate("couple.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Crop pictures by custom coordinates

Crop your images by specifying the width and height parameters (w and h in URLs) while setting the crop parameter to crop (c_crop in URLs). This will extract only part of a given width & height out of the original image. The original proportions are retained and so is the size of the graphics.

Original

Original

Center crop

Center crop

By Coordinates

By Coordinates
Ruby:
Copy to clipboard
cl_image_tag("kitten.jpg", :width=>300, :height=>250, :crop=>"crop")
PHP:
Copy to clipboard
cl_image_tag("kitten.jpg", array("width"=>300, "height"=>250, "crop"=>"crop"))
Python:
Copy to clipboard
CloudinaryImage("kitten.jpg").image(width=300, height=250, crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("kitten.jpg", {width: 300, height: 250, crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(300).height(250).crop("crop")).imageTag("kitten.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('kitten.jpg', {width: 300, height: 250, crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("kitten.jpg", {width: 300, height: 250, crop: "crop"})
React:
Copy to clipboard
<Image publicId="kitten.jpg" >
  <Transformation width="300" height="250" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="kitten.jpg" >
  <cld-transformation width="300" height="250" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="kitten.jpg" >
  <cl-transformation width="300" height="250" crop="crop">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(250).Crop("crop")).BuildImageTag("kitten.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(300).height(250).crop("crop")).generate("kitten.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(250).setCrop("crop")).generate("kitten.jpg")!, cloudinary: cloudinary)
by Itay Taragano