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.

Delivering media assets using dynamic URLs

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

The Cloudinary asset delivery URL takes the following structure:

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

Where:

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

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

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

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

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 documents the various transformation and delivery options, and you can also see the Image Transformation Reference table and Video Transformation Reference for the extensive list of available transformation parameters and their values.

Secure HTTPS URLs

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

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

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

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

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

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

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

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

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

</Image>

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

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.

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>

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

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

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

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

pad

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

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

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

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

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

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

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

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

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

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

<cld-image publicId="sample.jpg" >
  <cld-transformation width="250" height="250" background="black" crop="pad" />
</cld-image>

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

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

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

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

lpad (limit pad)

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

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

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

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

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

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

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

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

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

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

<cld-image publicId="sample.jpg" >
  <cld-transformation width="400" height="150" background="green" crop="lpad" />
</cld-image>

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

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

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

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

mpad (minimum pad)

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

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