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.

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.

For example, you can resize and crop images, deliver them using 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.

This page teaches you how Cloudinary transformations work and provides detailed descriptions and use‑case examples for commonly-used transformations.

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

<cld-image publicId="lady.jpg" >
  <cld-transformation width="400" height="400" gravity="face" radius="max" crop="crop" />
  <cld-transformation width="200" crop="scale" />
</cld-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'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, Vue.js, iOS, Scala and Android.

Transforming media assets using dynamic URLs

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

The Cloudinary asset delivery URL takes the following structure:

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

Where:

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

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

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

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

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>

<cld-image publicId="sample.jpg" >

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

<cld-image publicId="sample.jpg" >
  <cld-transformation width="300" height="200" crop="crop" />
</cld-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 describes the various types of available transformation and delivery options, including many detailed use-case examples. See the Image Transformation Reference table and Video Transformation Reference for the complete list of available transformation parameters and syntax.

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>

<cld-image publicId="sample.jpg" secure="true">

</cld-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.

Delivery types

The delivery type element of the URL provides an indication about the way the asset will be delivered, although in most cases, the delivery type value is determined at the time that the asset is stored in your account.

The following delivery type values are supported:

Delivering optimized and responsive media assets

In addition to changing the appearance of your media assets by transforming them, you can also use Cloudinary URLs and a variety of parameters to control how they are delivered:

• Optimizations - Deliver your media assets with the smallest possible file size while maintaining visual quality, saving bandwidth and improving performance for your website.
• Responsive images - Deliver your images to perfectly fit any device, window size, orientation, or resolution at any pixel density (DPR). Upload a single high resolution image and let Cloudinary automatically transform it.
• Remotely fetched media - Grab media assets from anywhere on the web, including support for on-the-fly manipulation and optimized delivery via a CDN.
• Paged and layered media - Deliver content from assets with multiple pages or layers such as PDFs or Photoshop files, including options for delivering or transforming only selected pages or layers.
• Access control - Control who can access your media, both the originals and transformed assets.

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

<cld-image publicId="sample.jpg" >
  <cld-transformation width="300" height="100" crop="scale" />
</cld-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>

js
<CLDImage publicId="sample.jpg" >
  <CLDTransformation alt="A sample photo" className="Samples" />
</CLDImage>

<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, Vue.js, iOS, Scala and Android.

Image format support

Images can be uploaded to Cloudinary in various formats (input formats), and you can easily convert these images to other formats for displaying in your web site or application (output formats). Examples of situations where you might want to change the delivered image format:

• Delivering JPEGs for photos that you want to load quickly (or WebP if your users are on a Chrome browser or on a mobile app you control).
• Delivering a GIF if the image contains a drawing with only a few colors.
• Delivering a PNG (24 bit) for high quality illustrations with a transparent background.
• Delivering an image where the original format is not supported for delivery by the browser. For example, you could deliver a Photoshop (.psd) image as a JPG.

To deliver images in a different format simply specify the new format as the file extension of the delivery URL. When using our SDKs you can either specify the new format as an extension to the resource name or use the format parameter.

For example, to display a GIF version of the uploaded sample JPEG file:

cl_image_tag("sample.gif")

cl_image_tag("sample.gif")

CloudinaryImage("sample.gif").image()

cloudinary.image("sample.gif")

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

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

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

<Image publicId="sample.gif" >

</Image>

<cld-image publicId="sample.gif" >

</cld-image>

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

</cl-image>

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

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

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

You can easily combine other image transformations with format conversion. Just make sure the format you use is supported for transformations, as per the table above. For example, to deliver a scaled down 150x100 GIF version of the sample image:

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

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

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

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

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

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

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

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

<cld-image publicId="sample.gif" >
  <cld-transformation width="150" height="100" crop="scale" />
</cld-image>

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

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

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

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

Supported image formats

The table below summarizes the supported format types.

Fetch format

Another option for changing the format is to explicitly call the fetch_format parameter (f in URLs). This can be useful in situations where you cannot change the file extension, for example, when fetching remote images that already have a different file extension (format) as part of their URLs.

For example, to fetch a remote image from Wikimedia in JPEG format, and deliver the image in PNG format (also scaled down to a width of 400 pixels):

cl_image_tag("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg", :width=>400, :crop=>"scale", :format=>"png", :type=>"fetch")

cl_image_tag("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg", array("width"=>400, "crop"=>"scale", "format"=>"png", "type"=>"fetch"))

CloudinaryImage("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg").image(width=400, crop="scale", format="png", type="fetch")

cloudinary.image("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg", {width: 400, crop: "scale", format: "png", type: "fetch"})

cloudinary.url().transformation(new Transformation().width(400).crop("scale")).format("png").type("fetch").imageTag("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg");

cloudinary.imageTag('https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg', {width: 400, crop: "scale", format: "png", type: "fetch"}).toHtml();

$.cloudinary.image("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg", {width: 400, crop: "scale", format: "png", type: "fetch"})

<Image publicId="https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg" format="png" type="fetch">
  <Transformation width="400" crop="scale" />
</Image>

<cld-image publicId="https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg" format="png" type="fetch">
  <cld-transformation width="400" crop="scale" />
</cld-image>

<cl-image public-id="https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg" format="png" type="fetch">
  <cl-transformation width="400" crop="scale">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Crop("scale")).Format("png").Type("fetch").BuildImageTag("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg")

MediaManager.get().url().transformation(new Transformation().width(400).crop("scale")).format("png").type("fetch").generate("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg");

imageView.cldSetImage(cloudinary.createUrl().setFormat("png").setType( "fetch").setTransformation(CLDTransformation().setWidth(400).setCrop("scale")).generate("https://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg")!, cloudinary: cloudinary)

Automatic format selection

You can also use the fetch_format feature to save bandwidth and optimize delivery time by automatically delivering images as WebP to Chrome browsers or JPEG-XR to Internet Explorer browsers. Simply set the value to auto and the best format will be delivered to the supported browser. If a browser does not support either of these formats then the image is delivered in the format specified by the file extension.

For example, the uploaded jpg image named sample scaled down to a width of 500 pixels and delivered as WebP to Chrome browsers (22.4 KB), JPEG-XR to Internet Explorer browsers (48 KB), or as a regular JPEG (57.5 KB) to browsers that support neither format:

cl_image_tag("sample.jpg", :width=>500, :fetch_format=>:auto, :crop=>"scale")

cl_image_tag("sample.jpg", array("width"=>500, "fetch_format"=>"auto", "crop"=>"scale"))

CloudinaryImage("sample.jpg").image(width=500, fetch_format="auto", crop="scale")

cloudinary.image("sample.jpg", {width: 500, fetch_format: "auto", crop: "scale"})

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

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

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

<Image publicId="sample.jpg" >
  <Transformation width="500" fetchFormat="auto" crop="scale" />
</Image>

<cld-image publicId="sample.jpg" >
  <cld-transformation width="500" fetchFormat="auto" crop="scale" />
</cld-image>

<cl-image public-id="sample.jpg" >
  <cl-transformation width="500" fetch-format="auto" crop="scale">
  </cl-transformation>
</cl-image>

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

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

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

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.jsJavaJSjQueryReactVue.jsAngular.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>

   Vue.js:

   <cld-image publicId="sample.jpg" >
     <cld-transformation width="0.5" crop="scale" />
   </cld-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.jsJavaJSjQueryReactVue.jsAngular.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>

   Vue.js:

   <cld-image publicId="sample.jpg" >
     <cld-transformation height="200" crop="scale" />
   </cld-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.jsJavaJSjQueryReactVue.jsAngular.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>

   Vue.js:

   <cld-image publicId="sample.jpg" >
     <cld-transformation width="200" height="100" crop="scale" />
   </cld-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).

Examples of scaling the uploaded image named sample:

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

   URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.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>

   Vue.js:

   <cld-image publicId="sample.jpg" >
     <cld-transformation width="150" crop="scale" />
   </cld-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.jsJavaJSjQueryReactVue.jsAngular.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>

   Vue.js:

   <cld-image publicId="sample.jpg" >
     <cld-transformation width="150" height="150" crop="scale" />
   </cld-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.jsJavaJSjQueryReactVue.jsAngular.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>

   Vue.js:

   <cld-image publicId="sample.jpg" >
     <cld-transformation width="0.25" crop="scale" />
   </cld-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>

<cld-image publicId="sample.jpg" >
  <cld-transformation width="250" height="250" crop="fit" />
</cld-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>

<cld-image publicId="sample.jpg" >
  <cld-transformation width="250" height="250" crop="limit" />
</cld-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>

<cld-image publicId="sample.jpg" >
  <cld-transformation width="250" height="250" crop="mfit" />
</cld-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 without distoring the image. This option first scales up or down as much as needed to at least fill both of the given dimensions. If the requested aspect ratio is different than the original, cropping will occur on the dimension that exceeds the requested size after scaling. You can specify which part of the original image you want to keep if cropping occurs 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:

   URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.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>

   Vue.js:

   <cld-image publicId="sample.jpg" >
     <cld-transformation width="250" height="250" crop="fill" />
   </cld-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.jsJavaJSjQueryReactVue.jsAngular.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>

   Vue.js:

   <cld-image publicId="sample.jpg" >
     <cld-transformation width="250" height="250" gravity="east" crop="fill" />
   </cld-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 specified resolution limits, in which case the image is scaled down to fill the given width and height without distoring the image, and then the dimension that exceeds the request is cropped. If the original dimensions are smaller than the requested size, it is not resized at all. This prevents upscaling. You can specify which part of the original image you want to keep if cropping occurs using the gravity parameter (set to center by default).

For example, the uploaded image named sample limit filled to a width of 150 pixels and a height of 200 pixels 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>

<cld-image publicId="sample.jpg" >
  <cld-transformation width="150" height="200" crop="lfill" />
</cld-image>