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.

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

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

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

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

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

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

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

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

<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>

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

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

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.

Watch the Transformation Basics video tutorial to see how these dynamic transformation URLs work.

The Image Transformations Reference table summarizes the extensive list of parameters available for manipulating images.

Cloudinary's client libraries (SDKs) take care of the transformation URL building for you, and simplify the integration even further. They allow you to continue working in your preferred developer framework and provide helper methods to simplify building image tags and image transformation URLs: Rails, PHP, Django, JavaScript, jQuery, Node.js, .NET, Java, Angular, Javascript, React, iOS, Scala and Android.

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 resource delivery URL takes the following structure:

https://res.cloudinary.com/<cloud_name>/<resource_type>/<type>/<version>/<transformations>/<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).
• 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.
• 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.
• 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:

cl_image_tag("sample.jpg")

cl_image_tag("sample.jpg")

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

cloudinary.image("sample.jpg")

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

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

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

<Image publicId="sample.jpg" >

</Image>

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

</cl-image>

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

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

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 image delivery URL with transformation parameters takes the following structure:

https://res.cloudinary.com/<cloud name>/image/upload/<transformation parameters>/<public ID>.<image format file extension>

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:

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

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

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

</Image>

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

</cl-image>

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

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

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:

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

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

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

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

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

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

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":

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

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

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

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

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

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

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

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

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

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"}])

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:

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

   URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll

   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)

   

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

   URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll

   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)

   

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

   URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll

   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.

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:

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

   URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll

   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)

   

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

   URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll

   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)

   

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

   URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll

   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:

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

   URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll

   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)

   

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

   URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll

   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)

   

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:

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

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

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

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

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

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

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

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.

cl_image_tag("brown_sheep.jpg")

cl_image_tag("brown_sheep.jpg")

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

cloudinary.image("brown_sheep.jpg")

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

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

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

<Image publicId="brown_sheep.jpg" >

</Image>

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

</cl-image>

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

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

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:

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

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