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

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

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

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

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

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

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

Cloudinary allows you to easily transform your images on-the-fly to any required format, style and dimension, and also optimizes images to have the minimal file size for an improved user experience and for saving bandwidth. Doing so is done by implementing dynamic image transformation and delivery URLs for accessing the images. You can change the required transformations at any time and all transformed images will be 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 the way to crop the image, and select the image format that fits your needs. You can also use our face detection based cropping techniques for focusing on the most relevant part of user 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.

Cloudinary's image management service supports the following image transformation and delivery capabilities:

• Deliver images using dynamic Cloudinary URLs.
• Embed images in web pages.
• Resize image dimensions and crop to match your graphic design.
• Detect faces in images for automatic cropping, resizing, overlay placement and using visual effects.
• Convert between image formats.
• Adjust image quality.
• Modify the image shape and style.
• Apply effects to images.
• Add image and text overlays.
• Chain transformations together.
• Name custom transformations.
• Optimize images.
• Use responsive images.
• Fetch images from remote locations.
• Use advanced URL delivery options.
• Create images from PDF files.
• Manage animated GIFs.
• Add flags to control transformation behavior.
• Apply transformations only if a specified condition is met.

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, jQuery, Node.js, .NET, Java, Angular, Javascript, iOS, Scala and Android.

Delivering images using dynamic URLs

Accessing images 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 image plus any optional transformation parameters. Public ID is the unique identifier of the image and is either specified when uploading the image 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:

http://res.cloudinary.com/<cloud_name>/<resource_type>/<type>/<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 is the type of file to deliver. Valid values: image, raw, and video (note that there are other valid values when fetching remote images: see Fetching images from remote locations for more information).
• type - the level of accessibility of the file to deliver. Valid values: upload, private and authenticated.
• version - (optional) can be added to the delivery URL in order 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). The version component is generally not included in the example URLs on this page in order to keep them simple. See Image versions for more information.
• 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. The resource is delivered in the original uploaded format if the file extension is not included.

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

http://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.image("sample.jpg")

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

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:

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

Following is 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.image("sample.jpg", {width: 300, height: 200, crop: "crop"})

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

You can also use shortcut URLs for specifically delivering uploaded images. 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:

http://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 Transformations Reference table for an overview on the extensive list of possible parameters and their values.

Secure HTTPS URLs

Cloudinary supports delivering images 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.image("sample.jpg", {secure: true})

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

For more information on using HTTPS to deliver your images, 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", :secure=>true)

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

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

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

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

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

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(100).Crop("scale")).Secure(true).BuildUrl("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", :secure=>true)

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

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

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

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

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

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

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

Notes:

• Specifying the width and height parameters without a crop mode will add them as parameters of the HTML img tag, and specifying the width and height parameters with a crop mode will add them as transformation parameters to the image source URL. In this case you can use the html_width and html_height parameters if you need different dimensions for the HTML img tag.
• Using a full URL (e.g., http://res.cloudinary.com/demo/image/upload/sample.jpg) instead of only the public ID (e.g., sample.jpg) in the first parameter of the helper methods will result in all other parameters of the helper method being ignored and only using the full URL as the final generated URL.

For more information on these helper methods, see the documentation for the relevant framework: Ruby on Rails, PHP, Django, Node.js, Java, .NET, Angular, Javascript, 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 oh or ow as values sets the dimension to the original height or original width respectively. For example, w_ow sets the width to the same value as the original width. 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.jsJavajQuery.NetAll

   URL:

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

   Ruby:

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

   PHP:

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

   Python:

   CloudinaryImage("sample.jpg").image(width=0.5)

   Node.js:

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

   Java:

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

   jQuery:

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

   .Net:

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

   

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

   URLRubyPHPPythonNode.jsJavajQuery.NetAll

   URL:

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

   Ruby:

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

   PHP:

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

   Python:

   CloudinaryImage("sample.jpg").image(height=200)

   Node.js:

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

   Java:

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

   jQuery:

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

   .Net:

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

   

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

   URLRubyPHPPythonNode.jsJavajQuery.NetAll

   URL:

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

   Ruby:

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

   PHP:

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

   Python:

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

   Node.js:

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

   Java:

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

   jQuery:

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

   .Net:

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

   

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.

Note: 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.

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.jsJavajQuery.NetAll

   URL:

   http://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")

   jQuery:

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

   .Net:

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

   

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

   URLRubyPHPPythonNode.jsJavajQuery.NetAll

   URL:

   http://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")

   jQuery:

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

   .Net:

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

   

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

   URLRubyPHPPythonNode.jsJavajQuery.NetAll

   URL:

   http://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")

   jQuery:

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

   .Net:

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

   

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.image("sample.jpg", {width: 250, height: 250, crop: "fit"})

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

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.image("sample.jpg", {width: 250, height: 250, crop: "limit"})

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

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.image("sample.jpg", {width: 250, height: 250, crop: "mfit"})

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

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.jsJavajQuery.NetAll

   URL:

   http://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")

   jQuery:

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

   .Net:

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

   

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

   URLRubyPHPPythonNode.jsJavajQuery.NetAll

   URL:

   http://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")

   jQuery:

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

   .Net:

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

   

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.image("sample.jpg", {width: 150, height: 200, crop: "lfill"})

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

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.image("sample.jpg", {width: 250, height: 250, background: "black", crop: "pad"})

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

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.image("sample.jpg", {width: 400, height: 150, background: "green", crop: "lpad"})

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

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.image("sample.jpg", {width: 250, height: 250, crop: "mpad"})

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

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.image("sample.jpg", {width: 200, height: 150, gravity: "north_west", crop: "crop"})

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

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.image("brown_sheep.jpg")

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

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

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:

cl_image_tag("family_bench.jpg")

cl_image_tag("family_bench.jpg")

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

cloudinary.image("family_bench.jpg")

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

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

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

Image with Imagga cropping:

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

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

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

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

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

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

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

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:
  URLRubyPHPPythonNode.jsJavajQuery.NetAll

  URL:

  http://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")

  jQuery:

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

  .Net:

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

  
• Filled to an aspect ratio of 16:9:
  URLRubyPHPPythonNode.jsJavajQuery.NetAll

  URL:

  http://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")

  jQuery:

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

  .Net:

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

  
• Filled to a width of 400 pixels with an aspect ratio of 4:3:
  URLRubyPHPPythonNode.jsJavajQuery.NetAll

  URL:

  http://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")

  jQuery:

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

  .Net:

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

  

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:
  URLRubyPHPPythonNode.jsJavajQuery.NetAll

  URL:

  http://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")

  jQuery:

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

  .Net:

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

  
• With gravity set to north:
  URLRubyPHPPythonNode.jsJavajQuery.NetAll

  URL:

  http://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")

  jQuery:

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

  .Net:

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

  
• With gravity set to south_east:
  URLRubyPHPPythonNode.jsJavajQuery.NetAll

  URL:

  http://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")

  jQuery:

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

  .Net:

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

  

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 faces are detected or previously specified.
• faces - Same as face gravity, but detects all the faces in an image and makes them 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 faces are detected or previously 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.
• 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 (note that 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
c_thumb,g_auto:0
Automatic thumbnail -
most aggressive

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:

cl_image_tag("butterfly.jpg")

cl_image_tag("butterfly.jpg")

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

cloudinary.image("butterfly.jpg")

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

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

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

cl_image_tag("couple.jpg")

cl_image_tag("couple.jpg")

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

cloudinary.image("couple.jpg")

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

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

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

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:

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

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

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

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

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

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