Image transformations

Whether your web application supports user uploaded images, you deliver static images, or you display profile pictures from social networks, you probably need to manipulate them to fit the graphic design of your Web site or mobile application.

For example, the following dynamic URL with on-the-fly image transformation crops an image to a 400x400 circular thumbnail while automatically focusing on the face, and then scales down the result to a width of 200 pixels. Below you can see the original image (scaled down) and the dynamically created face detection based thumbnail.

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/lady.jpg

Ruby:

cl_image_tag("lady.jpg", :transformation=>[
  {:width=>400, :height=>400, :gravity=>"face", :radius=>"max", :crop=>"crop"},
  {:width=>200, :crop=>"scale"}
  ])

PHP:

cl_image_tag("lady.jpg", array("transformation"=>array(
  array("width"=>400, "height"=>400, "gravity"=>"face", "radius"=>"max", "crop"=>"crop"),
  array("width"=>200, "crop"=>"scale")
  )))

Python:

CloudinaryImage("lady.jpg").image(transformation=[
  {'width': 400, 'height': 400, 'gravity': "face", 'radius': "max", 'crop': "crop"},
  {'width': 200, 'crop': "scale"}
  ])

Node.js:

cloudinary.image("lady.jpg", {transformation: [
  {width: 400, height: 400, gravity: "face", radius: "max", crop: "crop"},
  {width: 200, crop: "scale"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(400).height(400).gravity("face").radius("max").crop("crop").chain()
  .width(200).crop("scale")).imageTag("lady.jpg");

JS:

cloudinary.imageTag('lady.jpg', {transformation: [
  {width: 400, height: 400, gravity: "face", radius: "max", crop: "crop"},
  {width: 200, crop: "scale"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("lady.jpg", {transformation: [
  {width: 400, height: 400, gravity: "face", radius: "max", crop: "crop"},
  {width: 200, crop: "scale"}
  ]})

React:

<Image publicId="lady.jpg" >
  <Transformation width="400" height="400" gravity="face" radius="max" crop="crop" />
  <Transformation width="200" crop="scale" />
</Image>

Angular:

<cl-image public-id="lady.jpg" >
  <cl-transformation width="400" height="400" gravity="face" radius="max" crop="crop">
  </cl-transformation>
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Height(400).Gravity("face").Radius("max").Crop("crop").Chain()
  .Width(200).Crop("scale")).BuildImageTag("lady.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(400).height(400).gravity("face").radius("max").crop("crop").chain()
  .width(200).crop("scale")).generate("lady.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setHeight(400).setGravity("face").setRadius("max").setCrop("crop").chain()
  .setWidth(200).setCrop("scale")).generate("lady.jpg")!, cloudinary: cloudinary)

Cloudinary allows you to easily transform your images on-the-fly to any required format, style and dimension, and also optimizes images for minimal file size alongside high visual quality for an improved user experience and minimal bandwidth. You can do all of this by implementing dynamic image transformation and delivery URLs. You can change the required transformations at any time. All transformed images are created on-demand (lazily) and delivered to your users through a fast CDN with optimized caching.

You can specify the required height and width, define how to crop the image, select the image format that fits your needs, and/or apply a variety of filters and effects. You can also use our smart cropping techniques, including face-detection or auto-gravity for cropping based on the most relevant parts of uploaded photos. For complex transformations, you can use the Management Console or Admin API for defining named transformations and even run a set of chained transformations on your images. You can also use the Management Console to view delivery usage reports and optimization insights.

Delivering media assets using dynamic URLs

Accessing media assets is done using simple delivery HTTP or HTTPS URLs which are then delivered to users via a worldwide fast CDN. The URL contains the Public ID of the requested asset plus any optional transformation parameters. The public ID is the unique identifier of the asset and is either specified when uploading the asset to your Cloudinary account, or automatically assigned by Cloudinary (see Upload images for more details on the various options for specifying the public ID).

The Cloudinary asset delivery URL takes the following structure:

https://res.cloudinary.com/<cloud_name>/<resource_type>/<type>/<transformations>/<version>/<public_id>.<format>

Where:

cloud_name - The name of your Cloudinary account, a unique public identifier for URL building and API access.
resource_type - (optional) The type of asset to deliver. Default: image. Valid values: image, raw, or video
type - (optional) The delivery type. Default: upload. Valid values: upload, private, authenticated, fetch (plus additional social media fetch types. For details, see Fetching images from remote locations).
transformations (optional) One or more transformation parameters in a single component, or a set of chained transformations in multiple components. When the transformation URL is first accessed, the derived media file is created on-the-fly and delivered to your user. The derived file is also cached on the CDN and is immediately available to all subsequent users requesting the same asset.
version - (optional) You can add the version to your delivery URL to bypass the cached version on the CDN and force delivery of the latest resource (in the case that a resource has been overwritten with a newer file). For simplicity, the version component is generally not included in the example URLs on this page. For details, see Asset versions.
public_id - The unique identifier of the resource, including the folder structure if defined.
format - (optional) The file extension of the requested delivery format for the resource. Default: The originally uploaded format or the format determined by f_auto, when used.

Therefore, in the most general case of delivering an image that has been uploaded to your Cloudinary account, the delivery URL is given as:

https://res.cloudinary.com/<cloud_name>/image/upload/<public_id>.<format>

For example, displaying the image with a public ID of sample uploaded to Cloudinary's demo account in jpg format:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

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

Ruby:

cl_image_tag("sample.jpg")

PHP:

cl_image_tag("sample.jpg")

Python:

CloudinaryImage("sample.jpg").image()

Node.js:

cloudinary.image("sample.jpg")

Java:

cloudinary.url().imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg').toHtml();

jQuery:

$.cloudinary.image("sample.jpg")

React:

<Image publicId="sample.jpg" >

</Image>

Angular:

<cl-image public-id="sample.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("sample.jpg")!, cloudinary: cloudinary)

Any transformation (manipulation) instructions can be added before the public ID in the delivery URL. When the URL is first accessed, the derived image is created on-the-fly and delivered to your user. The derived image is also cached on the CDN and is immediately available to all subsequent users requesting the same image.

The following shows an example of delivering an image with transformation parameters, where the image with a public ID of sample is cropped to a width of 300 pixels and a height of 200 pixels, and delivered in JPEG format:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>300, :height=>200, :crop=>"crop")

PHP:

cl_image_tag("sample.jpg", array("width"=>300, "height"=>200, "crop"=>"crop"))

Python:

CloudinaryImage("sample.jpg").image(width=300, height=200, crop="crop")

Node.js:

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

Java:

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

JS:

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

jQuery:

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

React:

<Image publicId="sample.jpg" >
  <Transformation width="300" height="200" crop="crop" />
</Image>

Angular:

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

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(200).Crop("crop")).BuildImageTag("sample.jpg")

Android:

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

iOS:

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

You can also use shortcut URLs when specifically delivering image files using the default upload type. With Cloudinary’s Root Path URL feature, the resource type and type parameters can be omitted from the URL (they automatically default to the values 'image' and 'upload' respectively). For example, the Root Path shortcut delivery URL for the cropped image above is:

https://res.cloudinary.com/demo/w_300,h_200,c_crop/sample.jpg

The rest of this page documents the various transformation and delivery options, and you can also see the Image Transformation Reference table and Video Transformation Reference for the extensive list of available transformation parameters and their values.

Secure HTTPS URLs

Cloudinary supports delivering media assets using HTTPS URLs. The process for creating HTTPS delivery URLs is identical to creating HTTP URLs, with only the URL protocol changing. When using one of Cloudinary's framework SDKs, you can generate HTTPS URLs by setting the secure parameter to true, either globally (e.g., in the CLOUDINARY_URL environment variable) or locally in each call. For example, delivering the sample image with HTTPS:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

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

Ruby:

cl_image_tag("sample.jpg", :secure=>true)

PHP:

cl_image_tag("sample.jpg", array("secure"=>true))

Python:

CloudinaryImage("sample.jpg").image(secure=True)

Node.js:

cloudinary.image("sample.jpg", {secure: true})

Java:

cloudinary.url().secure(true).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {secure: true}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {secure: true})

React:

<Image publicId="sample.jpg" secure="true">

</Image>

Angular:

<cl-image public-id="sample.jpg" secure="true">

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Secure(true).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().secure(true).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("sample.jpg")!, cloudinary: cloudinary)

For more information on using HTTPS to deliver your media assets, see the article on Why isn't everyone using HTTPS and how to do it with Cloudinary.

Embedding images in web pages

Accessing uploaded images or their derived transformations is done using simple URLs that you can use as the 'src' of the 'img' tags in your HTML code or Javascript functions. URLs for accessing resources contain the resource kind, the Public ID of the resource, and optional version and transformation parameters. You can also use Cloudinary’s web framework SDKs to aid you in adding images to your web application and simplify the creation of transformation URLs and embedding HTML image tags. Cloudinary offers two main helper methods in this regard:

The Cloudinary URL helper method (e.g., cloudinary_url in Ruby on Rails) automatically generates the image source URL for use as the 'src' of the 'img' tags in your HTML code or Javascript functions. For example, using the URL helper method to return the URL of the sample image, scaled to a width of 300 pixels and a height of 100 pixels:

Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

Ruby:

cloudinary_url("sample.jpg", :width=>300, :height=>100, :crop=>"scale")

PHP:

Cloudinary::cloudinary_url("sample.jpg", array("width"=>300, "height"=>100, "crop"=>"scale"))

Python:

cloudinary.utils.cloudinary_url("sample.jpg", width=300, height=100, crop="scale")

Node.js:

cloudinary.url("sample.jpg", {width: 300, height: 100, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(300).height(100).crop("scale")).generate("sample.jpg")

JS:

cloudinary.url('sample.jpg', {width: 300, height: 100, crop: "scale"});

jQuery:

$.cloudinary.url("sample.jpg", {width: 300, height: 100, crop: "scale"})

React:

cloudinary.url('sample.jpg', {width: 300, height: 100, crop: "scale"});

Angular:

cloudinary.url('sample.jpg', {width: 300, height: 100, crop: "scale"});

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(100).Crop("scale")).BuildUrl("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(300).height(100).crop("scale")).generate("sample.jpg");

iOS:

cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(100).setCrop("scale")).generate("sample.jpg")

The Cloudinary Image Tag helper method (e.g., cl_image_tag in Ruby on Rails) automatically generates an HTML image tag including the image source URL. For example, using the Image Tag helper method to create an HTML image tag for the sample image, scaled to a width of 300 pixels and a height of 100 pixels:

Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

Ruby:

cl_image_tag("sample.jpg", :width=>300, :height=>100, :crop=>"scale")

PHP:

cl_image_tag("sample.jpg", array("width"=>300, "height"=>100, "crop"=>"scale"))

Python:

CloudinaryImage("sample.jpg").image(width=300, height=100, crop="scale")

Node.js:

cloudinary.image("sample.jpg", {width: 300, height: 100, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(300).height(100).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 300, height: 100, crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 300, height: 100, crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="300" height="100" crop="scale" />
</Image>

Angular:

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

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(100).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(300).height(100).crop("scale")).generate("sample.jpg");

iOS:

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

The Cloudinary Image Tag helper method allows you to not only specify any Cloudinary transformations parameters, but also to specify regular HTML image tag attributes (e.g., alt, title, width, height). For example, using the Image Tag helper method to create an HTML image tag for the sample image, with the 'alt' attribute set to "A sample photo" and the 'className' attribute set to "Samples":

Ruby PHP Python Node.js Java JS jQuery React Angular All

Ruby:

cl_image_tag("sample.jpg", :alt=>"A sample photo", :className=>"Samples")

PHP:

cl_image_tag("sample.jpg", array("alt"=>"A sample photo", "className"=>"Samples"))

Python:

CloudinaryImage("sample.jpg").image(alt="A sample photo", className="Samples")

Node.js:

cloudinary.image("sample.jpg", {alt: "A sample photo", className: "Samples"})

Java:

cloudinary.url().transformation(new Transformation().alt("A sample photo").className("Samples")).imageTag("sample.jpg")

JS:

cl.imageTag('sample.jpg', {alt: "A sample photo", className: "Samples"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {alt: "A sample photo", className: "Samples"})

React:

<Image publicId="sample.jpg" >
  <Transformation alt="A sample photo className="Samples />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation alt="A sample photo" className="Samples">
  </cl-transformation>
</cl-image>

Note

In general, when using the SDK helper methods, you will probably take advantage of the SDK parameter names for improved readability and maintenance of your code. However, you can also optionally pass a raw_transformation parameter, whose value is a literal URL transformation definition. For example, in Ruby:

cl_image_tag("flower.jpg", 
  :transformation=>[{:raw_transformation=> "o_90,w_1000,c_fill,g_south_east/l_my_image,fl_relative,w_1.0"}])

The string you pass as the raw_transformation value will be appended as is (with no processing or validation) to the end of any other transformation parameters passed in the same component of the transformation chain.

For more information on these SDK helper methods, see the documentation for the relevant framework: Ruby on Rails, PHP, Django, Node.js, Java, .NET, Angular, Javascript, React, iOS, Scala and Android.

Resizing and cropping images

You can resize and crop images in order to match the graphic design of your web site or mobile application. Whether images are uploaded in your server-side code or by your users, the original hi-res images are stored in the cloud for further processing and management. You can then dynamically create multiple resized, cropped and manipulated images on-the-fly and deliver them via dynamic URLs.

To change the size of a image, use the width and height parameters (w and h in URLs) to assign new values. You can resize the image by using both the width and height parameters or with only one of them: the other dimension is automatically updated to maintain the aspect ratio.

Using an integer value sets the new dimension to that number in pixels. For example, w_150 sets the width to exactly 150 pixels.
Using a decimal value sets the new dimension as a multiple of the original dimension. For example, w_0.5 sets the width to half the original width.
Using ih or iw as values sets the dimension to the initial height or initial width of the original image respectively. For example, w_iw sets the width to the same value as the original width of the image. This may be useful when applying chained transformations or setting the dimensions of an overlay.

Examples of resizing the uploaded jpg image named sample:

Resizing the width to half the original width, maintaining the aspect ratio:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

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

Ruby:

cl_image_tag("sample.jpg", :width=>0.5, :crop=>"scale")

PHP:

cl_image_tag("sample.jpg", array("width"=>0.5, "crop"=>"scale"))

Python:

CloudinaryImage("sample.jpg").image(width=0.5, crop="scale")

Node.js:

cloudinary.image("sample.jpg", {width: "0.5", crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: "0.5", crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: "0.5", crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="0.5" crop="scale" />
</Image>

Angular:

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

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

Resizing the height to 200 pixels, maintaining the aspect ratio:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

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

Ruby:

cl_image_tag("sample.jpg", :height=>200, :crop=>"scale")

PHP:

cl_image_tag("sample.jpg", array("height"=>200, "crop"=>"scale"))

Python:

CloudinaryImage("sample.jpg").image(height=200, crop="scale")

Node.js:

cloudinary.image("sample.jpg", {height: 200, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().height(200).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {height: 200, crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {height: 200, crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation height="200" crop="scale" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation height="200" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().height(200).crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

Resizing to a width of 200 pixels and a height of 100 pixels:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_100/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>200, :height=>100, :crop=>"scale")

PHP:

cl_image_tag("sample.jpg", array("width"=>200, "height"=>100, "crop"=>"scale"))

Python:

CloudinaryImage("sample.jpg").image(width=200, height=100, crop="scale")

Node.js:

cloudinary.image("sample.jpg", {width: 200, height: 100, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(200).height(100).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 200, height: 100, crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 200, height: 100, crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="200" height="100" crop="scale" />
</Image>

Angular:

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

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(100).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(200).height(100).crop("scale")).generate("sample.jpg");

iOS:

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

When changing the dimensions of an uploaded image by manipulating the image's height and/or width, you need to decide how to adapt or "crop" the image to fit into the requested size. Use the crop parameter for selecting the crop mode (c in URLs). Cloudinary supports the following image cropping modes: scale, fit, mfit, fill, lfill, limit, pad, lpad, mpad, crop, thumb, imagga_crop and imagga_scale.

Important

When creating dynamic delivery URLs, the image is scaled to the new dimensions by default (as in the examples above), unless a different cropping mode is selected. However, there is no default value when using the Cloudinary SDK helper methods (see Embedding images in web pages), and a cropping mode must be explicitly selected:

Specifying the width and height parameters without a crop mode will add them only as parameters of the HTML <img> tag.
Specifying the width and height parameters with a crop mode will add them as transformation parameters in the image source URL. Additionally:
- For 'fixed' crop modes like crop, scale and fill, where the width and height parameters determine the exact final size, the specified width and height transformation parameters are additionally added as parameters of the HTML <img> tag. This way, if an image takes a few moments to load, the required space will already be reserved, preventing surrounding content from jumping when the image loads.
- For 'variable' crop modes like fit, limit, lfill, etc., where the specified width and height may only be a minimum or maximum value, the width and height are only added to the transformation URL and not as parameters of the HTML <img> tag.

scale

Change the size of the image exactly to the given width and height without necessarily retaining the original aspect ratio: all original image parts are visible but might be stretched or shrunk. If only the width or height is given, then the image is scaled to the new dimension while retaining the original aspect ratio, unless you also include the ignore_aspect_ratio flag). This is the default cropping mode for resizing images if the crop mode is not specified.

Examples of scaling the uploaded image named sample:

Scaled to a width of 150 pixels (maintains the aspect ratio by default):

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

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

Ruby:

cl_image_tag("sample.jpg", :width=>150, :crop=>"scale")

PHP:

cl_image_tag("sample.jpg", array("width"=>150, "crop"=>"scale"))

Python:

CloudinaryImage("sample.jpg").image(width=150, crop="scale")

Node.js:

cloudinary.image("sample.jpg", {width: 150, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(150).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 150, crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 150, crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="150" crop="scale" />
</Image>

Angular:

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

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(150).crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

Scaled to a width and height of 150 pixels without maintaining the aspect ratio:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_150,h_150,c_scale/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>150, :height=>150, :crop=>"scale")

PHP:

cl_image_tag("sample.jpg", array("width"=>150, "height"=>150, "crop"=>"scale"))

Python:

CloudinaryImage("sample.jpg").image(width=150, height=150, crop="scale")

Node.js:

cloudinary.image("sample.jpg", {width: 150, height: 150, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(150).height(150).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 150, height: 150, crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 150, height: 150, crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="150" height="150" crop="scale" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="150" height="150" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(150).height(150).crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

Image scaled to a width and height of 150 pixels

Scaled to a width of 25% (maintains the aspect ratio by default):

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_0.25,c_scale/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>0.25, :crop=>"scale")

PHP:

cl_image_tag("sample.jpg", array("width"=>0.25, "crop"=>"scale"))

Python:

CloudinaryImage("sample.jpg").image(width=0.25, crop="scale")

Node.js:

cloudinary.image("sample.jpg", {width: "0.25", crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(0.25).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: "0.25", crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: "0.25", crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="0.25" crop="scale" />
</Image>

Angular:

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

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.25).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(0.25).crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.25).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

fit

The image is resized so that it takes up as much space as possible within a bounding box defined by the given width and height parameters. The original aspect ratio is retained and all of the original image is visible.

For example, the uploaded image named sample is resized to fit within a width and height of 250 pixels while retaining the aspect ratio:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_fit/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>250, :height=>250, :crop=>"fit")

PHP:

cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "crop"=>"fit"))

Python:

CloudinaryImage("sample.jpg").image(width=250, height=250, crop="fit")

Node.js:

cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "fit"})

Java:

cloudinary.url().transformation(new Transformation().width(250).height(250).crop("fit")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 250, height: 250, crop: "fit"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "fit"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="250" height="250" crop="fit" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="250" height="250" crop="fit">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Crop("fit")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(250).height(250).crop("fit")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setCrop("fit")).generate("sample.jpg")!, cloudinary: cloudinary)

Image fit to a width and height of 250 pixels

limit

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

For example, the uploaded jpg image named sample limited to a width and height of 250 pixels while retaining the aspect ratio:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_limit/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>250, :height=>250, :crop=>"limit")

PHP:

cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "crop"=>"limit"))

Python:

CloudinaryImage("sample.jpg").image(width=250, height=250, crop="limit")

Node.js:

cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "limit"})

Java:

cloudinary.url().transformation(new Transformation().width(250).height(250).crop("limit")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 250, height: 250, crop: "limit"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "limit"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="250" height="250" crop="limit" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="250" height="250" crop="limit">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Crop("limit")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(250).height(250).crop("limit")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setCrop("limit")).generate("sample.jpg")!, cloudinary: cloudinary)

Image limited to a width and height of 250 pixels

mfit (minimum fit)

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

For example, attempting to fit the uploaded image named sample to a minimum width and height of 250 pixels while retaining the aspect ratio, results in delivering the original larger image:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_mfit/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>250, :height=>250, :crop=>"mfit")

PHP:

cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "crop"=>"mfit"))

Python:

CloudinaryImage("sample.jpg").image(width=250, height=250, crop="mfit")

Node.js:

cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "mfit"})

Java:

cloudinary.url().transformation(new Transformation().width(250).height(250).crop("mfit")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 250, height: 250, crop: "mfit"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "mfit"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="250" height="250" crop="mfit" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="250" height="250" crop="mfit">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Crop("mfit")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(250).height(250).crop("mfit")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setCrop("mfit")).generate("sample.jpg")!, cloudinary: cloudinary)

Image mfit to a width and height of 250 pixels

fill

Create an image with the exact given width and height while retaining the original aspect ratio, using only part of the image that fills the given dimensions if necessary (only part of the original image might be visible if the requested aspect ratio is different from the original aspect ratio). You can also specify which part of the original image to use for filling the required dimensions in case the proportions do not match by using the gravity parameter (set to center by default).

Examples of fill used with the uploaded jpg image named sample:

Filled to a width and height of 250 pixels while retaining the aspect ratio:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_fill/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>250, :height=>250, :crop=>"fill")

PHP:

cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "crop"=>"fill"))

Python:

CloudinaryImage("sample.jpg").image(width=250, height=250, crop="fill")

Node.js:

cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(250).height(250).crop("fill")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 250, height: 250, crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "fill"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="250" height="250" crop="fill" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="250" height="250" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Crop("fill")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(250).height(250).crop("fill")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)

Image filled to a width and height of 250 pixels

Filled to a width and height of 250 pixels with east gravity:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_fill,g_east/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>250, :height=>250, :gravity=>"east", :crop=>"fill")

PHP:

cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "gravity"=>"east", "crop"=>"fill"))

Python:

CloudinaryImage("sample.jpg").image(width=250, height=250, gravity="east", crop="fill")

Node.js:

cloudinary.image("sample.jpg", {width: 250, height: 250, gravity: "east", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(250).height(250).gravity("east").crop("fill")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 250, height: 250, gravity: "east", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 250, height: 250, gravity: "east", crop: "fill"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="250" height="250" gravity="east" crop="fill" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="250" height="250" gravity="east" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Gravity("east").Crop("fill")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(250).height(250).gravity("east").crop("fill")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setGravity("east").setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)

Image filled to a width and height of 250 pixels with east gravity

lfill (limit fill)

Same as the fill mode but only if the original image is larger than the given limit (width and height), in which case the image is scaled down to fill the given width and height while retaining the original aspect ratio, using only part of the image that fills the given dimensions if necessary (only part of the original image might be visible if the requested aspect ratio is different from the original aspect ratio). You can also specify which part of the original image to use for filling the required dimensions in case the proportions do not match by using the gravity parameter. This mode doesn't scale up the image if your requested dimensions are bigger than the original image's.

For example, the uploaded image named sample limit filled to a width of 150 pixels and a height of 200 pixels while retaining the aspect ratio and limiting the size to no larger than the original image:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_150,h_200,c_lfill/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>150, :height=>200, :crop=>"lfill")

PHP:

cl_image_tag("sample.jpg", array("width"=>150, "height"=>200, "crop"=>"lfill"))

Python:

CloudinaryImage("sample.jpg").image(width=150, height=200, crop="lfill")

Node.js:

cloudinary.image("sample.jpg", {width: 150, height: 200, crop: "lfill"})

Java:

cloudinary.url().transformation(new Transformation().width(150).height(200).crop("lfill")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 150, height: 200, crop: "lfill"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 150, height: 200, crop: "lfill"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="150" height="200" crop="lfill" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="150" height="200" crop="lfill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(200).Crop("lfill")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(150).height(200).crop("lfill")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(200).setCrop("lfill")).generate("sample.jpg")!, cloudinary: cloudinary)

Image lfilled to a width of 150 and a height of 200 pixels

pad

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

For example, the uploaded jpg image named sample padded with a black background to a width and height of 250 pixels:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_pad,b_black/sample.jpg

Ruby:

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

PHP:

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

Python:

CloudinaryImage("sample.jpg").image(width=250, height=250, background="black", crop="pad")

Node.js:

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

Java:

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

JS:

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

jQuery:

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

React:

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

Angular:

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

.Net:

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

Android:

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

iOS:

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

Image padded to a width and height of 250 pixels

lpad (limit pad)

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

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

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_400,h_150,c_lpad,b_green/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>400, :height=>150, :background=>"green", :crop=>"lpad")

PHP:

cl_image_tag("sample.jpg", array("width"=>400, "height"=>150, "background"=>"green", "crop"=>"lpad"))

Python:

CloudinaryImage("sample.jpg").image(width=400, height=150, background="green", crop="lpad")

Node.js:

cloudinary.image("sample.jpg", {width: 400, height: 150, background: "green", crop: "lpad"})

Java:

cloudinary.url().transformation(new Transformation().width(400).height(150).background("green").crop("lpad")).imageTag("sample.jpg");

JS:

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

jQuery:

$.cloudinary.image("sample.jpg", {width: 400, height: 150, background: "green", crop: "lpad"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="400" height="150" background="green" crop="lpad" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="400" height="150" background="green" crop="lpad">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(150).Background("green").Crop("lpad")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(400).height(150).background("green").crop("lpad")).generate("sample.jpg");

iOS:

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

Image lpadded to a width and height of 250 pixels

mpad (minimum pad)

Same as the pad mode but only if the original image is smaller than the given minimum (width and height), in which case the image is scaled up to fill the given width and height while retaining the original aspect ratio and with all of the original image visible. This mode doesn't scale down the image if your requested dimensions are smaller than the original image's. If the proportions of the original image do not match the given width and height, padding is added to the image to reach the required size. You can also specify where the original image is placed by using the gravity parameter (set to center by default), and specify the color of the background in the case that padding is added.

For example, attempting to minimum pad the uploaded image named sample to a width and height of 250 pixels while retaining the aspect ratio, results in delivering the original larger image:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_mpad/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>250, :height=>250, :crop=>"mpad")

PHP:

cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "crop"=>"mpad"))

Python:

CloudinaryImage("sample.jpg").image(width=250, height=250, crop="mpad")

Node.js:

cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "mpad"})

Java:

cloudinary.url().transformation(new Transformation().width(250).height(250).crop("mpad")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 250, height: 250, crop: "mpad"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "mpad"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="250" height="250" crop="mpad" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="250" height="250" crop="mpad">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Crop("mpad")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(250).height(250).crop("mpad")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setCrop("mpad")).generate("sample.jpg")!, cloudinary: cloudinary)

Image mpadded to a width and height of 250 pixels

fill_pad

Tries to prevent a "bad crop" by first attempting to use the fill mode, but adding padding if it is determined that more of the original image needs to be included in the final image. Especially useful if the aspect ratio of the delivered image is considerably different from the original's aspect ratio. Only supported in conjunction with Automatic cropping (g_auto).

For example, the uploaded jpg image named lady delivered as a 80x400 image using the fill mode on the left, and the fill_pad mode on the right:

fill

fill_pad

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_80,h_400,c_fill_pad,g_auto,b_auto/lady.jpg

Ruby:

cl_image_tag("lady.jpg", :width=>80, :height=>400, :gravity=>"auto", :background=>"auto", :crop=>"fill_pad")

PHP:

cl_image_tag("lady.jpg", array("width"=>80, "height"=>400, "gravity"=>"auto", "background"=>"auto", "crop"=>"fill_pad"))

Python:

CloudinaryImage("lady.jpg").image(width=80, height=400, gravity="auto", background="auto", crop="fill_pad")

Node.js:

cloudinary.image("lady.jpg", {width: 80, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"})

Java:

cloudinary.url().transformation(new Transformation().width(80).height(400).gravity("auto").background("auto").crop("fill_pad")).imageTag("lady.jpg");

JS:

cloudinary.imageTag('lady.jpg', {width: 80, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"}).toHtml();

jQuery:

$.cloudinary.image("lady.jpg", {width: 80, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"})

React:

<Image publicId="lady.jpg" >
  <Transformation width="80" height="400" gravity="auto" background="auto" crop="fill_pad" />
</Image>

Angular:

<cl-image public-id="lady.jpg" >
  <cl-transformation width="80" height="400" gravity="auto" background="auto" crop="fill_pad">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(80).Height(400).Gravity("auto").Background("auto").Crop("fill_pad")).BuildImageTag("lady.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(80).height(400).gravity("auto").background("auto").crop("fill_pad")).generate("lady.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(80).setHeight(400).setGravity("auto").setBackground("auto").setCrop("fill_pad")).generate("lady.jpg")!, cloudinary: cloudinary)

crop

Extract a region of the given width and height out of the original image. The original proportions are retained and so is the size of the graphics. You can specify the gravity parameter to select which part of the image to extract, or use fixed coordinates cropping.

For example, the uploaded jpg image named sample cropped to a width of 200 pixels, a height of 150 pixels, with northwest gravity:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_150,c_crop,g_north_west/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>200, :height=>150, :gravity=>"north_west", :crop=>"crop")

PHP:

cl_image_tag("sample.jpg", array("width"=>200, "height"=>150, "gravity"=>"north_west", "crop"=>"crop"))

Python:

CloudinaryImage("sample.jpg").image(width=200, height=150, gravity="north_west", crop="crop")

Node.js:

cloudinary.image("sample.jpg", {width: 200, height: 150, gravity: "north_west", crop: "crop"})

Java:

cloudinary.url().transformation(new Transformation().width(200).height(150).gravity("north_west").crop("crop")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 200, height: 150, gravity: "north_west", crop: "crop"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 200, height: 150, gravity: "north_west", crop: "crop"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="200" height="150" gravity="north_west" crop="crop" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="200" height="150" gravity="north_west" crop="crop">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(150).Gravity("north_west").Crop("crop")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(200).height(150).gravity("north_west").crop("crop")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(150).setGravity("north_west").setCrop("crop")).generate("sample.jpg")!, cloudinary: cloudinary)

Image cropped to 100x150 with west gravity

Fixed coordinates cropping

You can specify a region of the original image to crop by giving the x and y coordinates of the top left corner of the region together with the width and height of the region. You can also use percentage based numbers instead of the exact coordinates for x, y, w and h (e.g., 0.5 for 50%) . Use this method when you know beforehand what the correct absolute cropping coordinates are, as in when your users manually select the region to crop out of the original image.

For example, the following image shows many white sheep and one brown sheep.

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/brown_sheep.jpg

Ruby:

cl_image_tag("brown_sheep.jpg")

PHP:

cl_image_tag("brown_sheep.jpg")

Python:

CloudinaryImage("brown_sheep.jpg").image()

Node.js:

cloudinary.image("brown_sheep.jpg")

Java:

cloudinary.url().imageTag("brown_sheep.jpg");

JS:

cloudinary.imageTag('brown_sheep.jpg').toHtml();

jQuery:

$.cloudinary.image("brown_sheep.jpg")

React:

<Image publicId="brown_sheep.jpg" >

</Image>

Angular:

<cl-image public-id="brown_sheep.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("brown_sheep.jpg")

Android:

MediaManager.get().url().generate("brown_sheep.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("brown_sheep.jpg")!, cloudinary: cloudinary)

To manipulate the picture so that only the brown sheep is visible, the image is cropped to a 300x200 region starting at the coordinate x = 355 and y = 410:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/x_355,y_410,w_300,h_200,c_crop/brown_sheep.jpg

Ruby:

cl_image_tag("brown_sheep.jpg", :x=>355, :y=>410, :width=>300, :height=>200, :crop=>"crop")

PHP:

cl_image_tag("brown_sheep.jpg", array("x"=>355, "y"=>410, "width"=>300, "height"=>200, "crop"=>"crop"))

Python:

CloudinaryImage("brown_sheep.jpg").image(x=355, y=410, width=300, height=200, crop="crop")

Node.js:

cloudinary.image("brown_sheep.jpg", {x: 355, y: 410, width: 300, height: 200, crop: "crop"})

Java:

cloudinary.url().transformation(new Transformation().x(355).y(410).width(300).height(200).crop("crop")).imageTag("brown_sheep.jpg");

JS:

cloudinary.imageTag('brown_sheep.jpg', {x: 355, y: 410, width: 300, height: 200, crop: "crop"}).toHtml();

jQuery:

$.cloudinary.image("brown_sheep.jpg", {x: 355, y: 410, width: 300, height: 200, crop: "crop"})

React:

<Image publicId="brown_sheep.jpg" >
  <Transformation x="355" y="410" width="300" height="200" crop="crop" />
</Image>

Angular:

<cl-image public-id="brown_sheep.jpg" >
  <cl-transformation x="355" y="410" width="300" height="200" crop="crop">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().X(355).Y(410).Width(300).Height(200).Crop("crop")).BuildImageTag("brown_sheep.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().x(355).y(410).width(300).height(200).crop("crop")).generate("brown_sheep.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setX(355).setY(410).setWidth(300).setHeight(200).setCrop("crop")).generate("brown_sheep.jpg")!, cloudinary: cloudinary)

300x200 image generated with fixed-coordinates cropping

The image can be further manipulated with chained transformations. For example, the 300x200 cropped version above, also scaled down to 150x100:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/x_355,y_410,w_300,h_200,c_crop/w_150,h_100,c_scale/brown_sheep.jpg

Ruby:

cl_image_tag("brown_sheep.jpg", :transformation=>[
  {:x=>355, :y=>410, :width=>300, :height=>200, :crop=>"crop"},
  {:width=>150, :height=>100, :crop=>"scale"}
  ])

PHP:

cl_image_tag("brown_sheep.jpg", array("transformation"=>array(
  array("x"=>355, "y"=>410, "width"=>300, "height"=>200, "crop"=>"crop"),
  array("width"=>150, "height"=>100, "crop"=>"scale")
  )))

Python:

CloudinaryImage("brown_sheep.jpg").image(transformation=[
  {'x': 355, 'y': 410, 'width': 300, 'height': 200, 'crop': "crop"},
  {'width': 150, 'height': 100, 'crop': "scale"}
  ])

Node.js:

cloudinary.image("brown_sheep.jpg", {transformation: [
  {x: 355, y: 410, width: 300, height: 200, crop: "crop"},
  {width: 150, height: 100, crop: "scale"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .x(355).y(410).width(300).height(200).crop("crop").chain()
  .width(150).height(100).crop("scale")).imageTag("brown_sheep.jpg");

JS:

cloudinary.imageTag('brown_sheep.jpg', {transformation: [
  {x: 355, y: 410, width: 300, height: 200, crop: "crop"},
  {width: 150, height: 100, crop: "scale"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("brown_sheep.jpg", {transformation: [
  {x: 355, y: 410, width: 300, height: 200, crop: "crop"},
  {width: 150, height: 100, crop: "scale"}
  ]})

React:

<Image publicId="brown_sheep.jpg" >
  <Transformation x="355" y="410" width="300" height="200" crop="crop" />
  <Transformation width="150" height="100" crop="scale" />
</Image>

Angular:

<cl-image public-id="brown_sheep.jpg" >
  <cl-transformation x="355" y="410" width="300" height="200" crop="crop">
  </cl-transformation>
  <cl-transformation width="150" height="100" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .X(355).Y(410).Width(300).Height(200).Crop("crop").Chain()
  .Width(150).Height(100).Crop("scale")).BuildImageTag("brown_sheep.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .x(355).y(410).width(300).height(200).crop("crop").chain()
  .width(150).height(100).crop("scale")).generate("brown_sheep.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setX(355).setY(410).setWidth(300).setHeight(200).setCrop("crop").chain()
  .setWidth(150).setHeight(100).setCrop("scale")).generate("brown_sheep.jpg")!, cloudinary: cloudinary)

fixed-coordinates cropped image also scaled down

thumb

The thumb cropping mode is specifically used for creating image thumbnails from either face or custom coordinates, and must always be accompanied by the gravity parameter set to one of the face detection or custom values. This cropping mode generates a thumbnail of an image with the exact given width and height dimensions and with the original proportions retained, but the resulting image might be scaled to fit in the given dimensions. You can specify the zoom parameter to determine how much to scale the resulting image within the given width and height.

For example, creating a 150x150 thumbnail with face detection, of the uploaded image called woman. Below you can see the original image as well as the face detection based thumbnail:

https://res.cloudinary.com/demo/image/upload/woman.jpg

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/g_face,c_thumb,w_150,h_150/woman.jpg

Ruby:

cl_image_tag("woman.jpg", :gravity=>"face", :width=>150, :height=>150, :crop=>"thumb")

PHP:

cl_image_tag("woman.jpg", array("gravity"=>"face", "width"=>150, "height"=>150, "crop"=>"thumb"))

Python:

CloudinaryImage("woman.jpg").image(gravity="face", width=150, height=150, crop="thumb")

Node.js:

cloudinary.image("woman.jpg", {gravity: "face", width: 150, height: 150, crop: "thumb"})

Java:

cloudinary.url().transformation(new Transformation().gravity("face").width(150).height(150).crop("thumb")).imageTag("woman.jpg");

JS:

cloudinary.imageTag('woman.jpg', {gravity: "face", width: 150, height: 150, crop: "thumb"}).toHtml();

jQuery:

$.cloudinary.image("woman.jpg", {gravity: "face", width: 150, height: 150, crop: "thumb"})

React:

<Image publicId="woman.jpg" >
  <Transformation gravity="face" width="150" height="150" crop="thumb" />
</Image>

Angular:

<cl-image public-id="woman.jpg" >
  <cl-transformation gravity="face" width="150" height="150" crop="thumb">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Width(150).Height(150).Crop("thumb")).BuildImageTag("woman.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().gravity("face").width(150).height(150).crop("thumb")).generate("woman.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setWidth(150).setHeight(150).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)

Imagga crop and scale

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

For example, the original image:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/family_bench.jpg

Ruby:

cl_image_tag("family_bench.jpg")

PHP:

cl_image_tag("family_bench.jpg")

Python:

CloudinaryImage("family_bench.jpg").image()

Node.js:

cloudinary.image("family_bench.jpg")

Java:

cloudinary.url().imageTag("family_bench.jpg");

JS:

cloudinary.imageTag('family_bench.jpg').toHtml();

jQuery:

$.cloudinary.image("family_bench.jpg")

React:

<Image publicId="family_bench.jpg" >

</Image>

Angular:

<cl-image public-id="family_bench.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("family_bench.jpg")

Android:

MediaManager.get().url().generate("family_bench.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("family_bench.jpg")!, cloudinary: cloudinary)

Image with Imagga cropping:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/c_imagga_crop/family_bench.jpg

Ruby:

cl_image_tag("family_bench.jpg", :crop=>"imagga_crop")

PHP:

cl_image_tag("family_bench.jpg", array("crop"=>"imagga_crop"))

Python:

CloudinaryImage("family_bench.jpg").image(crop="imagga_crop")

Node.js:

cloudinary.image("family_bench.jpg", {crop: "imagga_crop"})

Java:

cloudinary.url().transformation(new Transformation().crop("imagga_crop")).imageTag("family_bench.jpg");

JS:

cloudinary.imageTag('family_bench.jpg', {crop: "imagga_crop"}).toHtml();

jQuery:

$.cloudinary.image("family_bench.jpg", {crop: "imagga_crop"})

React:

<Image publicId="family_bench.jpg" >
  <Transformation crop="imagga_crop" />
</Image>

Angular:

<cl-image public-id="family_bench.jpg" >
  <cl-transformation crop="imagga_crop">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Crop("imagga_crop")).BuildImageTag("family_bench.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().crop("imagga_crop")).generate("family_bench.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setCrop("imagga_crop")).generate("family_bench.jpg")!, cloudinary: cloudinary)

Aspect ratio based cropping

Use the aspect_ratio parameter (ar in URLs) to resize or crop the image to a new aspect ratio. This parameter is used together with a specified crop mode (scale, fill, lfill, pad, lpad, mpad or crop), that determines how the image is adjusted to the new dimensions. This parameter can also be used when changing the dimensions of an image with only the width or height parameters (w and h in URLs) - the other dimension is then automatically updated to maintain the given aspect ratio.

The aspect_ratio parameter accepts a value in one of the following forms:

a:b where a signifies the relative width and b the relative height (e.g., 4:3 or 16:9).
a decimal value representing the ratio of the width divided by the height (e.g., 1.33 or 2.5).

Examples with the uploaded image named sample:

Cropped to an aspect ratio of 2.5:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/ar_2.5,c_crop/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :aspect_ratio=>"2.5", :crop=>"crop")

PHP:

cl_image_tag("sample.jpg", array("aspect_ratio"=>"2.5", "crop"=>"crop"))

Python:

CloudinaryImage("sample.jpg").image(aspect_ratio="2.5", crop="crop")

Node.js:

cloudinary.image("sample.jpg", {aspect_ratio: "2.5", crop: "crop"})

Java:

cloudinary.url().transformation(new Transformation().aspectRatio("2.5").crop("crop")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {aspectRatio: "2.5", crop: "crop"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {aspect_ratio: "2.5", crop: "crop"})

React:

<Image publicId="sample.jpg" >
  <Transformation aspectRatio="2.5" crop="crop" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation aspect-ratio="2.5" crop="crop">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("2.5").Crop("crop")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().aspectRatio("2.5").crop("crop")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("2.5").setCrop("crop")).generate("sample.jpg")!, cloudinary: cloudinary)

Filled to an aspect ratio of 16:9:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/ar_16:9,c_fill/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :aspect_ratio=>"16:9", :crop=>"fill")

PHP:

cl_image_tag("sample.jpg", array("aspect_ratio"=>"16:9", "crop"=>"fill"))

Python:

CloudinaryImage("sample.jpg").image(aspect_ratio="16:9", crop="fill")

Node.js:

cloudinary.image("sample.jpg", {aspect_ratio: "16:9", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().aspectRatio("16:9").crop("fill")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {aspectRatio: "16:9", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {aspect_ratio: "16:9", crop: "fill"})

React:

<Image publicId="sample.jpg" >
  <Transformation aspectRatio="16:9" crop="fill" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation aspect-ratio="16:9" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("16:9").Crop("fill")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().aspectRatio("16:9").crop("fill")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("16:9").setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)

Filled to a width of 400 pixels with an aspect ratio of 4:3:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_400,c_fill,ar_4:3/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>400, :aspect_ratio=>"4:3", :crop=>"fill")

PHP:

cl_image_tag("sample.jpg", array("width"=>400, "aspect_ratio"=>"4:3", "crop"=>"fill"))

Python:

CloudinaryImage("sample.jpg").image(width=400, aspect_ratio="4:3", crop="fill")

Node.js:

cloudinary.image("sample.jpg", {width: 400, aspect_ratio: "4:3", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(400).aspectRatio("4:3").crop("fill")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 400, aspectRatio: "4:3", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 400, aspect_ratio: "4:3", crop: "fill"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="400" aspectRatio="4:3" crop="fill" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="400" aspect-ratio="4:3" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).AspectRatio("4:3").Crop("fill")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(400).aspectRatio("4:3").crop("fill")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setAspectRatio("4:3").setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)

Filled to a width of 400 pixels with an aspect ratio of 4:3

Set Device Pixel Ratio (DPR)

Different devices support different DPR values, which is defined as the ratio between physical pixels and logical pixels. This means that a device with support for a higher DPR uses more physical pixels for displaying an image, resulting in a clearer, sharper image.

Use the dpr parameter to set the DPR value of the delivered image. The parameter accepts a numeric value specifying the DPR multiplier.

The dpr parameter is especially useful when adding overlays, as you need the overlay image to be correctly resized according to the required pixel density of the device (along with the containing image). Setting the dpr transformation parameter applies the same resizing rules both to the containing image, and the included overlay.

For example, the following URL dynamically generates a 100x100 face-detection-based circular thumbnail of an image named lady, and adds another image named cloudinary_icon as a semi-transparent watermark with a width of 50 pixels. Setting the dpr value to 1.0, 2.0 (as in the code example) or 3.0 generates the following images, while resizing both the containing image and the overlay to match the required DPR.

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/c_thumb,w_100,h_100,g_face,r_max/l_cloudinary_icon,e_brightness:200,fl_relative,w_0.5,o_60/dpr_2.0/lady.jpg

Ruby:

cl_image_tag("lady.jpg", :transformation=>[
  {:width=>100, :height=>100, :gravity=>"face", :radius=>"max", :crop=>"thumb"},
  {:overlay=>"cloudinary_icon", :effect=>"brightness:200", :flags=>"relative", :width=>0.5, :opacity=>60},
  {:dpr=>2.0}
  ])

PHP:

cl_image_tag("lady.jpg", array("transformation"=>array(
  array("width"=>100, "height"=>100, "gravity"=>"face", "radius"=>"max", "crop"=>"thumb"),
  array("overlay"=>"cloudinary_icon", "effect"=>"brightness:200", "flags"=>"relative", "width"=>0.5, "opacity"=>60),
  array("dpr"=>2.0)
  )))

Python:

CloudinaryImage("lady.jpg").image(transformation=[
  {'width': 100, 'height': 100, 'gravity': "face", 'radius': "max", 'crop': "thumb"},
  {'overlay': "cloudinary_icon", 'effect': "brightness:200", 'flags': "relative", 'width': 0.5, 'opacity': 60},
  {'dpr': 2.0}
  ])

Node.js:

cloudinary.image("lady.jpg", {transformation: [
  {width: 100, height: 100, gravity: "face", radius: "max", crop: "thumb"},
  {overlay: "cloudinary_icon", effect: "brightness:200", flags: "relative", width: "0.5", opacity: 60},
  {dpr: "2.0"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(100).height(100).gravity("face").radius("max").crop("thumb").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).effect("brightness:200").flags("relative").width(0.5).opacity(60).chain()
  .dpr(2.0)).imageTag("lady.jpg");

JS:

cloudinary.imageTag('lady.jpg', {transformation: [
  {width: 100, height: 100, gravity: "face", radius: "max", crop: "thumb"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), effect: "brightness:200", flags: "relative", width: "0.5", opacity: 60},
  {dpr: "2.0"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("lady.jpg", {transformation: [
  {width: 100, height: 100, gravity: "face", radius: "max", crop: "thumb"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), effect: "brightness:200", flags: "relative", width: "0.5", opacity: 60},
  {dpr: "2.0"}
  ]})

React:

<Image publicId="lady.jpg" >
  <Transformation width="100" height="100" gravity="face" radius="max" crop="thumb" />
  <Transformation overlay="cloudinary_icon" effect="brightness:200" flags="relative" width="0.5" opacity="60" />
  <Transformation dpr="2.0" />
</Image>

Angular:

<cl-image public-id="lady.jpg" >
  <cl-transformation width="100" height="100" gravity="face" radius="max" crop="thumb">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" effect="brightness:200" flags="relative" width="0.5" opacity="60">
  </cl-transformation>
  <cl-transformation dpr="2.0">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(100).Height(100).Gravity("face").Radius("max").Crop("thumb").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon")).Effect("brightness:200").Flags("relative").Width(0.5).Opacity(60).Chain()
  .Dpr(2.0)).BuildImageTag("lady.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(100).height(100).gravity("face").radius("max").crop("thumb").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).effect("brightness:200").flags("relative").width(0.5).opacity(60).chain()
  .dpr(2.0)).generate("lady.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(100).setHeight(100).setGravity("face").setRadius("max").setCrop("thumb").chain()
  .setOverlay("cloudinary_icon").setEffect("brightness:200").setFlags("relative").setWidth(0.5).setOpacity(60).chain()
  .setDpr(2.0)).generate("lady.jpg")!, cloudinary: cloudinary)

DPR 1.0 DPR 2.0 DPR 3.0

Now you can create a 100x100 HTML image tag and deliver an image with the resolution that best matches the specified pixel density of your users' devices. The three images below are all displayed within a 100x100 logical square using the <img> tag width and height attributes, while you see more details and a better visual result for the last two images if you view this documentation using a device that supports a higher DPR.

<img
  src="https://res.cloudinary.com/demo/image/upload/c_thumb,w_100,h_100,g_face,r_max/l_cloudinary_icon,e_brightness:200,w_50,o_60/dpr_2.0/lady.jpg"
  height=100
  width=100 />

DPR 1.0 (100x100, 4.1KB) DPR 2.0 (200x200, 10.1KB) DPR 3.0 (300x300, 22.3KB)

You can alternatively use dpr_auto to automatically deliver the best image, depending on the requesting device's support for DPR. For details, see the Responsive images documentation.

Control gravity

The gravity parameter (g in URLs) is used to specify a location in the image that is used as the focus for another transformation:

For certain cropping modes, gravity specifies which part of the original image to focus on (include) when the resulting image is smaller than than the original or the proportions do not match.
For placing underlays, overlays or text captions, gravity specifies where to place them in relation to the original image.

The basic gravity value is specified by giving a compass direction to focus on: north_east, north, north_west, west, south_west, south, south_east, east, or center (the default value). The compass direction represents a location in the image, for example, north_east represents the top right corner.

For example, the uploaded jpg image named sample filled to a width and height of 250 pixels while retaining the aspect ratio:

Original image:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

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

Ruby:

cl_image_tag("sample.jpg")

PHP:

cl_image_tag("sample.jpg")

Python:

CloudinaryImage("sample.jpg").image()

Node.js:

cloudinary.image("sample.jpg")

Java:

cloudinary.url().imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg').toHtml();

jQuery:

$.cloudinary.image("sample.jpg")

React:

<Image publicId="sample.jpg" >

</Image>

Angular:

<cl-image public-id="sample.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("sample.jpg")!, cloudinary: cloudinary)

With gravity set to north:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_fill,g_north/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>250, :height=>250, :gravity=>"north", :crop=>"fill")

PHP:

cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "gravity"=>"north", "crop"=>"fill"))

Python:

CloudinaryImage("sample.jpg").image(width=250, height=250, gravity="north", crop="fill")

Node.js:

cloudinary.image("sample.jpg", {width: 250, height: 250, gravity: "north", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(250).height(250).gravity("north").crop("fill")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 250, height: 250, gravity: "north", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 250, height: 250, gravity: "north", crop: "fill"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="250" height="250" gravity="north" crop="fill" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="250" height="250" gravity="north" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Gravity("north").Crop("fill")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(250).height(250).gravity("north").crop("fill")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setGravity("north").setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)

Image filled to a width and height of 250 pixels with north gravity

With gravity set to south_east:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_fill,g_south_east/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>250, :height=>250, :gravity=>"south_east", :crop=>"fill")

PHP:

cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "gravity"=>"south_east", "crop"=>"fill"))

Python:

CloudinaryImage("sample.jpg").image(width=250, height=250, gravity="south_east", crop="fill")

Node.js:

cloudinary.image("sample.jpg", {width: 250, height: 250, gravity: "south_east", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(250).height(250).gravity("south_east").crop("fill")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 250, height: 250, gravity: "south_east", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 250, height: 250, gravity: "south_east", crop: "fill"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="250" height="250" gravity="south_east" crop="fill" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="250" height="250" gravity="south_east" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Gravity("south_east").Crop("fill")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(250).height(250).gravity("south_east").crop("fill")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setGravity("south_east").setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)

More advanced gravity parameters include:

xy_center - Set the center of gravity to the given x & y coordinates.
face - Automatically detect the largest face in an image and make it the focus of the transformation. Any previously specified face coordinates (during upload, with the Admin API, or via the Management Console) override the automatically detected faces and are used instead. Defaults to north gravity if no face is detected or previously specified. You can also use face:auto or face:center so that the gravity will default to auto or center if no face is detected or specified.
faces - Same as face gravity, but detects all the faces in an image and uses the rectangle containing all face coordinates as the basis of the transformation. Any previously specified face coordinates (during upload, with the Admin API, or via the Management Console) override the automatically detected faces and are used instead. Defaults to north gravity if no faces are detected or previously specified. You can also use faces:auto or faces:center so that the gravity will default to auto or center if no faces are detected or specified.
face:center - Same as face gravity, but defaults to center gravity if no face is detected.
faces:center - Same as faces gravity, but defaults to center gravity if no face is detected.
liquid - Enables content-aware liquid rescaling (also sometimes known as 'seam carving'), which can be useful when changing the aspect ratio of an image. Normal scaling retains all image content even when aspect ratios change, so important elements of an image can be distorted. Liquid rescaling intelligently removes or duplicates 'seams' of pixels that may zig zag horizontally or vertically through the picture. The seams are determined using an algorithm that selects pixels with the least importance (least color change on either side of the seam). The result is an image where the most 'important' elements of the image are retained and generally do not appear distorted although the relative height or width of items in an image may change, especially if you significantly change the aspect ratio. Tips and guideines:
- This gravity can be used only in conjunction with c_scale (the default crop method).
- The liquid gravity works best when applied to scenic images with large 'unbusy' sections such as sky, grass, or water.
- It also works best when applied to larger images. Thus, it is recommended to use this gravity to change aspect ratio using relative widths and heights, where one of the two dimensions remains at or close to 1.0. If you also want to resize the image, apply the resize on a different component of a chained transformation.
- In some cases, over-aggressive liquid rescaling can result in significant artifacts.
- Example: w_1.0,ar_1.0,g_liquid/w_500,h_500 uses liquid scaling to change an image to a square (aspect ratio of 1:1) based on the original image width, and then resizes the result to 500x500.
auto - An intelligent algorithm analyzes and prioritizes the most prominent elements of the image to focus on. For details, see Automatic cropping
ocr_text - Detect all text elements in an image using the OCR Text Detection and Extraction add-on and use the detected bounding box coordinates as the basis of the transformation.
adv_face - Automatically detect the largest face in an image with the Advanced Facial Attribute Detection add-on and make it the focus of the transformation.
adv_faces - Automatically detect all faces in an image with the Advanced Facial Attribute Detection add-on and make them the focus of the transformation.
adv_eyes - Automatically detect all eyes in an image with the Advanced Facial Attribute Detection add-on and make them the focus of the transformation.
custom - Use custom coordinates that were previously specified (e.g., as part of the image upload method) and make them the focus of the transformation. Defaults to 'center' gravity if no custom coordinates have been specified.
custom:face - Same as custom gravity, but defaults to face gravity if no custom coordinates have been specified.
custom:faces - Same as custom gravity, but defaults to faces gravity if no custom coordinates have been specified.
custom:adv_face - Same as custom gravity, but defaults to adv_face gravity if no custom coordinates have been specified.
custom:adv_faces - Same as custom gravity, but defaults to adv_faces gravity if no custom coordinates have been specified.

Note

The fallback (default) values are only relevant when setting gravity for cropping modes and not when setting gravity for placing overlays. For example, if gravity is set to 'face' for placing an overlay, and no face is detected in the image, then the overlay is ignored.

Automatic cropping

Cloudinary's intelligent cropping capabilities ensure that the most interesting areas of each image are included in the resulting derived image, not only for photos with faces, but for any content type. Each image is analyzed individually to find the optimal region to focus on while cropping, and automatically detected faces (or other elements) are given higher priority while analyzing the image content (although any custom coordinates defined will override the detection algorithm).

The Cloudinary content-aware cropping algorithm uses a combination of heuristics to automatically detect the region of interest in every image and then crop them on the fly. Automatic cropping is supported by setting the gravity transformation parameter to auto (g_auto in URLs):

g_auto¹ - The default mode that gives higher priority to automatically detected faces (the same as g_auto:faces).
g_auto:[focal_gravity]¹ - (e.g., g_auto:adv_face). Specific focal gravities can be specified in order to give higher priority to other auto detected regions rather than the default of giving priority to detected faces. Supported options for focal_gravity: adv_face, adv_faces, adv_eyes, body, face, and faces (default).
g_auto:no_faces¹ - the algorithm will process the image without giving higher priority to any detected elements (e.g., auto detected faces).
g_auto:custom_no_override - Don't override the algorithm with the custom coordinates but give higher priority to the custom coordinates when determining the region of interest.
g_auto:none - Perform analysis of the image content without giving precedence to custom coordinates or higher priority to any detected element.
g_auto:[level]¹ - (Only relevant for the thumb cropping mode). The level of aggressiveness of the cropping algorithm between 0 and 100, where 100 tries to keep more of the original image, and 0 crops more aggressively and then zooms in to image. e.g., g_auto:50, g_auto:adv_faces:0. The default is 100.

¹ If custom coordinates have been specified for an image (using the Upload API or the Management Console), the cropping will be done according to them, taking the custom coordinates as-is and overriding the detection algorithm (the same as g_custom). This applies to all the g_auto options above except for g_auto:custom_no_override and g_auto:none.

Automatic cropping is supported for the fill, lfill, thumb and crop modes.

Tip

Add the getinfo flag to return the proposed g_auto cropping results in JSON instead of delivering the transformed image. You can then integrate the g_auto results into an external work flow, for example to display the proposed g_auto crop as the initial suggestion in an external editing tool.

Automatic cropping with the fill mode

Keeping the most of the original image according to the requested dimensions of the derived image. Ensuring that as much as possible of the most interesting regions of the original image is included in the resulting image.

Example of portrait aspect ratio cropping, regular vs. automatic:

Original

w_200,h_300,c_fill,g_center
Regular fill

w_200,h_300,c_fill,g_auto
Automatic fill

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_300,c_fill,g_auto/basketball_in_net.jpg

Ruby:

cl_image_tag("basketball_in_net.jpg", :width=>200, :height=>300, :gravity=>"auto", :crop=>"fill")

PHP:

cl_image_tag("basketball_in_net.jpg", array("width"=>200, "height"=>300, "gravity"=>"auto", "crop"=>"fill"))

Python:

CloudinaryImage("basketball_in_net.jpg").image(width=200, height=300, gravity="auto", crop="fill")

Node.js:

cloudinary.image("basketball_in_net.jpg", {width: 200, height: 300, gravity: "auto", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(200).height(300).gravity("auto").crop("fill")).imageTag("basketball_in_net.jpg");

JS:

cloudinary.imageTag('basketball_in_net.jpg', {width: 200, height: 300, gravity: "auto", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("basketball_in_net.jpg", {width: 200, height: 300, gravity: "auto", crop: "fill"})

React:

<Image publicId="basketball_in_net.jpg" >
  <Transformation width="200" height="300" gravity="auto" crop="fill" />
</Image>

Angular:

<cl-image public-id="basketball_in_net.jpg" >
  <cl-transformation width="200" height="300" gravity="auto" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(300).Gravity("auto").Crop("fill")).BuildImageTag("basketball_in_net.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(200).height(300).gravity("auto").crop("fill")).generate("basketball_in_net.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(300).setGravity("auto").setCrop("fill")).generate("basketball_in_net.jpg")!, cloudinary: cloudinary)

Example of square aspect ratio cropping, regular vs. automatic:

Original

w_200,h_200,c_fill,g_center
Regular fill

w_200,h_200,c_fill,g_auto
Automatic fill

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_fill,g_auto/face_left.jpg

Ruby:

cl_image_tag("face_left.jpg", :width=>200, :height=>200, :gravity=>"auto", :crop=>"fill")

PHP:

cl_image_tag("face_left.jpg", array("width"=>200, "height"=>200, "gravity"=>"auto", "crop"=>"fill"))

Python:

CloudinaryImage("face_left.jpg").image(width=200, height=200, gravity="auto", crop="fill")

Node.js:

cloudinary.image("face_left.jpg", {width: 200, height: 200, gravity: "auto", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(200).height(200).gravity("auto").crop("fill")).imageTag("face_left.jpg");

JS:

cloudinary.imageTag('face_left.jpg', {width: 200, height: 200, gravity: "auto", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("face_left.jpg", {width: 200, height: 200, gravity: "auto", crop: "fill"})

React:

<Image publicId="face_left.jpg" >
  <Transformation width="200" height="200" gravity="auto" crop="fill" />
</Image>

Angular:

<cl-image public-id="face_left.jpg" >
  <cl-transformation width="200" height="200" gravity="auto" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Gravity("auto").Crop("fill")).BuildImageTag("face_left.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(200).height(200).gravity("auto").crop("fill")).generate("face_left.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setGravity("auto").setCrop("fill")).generate("face_left.jpg")!, cloudinary: cloudinary)

Automatic cropping with the lfill mode

Same as the fill mode, but only if the original image is larger than the given limit (width and height). This mode doesn't scale up the image if your requested dimensions are bigger than the original image's.

Automatic cropping with the thumb mode

Makes possible more aggressive cropping than the fill mode. This mode attempts to further zoom in and crop out less interesting image regions when relevant in order to include the most interesting objects in the resulting derived image. The automatic cropping algorithm decides whether and how aggressively to zoom-in and crop according to the content and cropping ratio of each image individually. A numerical value between 0 and 100 can be added to the g_auto parameter in order to advise the algorithm regarding the desired aggressiveness level (e.g., g_auto:0 for the most aggressive thumb cropping).

Example of a square thumbnail, regular vs. automatic cropping:

Original

c_thumb,g_center
Regular thumbnail

c_thumb,g_auto
Automatic thumbnail

Automatic image thumbnail with the most aggressive cropping

c_thumb,g_auto:0
Automatic thumbnail -
most aggressive

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_150,h_150,c_thumb,g_auto:0/sunset_shoes.jpg

Ruby:

cl_image_tag("sunset_shoes.jpg", :width=>150, :height=>150, :gravity=>"auto:0", :crop=>"thumb")

PHP:

cl_image_tag("sunset_shoes.jpg", array("width"=>150, "height"=>150, "gravity"=>"auto:0", "crop"=>"thumb"))

Python:

CloudinaryImage("sunset_shoes.jpg").image(width=150, height=150, gravity="auto:0", crop="thumb")

Node.js:

cloudinary.image("sunset_shoes.jpg", {width: 150, height: 150, gravity: "auto:0", crop: "thumb"})

Java:

cloudinary.url().transformation(new Transformation().width(150).height(150).gravity("auto:0").crop("thumb")).imageTag("sunset_shoes.jpg");

JS:

cloudinary.imageTag('sunset_shoes.jpg', {width: 150, height: 150, gravity: "auto:0", crop: "thumb"}).toHtml();

jQuery:

$.cloudinary.image("sunset_shoes.jpg", {width: 150, height: 150, gravity: "auto:0", crop: "thumb"})

React:

<Image publicId="sunset_shoes.jpg" >
  <Transformation width="150" height="150" gravity="auto:0" crop="thumb" />
</Image>

Angular:

<cl-image public-id="sunset_shoes.jpg" >
  <cl-transformation width="150" height="150" gravity="auto:0" crop="thumb">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Gravity("auto:0").Crop("thumb")).BuildImageTag("sunset_shoes.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(150).height(150).gravity("auto:0").crop("thumb")).generate("sunset_shoes.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setGravity("auto:0").setCrop("thumb")).generate("sunset_shoes.jpg")!, cloudinary: cloudinary)

Note

The numeric value supplied for auto gravity together with thumb cropping indicates your preference for more or less agressive zooming and the algorithm takes that preference into account. However, the automatic gravity algorithm may still determine that for a particular image and aspect ratio, its default zoom selection is the appropriate zoom for this image. In such a case, you may not see a difference between the default g_auto and g_auto with a specific agressiveness level.

Automatic cropping with the crop mode

Crop a region of exactly the given width and height out of the original image while automatically focusing on the most interesting region of the original image that fits within the required dimensions. The portion of the interesting area depends on the resolution of the original image. The crop mode is less useful than the fill, lfill, and thumb modes, as it is only practical to use when both the dimensions of the original image and the size of the interesting region are already known.

Example of a square crop, regular vs. auto cropping:

Original

c_crop,g_center
Regular crop

c_crop,g_auto
Automatic crop

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_crop,g_auto/fat_cat.jpg

Ruby:

cl_image_tag("fat_cat.jpg", :width=>200, :height=>200, :gravity=>"auto", :crop=>"crop")

PHP:

cl_image_tag("fat_cat.jpg", array("width"=>200, "height"=>200, "gravity"=>"auto", "crop"=>"crop"))

Python:

CloudinaryImage("fat_cat.jpg").image(width=200, height=200, gravity="auto", crop="crop")

Node.js:

cloudinary.image("fat_cat.jpg", {width: 200, height: 200, gravity: "auto", crop: "crop"})

Java:

cloudinary.url().transformation(new Transformation().width(200).height(200).gravity("auto").crop("crop")).imageTag("fat_cat.jpg");

JS:

cloudinary.imageTag('fat_cat.jpg', {width: 200, height: 200, gravity: "auto", crop: "crop"}).toHtml();

jQuery:

$.cloudinary.image("fat_cat.jpg", {width: 200, height: 200, gravity: "auto", crop: "crop"})

React:

<Image publicId="fat_cat.jpg" >
  <Transformation width="200" height="200" gravity="auto" crop="crop" />
</Image>

Angular:

<cl-image public-id="fat_cat.jpg" >
  <cl-transformation width="200" height="200" gravity="auto" crop="crop">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Gravity("auto").Crop("crop")).BuildImageTag("fat_cat.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(200).height(200).gravity("auto").crop("crop")).generate("fat_cat.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setGravity("auto").setCrop("crop")).generate("fat_cat.jpg")!, cloudinary: cloudinary)

Face detection based transformations

Cloudinary provides face detection algorithms for automatically applying transformations according to the detected faces within an image. This section consists of the following topics:

Face detection based cropping
Position overlays on detected faces
Effects with face detection
Advanced facial attributes detection
Changing the default zoom level

Face detection based cropping

Cloudinary supports built-in face detection capabilities that allow you to intelligently crop your images. To automatically crop an image so that the detected face(s) is used as the center of the derived picture, set the gravity parameter to one of the following values:

face - the region of the image that includes the single largest face (g_face for URLs).
faces - the region of the image that includes all the faces detected (g_faces for URLs).

For example, the image below of a nice woman with a Blue Morpho butterfly was uploaded to Cloudinary:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/butterfly.jpg

Ruby:

cl_image_tag("butterfly.jpg")

PHP:

cl_image_tag("butterfly.jpg")

Python:

CloudinaryImage("butterfly.jpg").image()

Node.js:

cloudinary.image("butterfly.jpg")

Java:

cloudinary.url().imageTag("butterfly.jpg");

JS:

cloudinary.imageTag('butterfly.jpg').toHtml();

jQuery:

$.cloudinary.image("butterfly.jpg")

React:

<Image publicId="butterfly.jpg" >

</Image>

Angular:

<cl-image public-id="butterfly.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("butterfly.jpg")

Android:

MediaManager.get().url().generate("butterfly.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("butterfly.jpg")!, cloudinary: cloudinary)

To create a 200x200 version with the fill cropping mode to keep as much as possible of the original image, and using the default center gravity without face detection (for comparison):

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_fill/butterfly.jpg

Ruby:

cl_image_tag("butterfly.jpg", :width=>200, :height=>200, :crop=>"fill")

PHP:

cl_image_tag("butterfly.jpg", array("width"=>200, "height"=>200, "crop"=>"fill"))

Python:

CloudinaryImage("butterfly.jpg").image(width=200, height=200, crop="fill")

Node.js:

cloudinary.image("butterfly.jpg", {width: 200, height: 200, crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(200).height(200).crop("fill")).imageTag("butterfly.jpg");

JS:

cloudinary.imageTag('butterfly.jpg', {width: 200, height: 200, crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("butterfly.jpg", {width: 200, height: 200, crop: "fill"})

React:

<Image publicId="butterfly.jpg" >
  <Transformation width="200" height="200" crop="fill" />
</Image>

Angular:

<cl-image public-id="butterfly.jpg" >
  <cl-transformation width="200" height="200" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Crop("fill")).BuildImageTag("butterfly.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(200).height(200).crop("fill")).generate("butterfly.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setCrop("fill")).generate("butterfly.jpg")!, cloudinary: cloudinary)

Now adding the face gravity parameter to correctly fill the requested dimensions:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_fill,g_face/butterfly.jpg

Ruby:

cl_image_tag("butterfly.jpg", :width=>200, :height=>200, :gravity=>"face", :crop=>"fill")

PHP:

cl_image_tag("butterfly.jpg", array("width"=>200, "height"=>200, "gravity"=>"face", "crop"=>"fill"))

Python:

CloudinaryImage("butterfly.jpg").image(width=200, height=200, gravity="face", crop="fill")

Node.js:

cloudinary.image("butterfly.jpg", {width: 200, height: 200, gravity: "face", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(200).height(200).gravity("face").crop("fill")).imageTag("butterfly.jpg");

JS:

cloudinary.imageTag('butterfly.jpg', {width: 200, height: 200, gravity: "face", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("butterfly.jpg", {width: 200, height: 200, gravity: "face", crop: "fill"})

React:

<Image publicId="butterfly.jpg" >
  <Transformation width="200" height="200" gravity="face" crop="fill" />
</Image>

Angular:

<cl-image public-id="butterfly.jpg" >
  <cl-transformation width="200" height="200" gravity="face" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Gravity("face").Crop("fill")).BuildImageTag("butterfly.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(200).height(200).gravity("face").crop("fill")).generate("butterfly.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setGravity("face").setCrop("fill")).generate("butterfly.jpg")!, cloudinary: cloudinary)

In order to create a 200x200 thumbnail focused on the face of the woman, simply select the thumb crop mode and face gravity:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_thumb,g_face/butterfly.jpg

Ruby:

cl_image_tag("butterfly.jpg", :width=>200, :height=>200, :gravity=>"face", :crop=>"thumb")

PHP:

cl_image_tag("butterfly.jpg", array("width"=>200, "height"=>200, "gravity"=>"face", "crop"=>"thumb"))

Python:

CloudinaryImage("butterfly.jpg").image(width=200, height=200, gravity="face", crop="thumb")

Node.js:

cloudinary.image("butterfly.jpg", {width: 200, height: 200, gravity: "face", crop: "thumb"})

Java:

cloudinary.url().transformation(new Transformation().width(200).height(200).gravity("face").crop("thumb")).imageTag("butterfly.jpg");

JS:

cloudinary.imageTag('butterfly.jpg', {width: 200, height: 200, gravity: "face", crop: "thumb"}).toHtml();

jQuery:

$.cloudinary.image("butterfly.jpg", {width: 200, height: 200, gravity: "face", crop: "thumb"})

React:

<Image publicId="butterfly.jpg" >
  <Transformation width="200" height="200" gravity="face" crop="thumb" />
</Image>

Angular:

<cl-image public-id="butterfly.jpg" >
  <cl-transformation width="200" height="200" gravity="face" crop="thumb">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Gravity("face").Crop("thumb")).BuildImageTag("butterfly.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(200).height(200).gravity("face").crop("thumb")).generate("butterfly.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setGravity("face").setCrop("thumb")).generate("butterfly.jpg")!, cloudinary: cloudinary)

90x90 thumb focused on the face of the woman

You can also automatically crop to the region defined by face detection without resizing the original image. The following example uses the crop mode together with face gravity for cropping the original image to the face of the woman:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/c_crop,g_face/butterfly.jpg

Ruby:

cl_image_tag("butterfly.jpg", :gravity=>"face", :crop=>"crop")

PHP:

cl_image_tag("butterfly.jpg", array("gravity"=>"face", "crop"=>"crop"))

Python:

CloudinaryImage("butterfly.jpg").image(gravity="face", crop="crop")

Node.js:

cloudinary.image("butterfly.jpg", {gravity: "face", crop: "crop"})

Java:

cloudinary.url().transformation(new Transformation().gravity("face").crop("crop")).imageTag("butterfly.jpg");

JS:

cloudinary.imageTag('butterfly.jpg', {gravity: "face", crop: "crop"}).toHtml();

jQuery:

$.cloudinary.image("butterfly.jpg", {gravity: "face", crop: "crop"})

React:

<Image publicId="butterfly.jpg" >
  <Transformation gravity="face" crop="crop" />
</Image>

Angular:

<cl-image public-id="butterfly.jpg" >
  <cl-transformation gravity="face" crop="crop">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Crop("crop")).BuildImageTag("butterfly.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().gravity("face").crop("crop")).generate("butterfly.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setCrop("crop")).generate("butterfly.jpg")!, cloudinary: cloudinary)

For examples with multiple faces, the following image, showing a nice couple, was uploaded to Cloudinary:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/couple.jpg

Ruby:

cl_image_tag("couple.jpg")

PHP:

cl_image_tag("couple.jpg")

Python:

CloudinaryImage("couple.jpg").image()

Node.js:

cloudinary.image("couple.jpg")

Java:

cloudinary.url().imageTag("couple.jpg");

JS:

cloudinary.imageTag('couple.jpg').toHtml();

jQuery:

$.cloudinary.image("couple.jpg")

React:

<Image publicId="couple.jpg" >

</Image>

Angular:

<cl-image public-id="couple.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("couple.jpg")

Android:

MediaManager.get().url().generate("couple.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("couple.jpg")!, cloudinary: cloudinary)

You can specify the thumb crop mode and face gravity to create a 150x150 thumbnail centered on the face of only the biggest face in the image:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_150,h_150,c_thumb,g_face/couple.jpg

Ruby:

cl_image_tag("couple.jpg", :width=>150, :height=>150, :gravity=>"face", :crop=>"thumb")

PHP:

cl_image_tag("couple.jpg", array("width"=>150, "height"=>150, "gravity"=>"face", "crop"=>"thumb"))

Python:

CloudinaryImage("couple.jpg").image(width=150, height=150, gravity="face", crop="thumb")

Node.js:

cloudinary.image("couple.jpg", {width: 150, height: 150, gravity: "face", crop: "thumb"})

Java:

cloudinary.url().transformation(new Transformation().width(150).height(150).gravity("face").crop("thumb")).imageTag("couple.jpg");

JS:

cloudinary.imageTag('couple.jpg', {width: 150, height: 150, gravity: "face", crop: "thumb"}).toHtml();

jQuery:

$.cloudinary.image("couple.jpg", {width: 150, height: 150, gravity: "face", crop: "thumb"})

React:

<Image publicId="couple.jpg" >
  <Transformation width="150" height="150" gravity="face" crop="thumb" />
</Image>

Angular:

<cl-image public-id="couple.jpg" >
  <cl-transformation width="150" height="150" gravity="face" crop="thumb">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Gravity("face").Crop("thumb")).BuildImageTag("couple.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(150).height(150).gravity("face").crop("thumb")).generate("couple.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setGravity("face").setCrop("thumb")).generate("couple.jpg")!, cloudinary: cloudinary)

150x150 thumb focused on the biggest face in the image

In order to create a thumbnail focusing on the faces of both of them, simply specify faces as the gravity:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_115,h_135,c_thumb,g_faces/couple.jpg

Ruby:

cl_image_tag("couple.jpg", :width=>115, :height=>135, :gravity=>"faces", :crop=>"thumb")

PHP:

cl_image_tag("couple.jpg", array("width"=>115, "height"=>135, "gravity"=>"faces", "crop"=>"thumb"))

Python:

CloudinaryImage("couple.jpg").image(width=115, height=135, gravity="faces", crop="thumb")

Node.js:

cloudinary.image("couple.jpg", {width: 115, height: 135, gravity: "faces", crop: "thumb"})

Java:

cloudinary.url().transformation(new Transformation().width(115).height(135).gravity("faces").crop("thumb")).imageTag("couple.jpg");

JS:

cloudinary.imageTag('couple.jpg', {width: 115, height: 135, gravity: "faces", crop: "thumb"}).toHtml();

jQuery:

$.cloudinary.image("couple.jpg", {width: 115, height: 135, gravity: "faces", crop: "thumb"})

React:

<Image publicId="couple.jpg" >
  <Transformation width="115" height="135" gravity="faces" crop="thumb" />
</Image>

Angular:

<cl-image public-id="couple.jpg" >
  <cl-transformation width="115" height="135" gravity="faces" crop="thumb">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(115).Height(135).Gravity("faces").Crop("thumb")).BuildImageTag("couple.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(115).height(135).gravity("faces").crop("thumb")).generate("couple.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(115).setHeight(135).setGravity("faces").setCrop("thumb")).generate("couple.jpg")!, cloudinary: cloudinary)

You can also use the fill cropping mode together with faces gravity to correctly fill an image with your desired dimensions:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_100,h_150,c_fill,g_faces/couple.jpg

Ruby:

cl_image_tag("couple.jpg", :width=>100, :height=>150, :gravity=>"faces", :crop=>"fill")

PHP:

cl_image_tag("couple.jpg", array("width"=>100, "height"=>150, "gravity"=>"faces", "crop"=>"fill"))

Python:

CloudinaryImage("couple.jpg").image(width=100, height=150, gravity="faces", crop="fill")

Node.js:

cloudinary.image("couple.jpg", {width: 100, height: 150, gravity: "faces", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(100).height(150).gravity("faces").crop("fill")).imageTag("couple.jpg");

JS:

cloudinary.imageTag('couple.jpg', {width: 100, height: 150, gravity: "faces", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("couple.jpg", {width: 100, height: 150, gravity: "faces", crop: "fill"})

React:

<Image publicId="couple.jpg" >
  <Transformation width="100" height="150" gravity="faces" crop="fill" />
</Image>

Angular:

<cl-image public-id="couple.jpg" >
  <cl-transformation width="100" height="150" gravity="faces" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(150).Gravity("faces").Crop("fill")).BuildImageTag("couple.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(100).height(150).gravity("faces").crop("fill")).generate("couple.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(100).setHeight(150).setGravity("faces").setCrop("fill")).generate("couple.jpg")!, cloudinary: cloudinary)

60x150 filled to focus on all faces in the image

Position overlays on detected faces

To automatically position an overlay over the detected face(s) in an image, set the gravity parameter to one of the following values:

face - places an overlay over the single largest face in the image (g_face for URLs).
faces - places an overlay over each of the faces in the image (g_faces for URLs).

For example, adding an overlay of the golden_star image over both of the faces detected in the young_couples image, where each star is resized to the same width as the detected face with the region_relative flag:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/l_golden_star,g_faces,w_1.0,fl_region_relative/young_couple.jpg

Ruby:

cl_image_tag("young_couple.jpg", :overlay=>"golden_star", :gravity=>"faces", :width=>1.0, :flags=>"region_relative")

PHP:

cl_image_tag("young_couple.jpg", array("overlay"=>"golden_star", "gravity"=>"faces", "width"=>1.0, "flags"=>"region_relative"))

Python:

CloudinaryImage("young_couple.jpg").image(overlay="golden_star", gravity="faces", width=1.0, flags="region_relative")

Node.js:

cloudinary.image("young_couple.jpg", {overlay: "golden_star", gravity: "faces", width: "1.0", flags: "region_relative"})

Java:

cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("golden_star")).gravity("faces").width(1.0).flags("region_relative")).imageTag("young_couple.jpg");

JS:

cloudinary.imageTag('young_couple.jpg', {overlay: new cloudinary.Layer().publicId("golden_star"), gravity: "faces", width: "1.0", flags: "region_relative"}).toHtml();

jQuery:

$.cloudinary.image("young_couple.jpg", {overlay: new cloudinary.Layer().publicId("golden_star"), gravity: "faces", width: "1.0", flags: "region_relative"})

React:

<Image publicId="young_couple.jpg" >
  <Transformation overlay="golden_star" gravity="faces" width="1.0" flags="region_relative" />
</Image>

Angular:

<cl-image public-id="young_couple.jpg" >
  <cl-transformation overlay="golden_star" gravity="faces" width="1.0" flags="region_relative">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("golden_star")).Gravity("faces").Width(1.0).Flags("region_relative")).BuildImageTag("young_couple.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("golden_star")).gravity("faces").width(1.0).flags("region_relative")).generate("young_couple.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("golden_star").setGravity("faces").setWidth(1.0).setFlags("region_relative")).generate("young_couple.jpg")!, cloudinary: cloudinary)

Note

When gravity is set to one of the facial detection values and no face is detected in the image, then no overlay is placed at all.

Effects with face detection

To apply a blur or pixelation effect to the automatically detected faces in an image, use the effect parameter and set it to one of the following values:

blur_faces - Automatically blur all detected faces in the image: the strength of the blur effect is determined by an optional extra value (Range: 1 to 2000, Default: 500). For example, e_blur_faces:100 uses a mild blur effect with a strength of 100.
pixelate_faces - Automatically pixelate all detected faces in the image. The width of the pixelation squares is determined by an optional extra value (Range: 1 to 200, Default: 5). For example, e_pixelate_faces:3 uses pixelation squares 3 pixels wide.

For example, to automatically pixelate both of the faces detected in the young_couples image with pixelation squares 9 pixels wide:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_pixelate_faces:9/young_couple.jpg

Ruby:

cl_image_tag("young_couple.jpg", :effect=>"pixelate_faces:9")

PHP:

cl_image_tag("young_couple.jpg", array("effect"=>"pixelate_faces:9"))

Python:

CloudinaryImage("young_couple.jpg").image(effect="pixelate_faces:9")

Node.js:

cloudinary.image("young_couple.jpg", {effect: "pixelate_faces:9"})

Java:

cloudinary.url().transformation(new Transformation().effect("pixelate_faces:9")).imageTag("young_couple.jpg");

JS:

cloudinary.imageTag('young_couple.jpg', {effect: "pixelate_faces:9"}).toHtml();

jQuery:

$.cloudinary.image("young_couple.jpg", {effect: "pixelate_faces:9"})

React:

<Image publicId="young_couple.jpg" >
  <Transformation effect="pixelate_faces:9" />
</Image>

Angular:

<cl-image public-id="young_couple.jpg" >
  <cl-transformation effect="pixelate_faces:9">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate_faces:9")).BuildImageTag("young_couple.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("pixelate_faces:9")).generate("young_couple.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("pixelate_faces:9")).generate("young_couple.jpg")!, cloudinary: cloudinary)

Advanced facial attributes detection

With the Advanced Facial Attributes Detection add-on, you can extend the Cloudinary built-in features that involve semantic photo data extraction, image cropping and the positioning of image overlays. When using the add-on, your images are further processed and additional advanced face attributes are automatically extracted. Cloudinary can then use these additional details to smartly crop, position, rotate and overlay images according to the position of the detected faces or eyes.

The advanced facial detection is applied by setting the gravity parameter to one of the following values:

adv_face - detects the single largest face in the image (g_adv_face for URLs).
adv_faces - detects all of the faces in the image (g_adv_faces for URLs).
adv_eyes - detects all the pairs of eyes in the image (g_adv_eyes for URLs).

For example, to automatically overlay the image glasses over the detected eyes in the couples image. The glasses are resized to 170% the width of the detected eyes by adding the region_relative flag:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/fl_region_relative,g_adv_eyes,l_glasses,w_1.7/coupled.jpg

Ruby:

cl_image_tag("coupled.jpg", :flags=>"region_relative", :gravity=>"adv_eyes", :overlay=>"glasses", :width=>1.7)

PHP:

cl_image_tag("coupled.jpg", array("flags"=>"region_relative", "gravity"=>"adv_eyes", "overlay"=>"glasses", "width"=>1.7))

Python:

CloudinaryImage("coupled.jpg").image(flags="region_relative", gravity="adv_eyes", overlay="glasses", width=1.7)

Node.js:

cloudinary.image("coupled.jpg", {flags: "region_relative", gravity: "adv_eyes", overlay: "glasses", width: "1.7"})

Java:

cloudinary.url().transformation(new Transformation().flags("region_relative").gravity("adv_eyes").overlay(new Layer().publicId("glasses")).width(1.7)).imageTag("coupled.jpg");

JS:

cloudinary.imageTag('coupled.jpg', {flags: "region_relative", gravity: "adv_eyes", overlay: new cloudinary.Layer().publicId("glasses"), width: "1.7"}).toHtml();

jQuery:

$.cloudinary.image("coupled.jpg", {flags: "region_relative", gravity: "adv_eyes", overlay: new cloudinary.Layer().publicId("glasses"), width: "1.7"})

React:

<Image publicId="coupled.jpg" >
  <Transformation flags="region_relative" gravity="adv_eyes" overlay="glasses" width="1.7" />
</Image>

Angular:

<cl-image public-id="coupled.jpg" >
  <cl-transformation flags="region_relative" gravity="adv_eyes" overlay="glasses" width="1.7">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags("region_relative").Gravity("adv_eyes").Overlay(new Layer().PublicId("glasses")).Width(1.7)).BuildImageTag("coupled.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().flags("region_relative").gravity("adv_eyes").overlay(new Layer().publicId("glasses")).width(1.7)).generate("coupled.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags("region_relative").setGravity("adv_eyes").setOverlay("glasses").setWidth(1.7)).generate("coupled.jpg")!, cloudinary: cloudinary)

Automatically placed glasses on detected faces

See the Advanced Facial Attributes Detection documentation for more information and examples on using the add-on.

Zoom level

When using either the crop or thumb cropping modes and setting the gravity parameter to one of the face detection values, the resulting image is delivered at a default zoom level. To control how much of the original image surrounding the face to keep, use the zoom parameter (z for URLs). This parameter accepts a decimal value that sets the new zoom level as a multiplier of the default zoom setting: a value less than 1.0 zooms out and a value greater than 1.0 zooms in. For example, z_0.5 halves the default zoom to 50% and zooms out to include more of the background around the face, while z_2.0 doubles the default zoom to 200% and zooms in to include less of the background around the face.

Examples with the uploaded image called woman:

Original image (scaled down):

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/woman.jpg

Ruby:

cl_image_tag("woman.jpg")

PHP:

cl_image_tag("woman.jpg")

Python:

CloudinaryImage("woman.jpg").image()

Node.js:

cloudinary.image("woman.jpg")

Java:

cloudinary.url().imageTag("woman.jpg");

JS:

cloudinary.imageTag('woman.jpg').toHtml();

jQuery:

$.cloudinary.image("woman.jpg")

React:

<Image publicId="woman.jpg" >

</Image>

Angular:

<cl-image public-id="woman.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("woman.jpg")

Android:

MediaManager.get().url().generate("woman.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("woman.jpg")!, cloudinary: cloudinary)

Cropped with face detection and default zoom:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/g_face,c_crop/woman.jpg

Ruby:

cl_image_tag("woman.jpg", :gravity=>"face", :crop=>"crop")

PHP:

cl_image_tag("woman.jpg", array("gravity"=>"face", "crop"=>"crop"))

Python:

CloudinaryImage("woman.jpg").image(gravity="face", crop="crop")

Node.js:

cloudinary.image("woman.jpg", {gravity: "face", crop: "crop"})

Java:

cloudinary.url().transformation(new Transformation().gravity("face").crop("crop")).imageTag("woman.jpg");

JS:

cloudinary.imageTag('woman.jpg', {gravity: "face", crop: "crop"}).toHtml();

jQuery:

$.cloudinary.image("woman.jpg", {gravity: "face", crop: "crop"})

React:

<Image publicId="woman.jpg" >
  <Transformation gravity="face" crop="crop" />
</Image>

Angular:

<cl-image public-id="woman.jpg" >
  <cl-transformation gravity="face" crop="crop">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Crop("crop")).BuildImageTag("woman.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().gravity("face").crop("crop")).generate("woman.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)

Cropped with face detection and default zoom

Cropped with face detection and zoom set to 130%:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/g_face,c_crop,z_1.3/woman.jpg

Ruby:

cl_image_tag("woman.jpg", :gravity=>"face", :zoom=>1.3, :crop=>"crop")

PHP:

cl_image_tag("woman.jpg", array("gravity"=>"face", "zoom"=>1.3, "crop"=>"crop"))

Python:

CloudinaryImage("woman.jpg").image(gravity="face", zoom=1.3, crop="crop")

Node.js:

cloudinary.image("woman.jpg", {gravity: "face", zoom: "1.3", crop: "crop"})

Java:

cloudinary.url().transformation(new Transformation().gravity("face").zoom(1.3).crop("crop")).imageTag("woman.jpg");

JS:

cloudinary.imageTag('woman.jpg', {gravity: "face", zoom: "1.3", crop: "crop"}).toHtml();

jQuery:

$.cloudinary.image("woman.jpg", {gravity: "face", zoom: "1.3", crop: "crop"})

React:

<Image publicId="woman.jpg" >
  <Transformation gravity="face" zoom="1.3" crop="crop" />
</Image>

Angular:

<cl-image public-id="woman.jpg" >
  <cl-transformation gravity="face" zoom="1.3" crop="crop">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Zoom(1.3).Crop("crop")).BuildImageTag("woman.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().gravity("face").zoom(1.3).crop("crop")).generate("woman.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setZoom(1.3).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)

Cropped with face detection and zoom set to 120%

150x150 thumbnail with face detection and default zoom:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/g_face,c_thumb,w_150,h_150/woman.jpg

Ruby:

cl_image_tag("woman.jpg", :gravity=>"face", :width=>150, :height=>150, :crop=>"thumb")

PHP:

cl_image_tag("woman.jpg", array("gravity"=>"face", "width"=>150, "height"=>150, "crop"=>"thumb"))

Python:

CloudinaryImage("woman.jpg").image(gravity="face", width=150, height=150, crop="thumb")

Node.js:

cloudinary.image("woman.jpg", {gravity: "face", width: 150, height: 150, crop: "thumb"})

Java:

cloudinary.url().transformation(new Transformation().gravity("face").width(150).height(150).crop("thumb")).imageTag("woman.jpg");

JS:

cloudinary.imageTag('woman.jpg', {gravity: "face", width: 150, height: 150, crop: "thumb"}).toHtml();

jQuery:

$.cloudinary.image("woman.jpg", {gravity: "face", width: 150, height: 150, crop: "thumb"})

React:

<Image publicId="woman.jpg" >
  <Transformation gravity="face" width="150" height="150" crop="thumb" />
</Image>

Angular:

<cl-image public-id="woman.jpg" >
  <cl-transformation gravity="face" width="150" height="150" crop="thumb">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Width(150).Height(150).Crop("thumb")).BuildImageTag("woman.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().gravity("face").width(150).height(150).crop("thumb")).generate("woman.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setWidth(150).setHeight(150).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)

150x150 thumbnail with face detection and default zoom

150x150 thumbnail with face detection and zoom set to 70%:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/g_face,c_thumb,w_150,h_150,z_0.7/woman.jpg

Ruby:

cl_image_tag("woman.jpg", :gravity=>"face", :width=>150, :height=>150, :zoom=>0.7, :crop=>"thumb")

PHP:

cl_image_tag("woman.jpg", array("gravity"=>"face", "width"=>150, "height"=>150, "zoom"=>0.7, "crop"=>"thumb"))

Python:

CloudinaryImage("woman.jpg").image(gravity="face", width=150, height=150, zoom=0.7, crop="thumb")

Node.js:

cloudinary.image("woman.jpg", {gravity: "face", width: 150, height: 150, zoom: "0.7", crop: "thumb"})

Java:

cloudinary.url().transformation(new Transformation().gravity("face").width(150).height(150).zoom(0.7).crop("thumb")).imageTag("woman.jpg");

JS:

cloudinary.imageTag('woman.jpg', {gravity: "face", width: 150, height: 150, zoom: "0.7", crop: "thumb"}).toHtml();

jQuery:

$.cloudinary.image("woman.jpg", {gravity: "face", width: 150, height: 150, zoom: "0.7", crop: "thumb"})

React:

<Image publicId="woman.jpg" >
  <Transformation gravity="face" width="150" height="150" zoom="0.7" crop="thumb" />
</Image>

Angular:

<cl-image public-id="woman.jpg" >
  <cl-transformation gravity="face" width="150" height="150" zoom="0.7" crop="thumb">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Width(150).Height(150).Zoom(0.7).Crop("thumb")).BuildImageTag("woman.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().gravity("face").width(150).height(150).zoom(0.7).crop("thumb")).generate("woman.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setWidth(150).setHeight(150).setZoom(0.7).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)

For more examples on using the zoom parameter see the article on How to control the zoom level with automatic face detection based image cropping.

Image format support

Images can be uploaded to Cloudinary in various formats (input formats), and you can easily convert these images to other formats for displaying in your web site or application (output formats). Examples of situations where you might want to change the delivered image format:

Delivering JPEGs for photos that you want to load quickly (or WebP if your users are on a Chrome browser or on a mobile app you control).
Delivering a GIF if the image contains a drawing with only a few colors.
Delivering a PNG (24 bit) for high quality illustrations with a transparent background.
Delivering an image where the original format is not supported for delivery by the browser. For example, you could deliver a Photoshop (.psd) image as a JPG.

Tip

For image format optimization guidelines, see How to optimize image format.

The table below summarizes the supported format types.

Format	Extensions	Supported for Upload ^*	Supported for Transformations ^**
AI (Adobe Illustrator)	.ai	Yes	Yes
animated GIF	.gif	Yes	Yes
animated WebP	.webp	Yes	Yes
BMP (BitMaP image format)	.bmp	Yes	Yes
DjVu	.djvu	Yes	No
EPS (Encapsulated PostScript)	.ps, .ept, .eps, .eps3	Yes	Yes
FLIF (Free Lossless Image Format)	.flif	Yes	Yes
GIF (Graphics Interchange Format)	.gif	Yes	Yes
HEIF^***	.heif, .heic	Yes	No
ICO (ICOn image format)	.ico	Yes	Yes
JPEG (Joint Photographic Experts Group)	.jpg, .jpe, .jpeg	Yes	Yes
JPEG 2000 (JPEG 2000)	.jpc, .jp2, .j2k	Yes	Yes
JPEG XR (JPEG eXtended Range)	.wdp, .jxr, .hdp	Yes	Yes
PDF (Portable Document Format)	.pdf	Yes	Yes
PNG (Portable Network Graphics)	.png	Yes	Yes
PSD (PhotoShop Document)	.psd	Yes	Yes
Raw image files	.arw, .cr2	Yes	No
SVG (Scalable Vector Graphics)	.svg	Yes	Yes
TARGA (Truevision TGA)	.tga	Yes	Yes
TIFF (Tagged Image File Format)	.tif, .tiff	Yes	Yes
WebP	.webp	Yes	Yes

Footnotes

^* If a format is supported only for upload, then the delivery URL enables a user to download the original file in its original format, but you cannot apply transformation parameters.

^** If a format is supported for transformations, but the browser doesn't support displaying that format, you can either provide the transformation URL with the original format to enable users to download the file, or you can provide the URL with a different delivery format specified. In that case, Cloudinary applies the transformation to the original format and then converts the image to the requested format for delivery. For example, you could provide a transformation URL for a PhotoShop (.psd) image stored in your account and specify jpg as the delivery format to display the resulting transformation in the browser.

^*** Only iOS-generated heic brand files.

To deliver images in a different format simply specify the new format as the file extension of the delivery URL. When using our SDKs you can either specify the new format as an extension to the resource name or use the format parameter.

For example, to display a GIF version of the uploaded sample JPEG file:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/sample.gif

Ruby:

cl_image_tag("sample.gif")

PHP:

cl_image_tag("sample.gif")

Python:

CloudinaryImage("sample.gif").image()

Node.js:

cloudinary.image("sample.gif")

Java:

cloudinary.url().imageTag("sample.gif");

JS:

cloudinary.imageTag('sample.gif').toHtml();

jQuery:

$.cloudinary.image("sample.gif")

React:

<Image publicId="sample.gif" >

</Image>

Angular:

<cl-image public-id="sample.gif" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("sample.gif")

Android:

MediaManager.get().url().generate("sample.gif");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("sample.gif")!, cloudinary: cloudinary)

You can easily combine other image transformations with format conversion. Just make sure the format you use is supported for transformations, as per the table above. For example, to deliver a scaled down 150x100 GIF version of the sample image:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_150,h_100,c_scale/sample.gif

Ruby:

cl_image_tag("sample.gif", :width=>150, :height=>100, :crop=>"scale")

PHP:

cl_image_tag("sample.gif", array("width"=>150, "height"=>100, "crop"=>"scale"))

Python:

CloudinaryImage("sample.gif").image(width=150, height=100, crop="scale")

Node.js:

cloudinary.image("sample.gif", {width: 150, height: 100, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(150).height(100).crop("scale")).imageTag("sample.gif");

JS:

cloudinary.imageTag('sample.gif', {width: 150, height: 100, crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.gif", {width: 150, height: 100, crop: "scale"})

React:

<Image publicId="sample.gif" >
  <Transformation width="150" height="100" crop="scale" />
</Image>

Angular:

<cl-image public-id="sample.gif" >
  <cl-transformation width="150" height="100" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Crop("scale")).BuildImageTag("sample.gif")

Android:

MediaManager.get().url().transformation(new Transformation().width(150).height(100).crop("scale")).generate("sample.gif");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setCrop("scale")).generate("sample.gif")!, cloudinary: cloudinary)

Note

If the file extension is omitted from the delivery URL then the file is delivered in the originally uploaded format.

Fetch format

Another option for changing the format is to explicitly call the fetch_format parameter (f in URLs). This can be useful in situations where you cannot change the file extension, for example, when fetching remote images that already have a different file extension (format) as part of their URLs.

For example, to fetch a remote image from Wikimedia in JPEG format, and deliver the image in PNG format (also scaled down to a width of 400 pixels):

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/fetch/w_400,f_png/https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg

Ruby:

cl_image_tag("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg", :width=>400, :crop=>"scale", :format=>"png", :type=>"fetch")

PHP:

cl_image_tag("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg", array("width"=>400, "crop"=>"scale", "format"=>"png", "type"=>"fetch"))

Python:

CloudinaryImage("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg").image(width=400, crop="scale", format="png", type="fetch")

Node.js:

cloudinary.image("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg", {width: 400, crop: "scale", format: "png", type: "fetch"})

Java:

cloudinary.url().transformation(new Transformation().width(400).crop("scale")).format("png").type("fetch").imageTag("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg");

JS:

cloudinary.imageTag('https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg', {width: 400, crop: "scale", format: "png", type: "fetch"}).toHtml();

jQuery:

$.cloudinary.image("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg", {width: 400, crop: "scale", format: "png", type: "fetch"})

React:

<Image publicId="https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg" format="png" type="fetch">
  <Transformation width="400" crop="scale" />
</Image>

Angular:

<cl-image public-id="https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg" format="png" type="fetch">
  <cl-transformation width="400" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Crop("scale")).Format("png").Type("fetch").BuildImageTag("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(400).crop("scale")).format("png").type("fetch").generate("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setFormat("png").setType( "fetch").setTransformation(CLDTransformation().setWidth(400).setCrop("scale")).generate("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg")!, cloudinary: cloudinary)

Jennifer Lawrence fetched from Wikimedia and delivered as a PNG

Automatic format selection

You can also use the fetch_format feature to save bandwidth and optimize delivery time by automatically delivering images as WebP to Chrome browsers or JPEG-XR to Internet Explorer browsers. Simply set the value to auto and the best format will be delivered to the supported browser. If a browser does not support either of these formats then the image is delivered in the format specified by the file extension.

For example, the uploaded jpg image named sample scaled down to a width of 500 pixels and delivered as WebP to Chrome browsers (22.4 KB), JPEG-XR to Internet Explorer browsers (48 KB), or as a regular JPEG (57.5 KB) to browsers that support neither format:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_500,f_auto/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>500, :fetch_format=>:auto, :crop=>"scale")

PHP:

cl_image_tag("sample.jpg", array("width"=>500, "fetch_format"=>"auto", "crop"=>"scale"))

Python:

CloudinaryImage("sample.jpg").image(width=500, fetch_format="auto", crop="scale")

Node.js:

cloudinary.image("sample.jpg", {width: 500, fetch_format: "auto", crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(500).fetchFormat("auto").crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 500, fetchFormat: "auto", crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 500, fetch_format: "auto", crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="500" fetchFormat="auto" crop="scale" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="500" fetch-format="auto" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).FetchFormat("auto").Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(500).fetchFormat("auto").crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setFetchFormat("auto").setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

Notes

When automatic format (f_auto) is used together with automatic quality (q_auto), the PNG format may be selected when the automatic quality algorithm decides that it better fits the specific image. This allows delivering better looking and economical image files.
When f_auto is used together with q_auto for JPEG images and the automatic quality algorithm decides that no chroma subsampling should be performed, the JPEG format is selected instead of WebP. This behavior is needed because the lossy WebP format always performs chroma subsampling, which might result in a lower visual quality for some images.
Setting the any_format flag together with automatic quality (q_auto,fl_any_format) but without setting f_auto, will also allow switching to PNG8 encoding if the quality algorithm decides that it's more efficient.
If f_auto is used to deliver an image that contains transparency, and the requesting browser does not support WebP or JPEG-XR, then the image is delivered in PNG format instead of the JPEG format.

Adjusting image quality

Control the visual quality and compression level of JPEG, JPEG 2000, JPEG XR, WebP and GIF images with the quality parameter (q in URLs). This parameter represents the compression level to apply to an image as a value between 1 (smallest file size possible) and 100 (best visual quality). Reducing the quality is a tradeoff between visual quality and file size: the lower the quality value, the more the file is compressed to a smaller file size, the more data is lost in the process, and the result is a loss of visual quality. The loss of visual quality is barely noticeable to the human eye at the higher quality levels, and final visual quality also depends on other factors such as the size of the image and the resolution of the user's monitor or mobile screen.

For example, reducing the quality of the uploaded JPEG image named sample to 60 results in a file size of 73 KB compared to the original file size of 245 KB with a barely noticeable reduction in visual quality:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

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

Ruby:

cl_image_tag("sample.jpg", :quality=>60)

PHP:

cl_image_tag("sample.jpg", array("quality"=>60))

Python:

CloudinaryImage("sample.jpg").image(quality=60)

Node.js:

cloudinary.image("sample.jpg", {quality: 60})

Java:

cloudinary.url().transformation(new Transformation().quality(60)).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {quality: 60}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {quality: 60})

React:

<Image publicId="sample.jpg" >
  <Transformation quality="60" />
</Image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation quality="60">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(60)).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().quality(60)).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(60)).generate("sample.jpg")!, cloudinary: cloudinary)

The quality parameter is also automatically applied when delivering images with any other transformation applied. That is, unless the original uploaded image is requested, then a default quality value of 80 is also automatically applied to the transformed image.

Notes

Images in the WebP format are lossless when specifying a quality of 100, and lossy when specifying a quality less than 100. See the How to support WebP images, save bandwidth and improve user experience article for more information on the WebP format.
Images in the WebP format are lossless if the quality isn't specified and the original image's format is lossless (e.g., PNG).
Animated GIFs ignore the quality setting unless the lossy flag is added. See the Lossy compression for optimizing animated GIFs article for more information.
The JPEGmini add-on automatically applies the best compression possible to JPEG images while maintaining a high visual quality.

Automatic quality and encoding settings

Cloudinary's intelligent quality and encoding algorithm analyzes an image to find the best quality compression level and optimal encoding settings based on the image content and the viewing browser, in order to produce an image with good visual quality while minimizing the file size. Cloudinary automates the file size versus quality trade-off decision, on the fly, by using perceptual metrics and heuristics that tune the quality settings based on the specific image content and format. Analyzing every image individually to find the optimal compression level and image encoding settings allows for precise adjustment of the compression level complemented by fine tuning of the encoding settings, and can significantly reduce the file size without any degradation noticeable to the human eye.

The quality transformation parameter can be set to auto (q_auto in URLs) in order to perform automatic quality selection and image encoding adjustments. Further control of the automatic quality selection is supported as follows:

q_auto - The optimal balance between file size and visual quality. By default, this is the same as q_auto:good, while it can automatically switch to the more aggressive q_auto:eco mode (see the note on Save-data support below).
q_auto:best - Less aggressive algorithm. Generates bigger files with potentially better visual quality. Example of a target audience: photography sites that display images with a high visual quality.
q_auto:good - Ensuring a relatively small file size with good visual quality.
q_auto:eco - More aggressive algorithm, which results in smaller files of slightly lower visual quality. Example of a target audience: popular sites and social networks with a huge amount of traffic.
q_auto:low - Most aggressive algorithm, which results in the smallest files of low visual quality. Example of a target audience: sites using thumbnail images that link to higher quality images.

Examples of the resulting file size when encoding a photograph, using various regular and automatic quality parameter values:

Original (569KB)

q_80 (80.3KB)

q_auto:best (65.9KB)

q_auto:good (56.9KB)

q_auto:eco (45.0KB)

q_auto:low (35.0KB)

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/q_auto/woman.jpg

Ruby:

cl_image_tag("woman.jpg", :quality=>"auto")

PHP:

cl_image_tag("woman.jpg", array("quality"=>"auto"))

Python:

CloudinaryImage("woman.jpg").image(quality="auto")

Node.js:

cloudinary.image("woman.jpg", {quality: "auto"})

Java:

cloudinary.url().transformation(new Transformation().quality("auto")).imageTag("woman.jpg");

JS:

cloudinary.imageTag('woman.jpg', {quality: "auto"}).toHtml();

jQuery:

$.cloudinary.image("woman.jpg", {quality: "auto"})

React:

<Image publicId="woman.jpg" >
  <Transformation quality="auto" />
</Image>

Angular:

<cl-image public-id="woman.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto")).BuildImageTag("woman.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().quality("auto")).generate("woman.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto")).generate("woman.jpg")!, cloudinary: cloudinary)

Examples of the resulting file size when encoding a drawing, using regular and automatic quality values:

Original (296KB)

q_80 (223KB)

q_auto:best (226KB)

q_auto:good (156KB)

q_auto:eco (97.5KB)

q_auto:low (87.5KB)

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/q_auto/robot.jpg

Ruby:

cl_image_tag("robot.jpg", :quality=>"auto")

PHP:

cl_image_tag("robot.jpg", array("quality"=>"auto"))

Python:

CloudinaryImage("robot.jpg").image(quality="auto")

Node.js:

cloudinary.image("robot.jpg", {quality: "auto"})

Java:

cloudinary.url().transformation(new Transformation().quality("auto")).imageTag("robot.jpg");

JS:

cloudinary.imageTag('robot.jpg', {quality: "auto"}).toHtml();

jQuery:

$.cloudinary.image("robot.jpg", {quality: "auto"})

React:

<Image publicId="robot.jpg" >
  <Transformation quality="auto" />
</Image>

Angular:

<cl-image public-id="robot.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto")).BuildImageTag("robot.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().quality("auto")).generate("robot.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto")).generate("robot.jpg")!, cloudinary: cloudinary)

Notes

q_auto cannot be used within named transformations, however q_auto:[Mode] (e.g., q_auto:good) is supported within named transformations.
Save-Data support is a feature included in the Client-Hints standard, which is already supported by Chrome and Opera browsers. The browsers send a special request header named 'Save-Data' if the user has enabled data saving mode. When q_auto is specified and the 'Save-Data: on' header reaches the CDN layer of Cloudinary, image compression and encoding will automatically switch to the eco mode (q_auto:eco) instead of the default good quality mode (q_auto:good).
Override automatic quality: you can override the automatic quality algorithm and set a fixed quality value for a specific image in the media library.

Toggling chroma subsampling

Chroma subsampling is a method of encoding images by implementing less resolution for chroma information (colors) than for luma information (luminance), taking advantage of the human visual system's lower acuity for color differences than for luminance. To override the default behavior of whether to perform chroma subsampling, a separate value can be added to the quality parameter as follows:

444 can be added to prevent subsampling. For example: q_80:444
420 can be added to force subsampling. For example: q_95:420.

Note

Chroma subsampling is not performed on images that include a text overlay unless specifically requested.

Modify image shape and style

Cloudinary supports various transformations for modifying the shape and style of images. This section contains information on the following topics:

Round corners and create circular images.
Rotate an image.
Control the image opacity.
Add borders to images.
Set the background color.

Rounding corners and creating circular images

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 Angular .Net Android iOS All

URL:

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

Ruby:

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

PHP:

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

Python:

CloudinaryImage("Pi.png").image(width=150, height=100, radius="25:0", crop="fill")

Node.js:

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

Java:

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

JS:

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

jQuery:

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

React:

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

Angular:

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

.Net:

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

Android:

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

iOS:

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

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 Angular .Net Android iOS All

URL:

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

Ruby:

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

PHP:

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

Python:

CloudinaryImage("pi.png").image(width=250, height=150, radius="max", crop="fill")

Node.js:

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

Java:

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

JS:

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

jQuery:

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

React:

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

Angular:

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

.Net:

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

Android:

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

iOS:

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

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 Angular .Net Android iOS All

URL:

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

Ruby:

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

PHP:

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

Python:

CloudinaryImage("face_left.png").image(width=200, height=200, gravity="face", radius="max", crop="thumb")

Node.js:

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

Java:

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

JS:

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

jQuery:

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

React:

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

Angular:

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

.Net:

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

Android:

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

iOS:

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

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 Angular .Net Android iOS All

URL:

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

Ruby:

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

PHP:

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

Python:

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

Node.js:

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

Java:

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

JS:

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

jQuery:

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

React:

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

Angular:

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

.Net:

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

Android:

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

iOS:

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

Rotating images

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.

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 Angular .Net Android iOS All

URL:

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

Ruby:

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

PHP:

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

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>

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")

Android:

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

iOS:

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

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

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

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

Ruby:

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

PHP:

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

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>

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")

Android:

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

iOS:

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

Image rotated 20 degrees counterclockwise

Vertically mirror flip the image and rotate by 70 degrees (automatically adds a bounding box):
URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All
URL:
https://res.cloudinary.com/demo/image/upload/w_100/a_vflip.45/sample.jpg
Ruby:
cl_image_tag("sample.jpg", :transformation=>[ {:width=>100,