Responsive design and art direction generally requires displaying images and videos at a variety of sizes, often much smaller than the original.
If you deliver full size assets and rely on browser-side resizing (using CSS or HTML width and height attributes), users are forced to download unnecessarily large images and videos. Therefore, assets should always be delivered from the server at their final size.
When you use any of the Cloudinary resizing transformations, the sizing (scaling/cropping) is performed on the server side, and the image or video is always delivered to the browser at the requested size.
Here are some examples of different cropping techniques used on the same image. Click each image to see the URL parameters applied in each case:
Original image
Focus on the
model in a
portrait crop
Detect the
face for a
thumbnail crop
Automatically determine what to keep in a banner crop
You can set the target dimensions of your resized image by specifying width, height, and/or the target aspect ratio as qualifiers of your resize transformation.
- Using an integer value for w (width) or h (height) sets the new dimension to that number in pixels. For example,
w_150 sets the width to exactly 150 pixels.
- Using a decimal value for width or height sets the new dimension relative to 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.
- Aspect ratios are specified using the ar (aspect ratio) parameter, as follows:
a:b where a signifies the relative width and b the relative height (e.g., ar_4:3 or ar_16:9).- a decimal value representing the ratio of the width divided by the height (e.g.,
ar_1.33 or ar_2.5). 1.0 is a perfect square.
In most cases, you will specify both width and height or width/height along with an aspect ratio to define the exact required dimensions. However, in rare cases, you may choose to specify only one of these 3 resize qualifiers, and Cloudinary will automatically determine the missing dimension as follows:
- If you provide only width or only height, then the other dimension is automatically calculated to deliver the original aspect ratio. For example, if your original asset is 400*600, then specifying
c_crop,w_200 is the same as specifying c_crop,w_200,h_300. Supported for all resize and crop modes.
- If you provide only the aspect ratio: If
ar > 1, the original width is maintained and the height is cropped to deliver the requested ratio. If ar < 1, the original height is maintained, and the width is cropped accordingly. Supported for modes that support cropping out part of the image (crop, the fill modes, the pad modes, and thumb). Not supported for imagga_crop.
If you want to resize only one dimension, and keep the other dimension at its original size (rather than the automatic determination described above), you can specify only width or only height, and add the
fl_ignore_aspect_ratio flag qualifier.
When changing the dimensions of an uploaded image by setting the image's height, width, and/or aspect ratio, you need to decide how to resize or crop the image to fit into the requested size. Use the c (crop/resize) parameter for selecting the resize/crop mode. Cloudinary supports the following image resize/crop modes:
| Resize/crop mode |
Behavior |
| Resize modes |
These modes adjust the size of the delivered image without cropping out any elements of the original image. |
| scale |
Resizes the image to the specified dimensions without necessarily retaining the original aspect ratio. |
| fit |
Resizes the image to fit inside the bounding box specified by the dimensions, maintaining the aspect ratio. |
| limit |
Same as fit, but only scales down the image. |
| mfit |
Same as fit, but only scales up the image. |
| pad |
Resizes the image to fit inside the bounding box specified by the dimensions, maintaining the aspect ratio, and applies padding if the resized image does not fill the whole area. |
| lpad |
Same as pad, but only scales down the image. |
| mpad |
Same as pad, but only scales up the image. |
| Cropping modes |
If the requested dimensions have a different aspect ratio than the original, these modes crop out part of the image. |
| crop |
Extracts a region of the specified dimensions from the original image without first resizing it. |
| fill |
Resizes the image to fill the specified dimensions without distortion. The image may be cropped as a result. |
| lfill |
Same as fill, but only scales down the image. |
| fill_pad |
Same as fill, but avoids excessive cropping by adding padding when needed. Supported only with automatic cropping. |
| thumb |
Creates a thumbnail of the image with the specified dimensions, based on a specified gravity. Scaling may occur. |
| Add-on resize and crop modes |
These modes adjust the size and/or crop the image using an add-on. |
| imagga_scale |
Performs smart scaling, using the Imagga Crop and Scale add-on. |
| imagga_crop |
Performs smart cropping, using the Imagga Crop and Scale add-on. |
When creating dynamic delivery URLs, if you specify only the width and/or height parameters, but no cropping mode (no
c_<mode>), the image is
scaled to the new dimensions by default. However, there is no default cropping mode when using the Cloudinary SDK helper methods (see
Embedding images in web pages), so a cropping mode must be explicitly set.
Some of the cropping modes keep only a certain part of the original image in the resulting image. By default, the center of the image is kept in the crop, but this is not always ideal. To keep the parts of the image that are important to you, you can use the gravity parameter. For example, you can specify to keep faces, text, or certain objects in the crop, or gravitate towards an automatically-determined area of interest. You can also guide the crop towards areas of your image defined by compass points, for example, north to keep the top part of the image, or south_east to keep the bottom-right part. Additionally, if you know the coordinates of the area you want to keep, you can explicitly specify these.
The following examples show the same image resized to a width and height of 200 pixels, using different methods of resizing and cropping.
The original image is 640 x 426 pixels:
Resizing the image to 200 x 200 pixels, using crop, scale, fill and pad results in the following images:
c_crop,h_200,w_200
c_scale,h_200,w_200
c_fill,h_200,w_200
c_pad,h_200,w_200
You could deliver the c_crop transformation shown above as follows:
Ruby:
cl_image_tag("docs/models.jpg", :height=>200, :width=>200, :crop=>"crop")
PHP v1:
cl_image_tag("docs/models.jpg", array("height"=>200, "width"=>200, "crop"=>"crop"))
PHP v2:
(new ImageTag('docs/models.jpg'))
->resize(Resize::crop()->width(200)->height(200));
Python:
CloudinaryImage("docs/models.jpg").image(height=200, width=200, crop="crop")
Node.js:
cloudinary.image("docs/models.jpg", {height: 200, width: 200, crop: "crop"})
Java:
cloudinary.url().transformation(new Transformation().height(200).width(200).crop("crop")).imageTag("docs/models.jpg");
JS:
cloudinary.imageTag('docs/models.jpg', {height: 200, width: 200, crop: "crop"}).toHtml();
jQuery:
$.cloudinary.image("docs/models.jpg", {height: 200, width: 200, crop: "crop"})
React:
<Image publicId="docs/models.jpg" >
<Transformation height="200" width="200" crop="crop" />
</Image>
Vue.js:
<cld-image publicId="docs/models.jpg" >
<cld-transformation height="200" width="200" crop="crop" />
</cld-image>
Angular:
<cl-image public-id="docs/models.jpg" >
<cl-transformation height="200" width="200" crop="crop">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Width(200).Crop("crop")).BuildImageTag("docs/models.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setWidth(200).setCrop("crop")).generate("docs/models.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().height(200).width(200).crop("crop")).generate("docs/models.jpg");
Kotlin:
cloudinary.image {
publicId("docs/models.jpg")
resize(Resize.crop() {
width(200)
height(200)
})}.generate()
The following sections explain how each of the crop modes behave.
The scale resize mode changes the size of the image exactly to the specified dimensions 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 specified, then the image is scaled to the new dimension while retaining the original aspect ratio, unless you also include the ignore_aspect_ratio flag.
Scale the sample image to a width of 150 pixels (maintains the aspect ratio by default):
Ruby:
cl_image_tag("sample.jpg", :width=>150, :crop=>"scale")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>150, "crop"=>"scale"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::scale()->width(150));
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")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(150).crop("scale")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.scale() {
width(150)
})}.generate()
Scale the sample image to a width and height of 150 pixels without maintaining the aspect ratio:
Ruby:
cl_image_tag("sample.jpg", :width=>150, :height=>150, :crop=>"scale")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>150, "height"=>150, "crop"=>"scale"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::scale()->width(150)->height(150));
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")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(150).height(150).crop("scale")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.scale() {
width(150)
height(150)
})}.generate()
Scale the sample image to a width of 25% (maintains the aspect ratio by default):
Ruby:
cl_image_tag("sample.jpg", :width=>0.25, :crop=>"scale")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>"0.25", "crop"=>"scale"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::scale()->width(0.25));
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")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.25).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(0.25).crop("scale")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.scale() {
width(0.25f)
})}.generate()
Scale the sample image to a width of 100, changing the aspect ratio to 1:2:
Ruby:
cl_image_tag("sample.jpg", :aspect_ratio=>"1:2", :width=>100, :crop=>"scale")
PHP v1:
cl_image_tag("sample.jpg", array("aspect_ratio"=>"1:2", "width"=>100, "crop"=>"scale"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::scale()->width(100)->aspectRatio('1:2'));
Python:
CloudinaryImage("sample.jpg").image(aspect_ratio="1:2", width=100, crop="scale")
Node.js:
cloudinary.image("sample.jpg", {aspect_ratio: "1:2", width: 100, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().aspectRatio("1:2").width(100).crop("scale")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {aspectRatio: "1:2", width: 100, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {aspect_ratio: "1:2", width: 100, crop: "scale"})
React:
<Image publicId="sample.jpg" >
<Transformation aspectRatio="1:2" width="100" crop="scale" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation aspectRatio="1:2" width="100" crop="scale" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation aspect-ratio="1:2" width="100" crop="scale">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1:2").Width(100).Crop("scale")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1:2").setWidth(100).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().aspectRatio("1:2").width(100).crop("scale")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.scale() {
width(100)
aspectRatio("1:2")
})}.generate()
Scale the sample image to a height of 150, ignoring the aspect ratio:
Ruby:
cl_image_tag("sample.jpg", :height=>150, :flags=>"ignore_aspect_ratio", :crop=>"scale")
PHP v1:
cl_image_tag("sample.jpg", array("height"=>150, "flags"=>"ignore_aspect_ratio", "crop"=>"scale"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::scale()->height(150)
->aspectRatio(AspectRatio::ignoreInitialAspectRatio()));
Python:
CloudinaryImage("sample.jpg").image(height=150, flags="ignore_aspect_ratio", crop="scale")
Node.js:
cloudinary.image("sample.jpg", {height: 150, flags: "ignore_aspect_ratio", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().height(150).flags("ignore_aspect_ratio").crop("scale")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {height: 150, flags: "ignore_aspect_ratio", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {height: 150, flags: "ignore_aspect_ratio", crop: "scale"})
React:
<Image publicId="sample.jpg" >
<Transformation height="150" flags="ignore_aspect_ratio" crop="scale" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation height="150" flags="ignore_aspect_ratio" crop="scale" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation height="150" flags="ignore_aspect_ratio" crop="scale">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(150).Flags("ignore_aspect_ratio").Crop("scale")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(150).setFlags("ignore_aspect_ratio").setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().height(150).flags("ignore_aspect_ratio").crop("scale")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.scale() {
height(150)
aspectRatio(AspectRatio.ignoreInitialAspectRatio())
})}.generate()
The fit resize mode resizes the image so that it takes up as much space as possible within a bounding box defined by the specified dimensions. The original aspect ratio is retained and all of the original image is visible.
Resize the sample image to fit within a width and height of 250 pixels while retaining the aspect ratio:
Ruby:
cl_image_tag("sample.jpg", :width=>250, :height=>250, :crop=>"fit")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "crop"=>"fit"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::fit()->width(250)->height(250));
Python:
CloudinaryImage("sample.jpg").image(width=250, height=250, crop="fit")
Node.js:
cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "fit"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).crop("fit")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {width: 250, height: 250, crop: "fit"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "fit"})
React:
<Image publicId="sample.jpg" >
<Transformation width="250" height="250" crop="fit" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation width="250" height="250" crop="fit" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation width="250" height="250" crop="fit">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Crop("fit")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setCrop("fit")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(250).height(250).crop("fit")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.fit() {
width(250)
height(250)
})}.generate()
Resize the sample image to fit within a 150-pixel square defined by aspect ratio and height:
Ruby:
cl_image_tag("sample.jpg", :aspect_ratio=>"1.0", :height=>150, :crop=>"fit")
PHP v1:
cl_image_tag("sample.jpg", array("aspect_ratio"=>"1.0", "height"=>150, "crop"=>"fit"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::fit()->height(150)->aspectRatio(1.0));
Python:
CloudinaryImage("sample.jpg").image(aspect_ratio="1.0", height=150, crop="fit")
Node.js:
cloudinary.image("sample.jpg", {aspect_ratio: "1.0", height: 150, crop: "fit"})
Java:
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").height(150).crop("fit")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {aspectRatio: "1.0", height: 150, crop: "fit"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {aspect_ratio: "1.0", height: 150, crop: "fit"})
React:
<Image publicId="sample.jpg" >
<Transformation aspectRatio="1.0" height="150" crop="fit" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation aspectRatio="1.0" height="150" crop="fit" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation aspect-ratio="1.0" height="150" crop="fit">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Height(150).Crop("fit")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setHeight(150).setCrop("fit")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").height(150).crop("fit")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.fit() {
height(150)
aspectRatio(1.0f)
})}.generate()
The limit resize mode behaves the same as the fit mode but only if the original image is larger than the specified 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 specified dimensions. 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.
Limit the sample image to a width and height of 250 pixels while retaining the aspect ratio:
Ruby:
cl_image_tag("sample.jpg", :width=>250, :height=>250, :crop=>"limit")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "crop"=>"limit"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::limitFit()->width(250)->height(250));
Python:
CloudinaryImage("sample.jpg").image(width=250, height=250, crop="limit")
Node.js:
cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "limit"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).crop("limit")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {width: 250, height: 250, crop: "limit"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "limit"})
React:
<Image publicId="sample.jpg" >
<Transformation width="250" height="250" crop="limit" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation width="250" height="250" crop="limit" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation width="250" height="250" crop="limit">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Crop("limit")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setCrop("limit")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(250).height(250).crop("limit")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.limitFit() {
width(250)
height(250)
})}.generate()
Limit the sample image to a 150-pixel square defined by aspect ratio and height:
Ruby:
cl_image_tag("sample.jpg", :aspect_ratio=>"1.0", :height=>150, :crop=>"limit")
PHP v1:
cl_image_tag("sample.jpg", array("aspect_ratio"=>"1.0", "height"=>150, "crop"=>"limit"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::limitFit()->height(150)->aspectRatio(1.0));
Python:
CloudinaryImage("sample.jpg").image(aspect_ratio="1.0", height=150, crop="limit")
Node.js:
cloudinary.image("sample.jpg", {aspect_ratio: "1.0", height: 150, crop: "limit"})
Java:
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").height(150).crop("limit")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {aspectRatio: "1.0", height: 150, crop: "limit"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {aspect_ratio: "1.0", height: 150, crop: "limit"})
React:
<Image publicId="sample.jpg" >
<Transformation aspectRatio="1.0" height="150" crop="limit" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation aspectRatio="1.0" height="150" crop="limit" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation aspect-ratio="1.0" height="150" crop="limit">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Height(150).Crop("limit")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setHeight(150).setCrop("limit")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").height(150).crop("limit")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.limitFit() {
height(150)
aspectRatio(1.0f)
})}.generate()
The mfit resize mode behaves the same as the fit mode but only if the original image is smaller than the specified 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 specified dimensions. 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.
Fit the sample image to a minimum width and height of 250 pixels while retaining the aspect ratio. This results in the original larger image being delivered:
Ruby:
cl_image_tag("sample.jpg", :width=>250, :height=>250, :crop=>"mfit")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "crop"=>"mfit"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::minimumFit()->width(250)->height(250));
Python:
CloudinaryImage("sample.jpg").image(width=250, height=250, crop="mfit")
Node.js:
cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "mfit"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).crop("mfit")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {width: 250, height: 250, crop: "mfit"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {width: 250, height: 250, crop: "mfit"})
React:
<Image publicId="sample.jpg" >
<Transformation width="250" height="250" crop="mfit" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation width="250" height="250" crop="mfit" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation width="250" height="250" crop="mfit">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Crop("mfit")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setCrop("mfit")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(250).height(250).crop("mfit")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.minimumFit() {
width(250)
height(250)
})}.generate()
Scale up the 100-pixel wide sample_100 image to fit a 150-pixel square defined by aspect ratio and height.
Ruby:
cl_image_tag("docs/sample_100.jpg", :aspect_ratio=>"1.0", :height=>150, :crop=>"mfit")
PHP v1:
cl_image_tag("docs/sample_100.jpg", array("aspect_ratio"=>"1.0", "height"=>150, "crop"=>"mfit"))
PHP v2:
(new ImageTag('docs/sample_100.jpg'))
->resize(Resize::minimumFit()->height(150)->aspectRatio(1.0));
Python:
CloudinaryImage("docs/sample_100.jpg").image(aspect_ratio="1.0", height=150, crop="mfit")
Node.js:
cloudinary.image("docs/sample_100.jpg", {aspect_ratio: "1.0", height: 150, crop: "mfit"})
Java:
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").height(150).crop("mfit")).imageTag("docs/sample_100.jpg");
JS:
cloudinary.imageTag('docs/sample_100.jpg', {aspectRatio: "1.0", height: 150, crop: "mfit"}).toHtml();
jQuery:
$.cloudinary.image("docs/sample_100.jpg", {aspect_ratio: "1.0", height: 150, crop: "mfit"})
React:
<Image publicId="docs/sample_100.jpg" >
<Transformation aspectRatio="1.0" height="150" crop="mfit" />
</Image>
Vue.js:
<cld-image publicId="docs/sample_100.jpg" >
<cld-transformation aspectRatio="1.0" height="150" crop="mfit" />
</cld-image>
Angular:
<cl-image public-id="docs/sample_100.jpg" >
<cl-transformation aspect-ratio="1.0" height="150" crop="mfit">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Height(150).Crop("mfit")).BuildImageTag("docs/sample_100.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setHeight(150).setCrop("mfit")).generate("docs/sample_100.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").height(150).crop("mfit")).generate("docs/sample_100.jpg");
Kotlin:
cloudinary.image {
publicId("docs/sample_100.jpg")
resize(Resize.minimumFit() {
height(150)
aspectRatio(1.0f)
})}.generate()
The pad resize mode resizes the image to fill the specified dimensions 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 specified dimensions, 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.
Resize and pad the sample image with a black background to a width and height of 250 pixels:
Ruby:
cl_image_tag("sample.jpg", :width=>250, :height=>250, :background=>"black", :crop=>"pad")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "background"=>"black", "crop"=>"pad"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::pad()->width(250)->height(250)
->background(Background::color(Color::BLACK)));
Python:
CloudinaryImage("sample.jpg").image(width=250, height=250, background="black", crop="pad")
Node.js:
cloudinary.image("sample.jpg", {width: 250, height: 250, background: "black", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).background("black").crop("pad")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {width: 250, height: 250, background: "black", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {width: 250, height: 250, background: "black", crop: "pad"})
React:
<Image publicId="sample.jpg" >
<Transformation width="250" height="250" background="black" crop="pad" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation width="250" height="250" background="black" crop="pad" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation width="250" height="250" background="black" crop="pad">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Background("black").Crop("pad")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setBackground("black").setCrop("pad")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(250).height(250).background("black").crop("pad")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.pad() {
width(250)
height(250)
background(Background.color(Color.BLACK))
})}.generate()
Resize and pad the sample image with a black background to a rectangle of height of 150 pixels, and aspect ratio 2:1:
Ruby:
cl_image_tag("sample.jpg", :aspect_ratio=>"2:1", :height=>150, :background=>"black", :crop=>"pad")
PHP v1:
cl_image_tag("sample.jpg", array("aspect_ratio"=>"2:1", "height"=>150, "background"=>"black", "crop"=>"pad"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::pad()->height(150)->aspectRatio('2:1')
->background(Background::color(Color::BLACK)));
Python:
CloudinaryImage("sample.jpg").image(aspect_ratio="2:1", height=150, background="black", crop="pad")
Node.js:
cloudinary.image("sample.jpg", {aspect_ratio: "2:1", height: 150, background: "black", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().aspectRatio("2:1").height(150).background("black").crop("pad")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {aspectRatio: "2:1", height: 150, background: "black", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {aspect_ratio: "2:1", height: 150, background: "black", crop: "pad"})
React:
<Image publicId="sample.jpg" >
<Transformation aspectRatio="2:1" height="150" background="black" crop="pad" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation aspectRatio="2:1" height="150" background="black" crop="pad" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation aspect-ratio="2:1" height="150" background="black" crop="pad">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("2:1").Height(150).Background("black").Crop("pad")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("2:1").setHeight(150).setBackground("black").setCrop("pad")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().aspectRatio("2:1").height(150).background("black").crop("pad")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.pad() {
height(150)
aspectRatio("2:1")
background(Background.color(Color.BLACK))
})}.generate()
The lpad resize mode behaves the same as the pad mode but only if the original image is larger than the specified limit (width and height), in which case the image is scaled down to fill the specified dimensions 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 specified dimensions, 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.
Limit the sample image to a bounding box of 400 x 150 pixels, and pad with a green background:
Ruby:
cl_image_tag("sample.jpg", :width=>400, :height=>150, :background=>"green", :crop=>"lpad")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>400, "height"=>150, "background"=>"green", "crop"=>"lpad"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::limitPad()->width(400)->height(150)
->background(Background::color(Color::GREEN)));
Python:
CloudinaryImage("sample.jpg").image(width=400, height=150, background="green", crop="lpad")
Node.js:
cloudinary.image("sample.jpg", {width: 400, height: 150, background: "green", crop: "lpad"})
Java:
cloudinary.url().transformation(new Transformation().width(400).height(150).background("green").crop("lpad")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {width: 400, height: 150, background: "green", crop: "lpad"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {width: 400, height: 150, background: "green", crop: "lpad"})
React:
<Image publicId="sample.jpg" >
<Transformation width="400" height="150" background="green" crop="lpad" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation width="400" height="150" background="green" crop="lpad" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation width="400" height="150" background="green" crop="lpad">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(150).Background("green").Crop("lpad")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(150).setBackground("green").setCrop("lpad")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(400).height(150).background("green").crop("lpad")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.limitPad() {
width(400)
height(150)
background(Background.color(Color.GREEN))
})}.generate()
Limit the sample image to a bounding box specified by an aspect ratio of 0.66 with a width of 100 pixels, and pad with a green background:
Ruby:
cl_image_tag("sample.jpg", :aspect_ratio=>"0.66", :width=>100, :background=>"green", :crop=>"lpad")
PHP v1:
cl_image_tag("sample.jpg", array("aspect_ratio"=>"0.66", "width"=>100, "background"=>"green", "crop"=>"lpad"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::limitPad()->width(100)->aspectRatio(0.66)
->background(Background::color(Color::GREEN)));
Python:
CloudinaryImage("sample.jpg").image(aspect_ratio="0.66", width=100, background="green", crop="lpad")
Node.js:
cloudinary.image("sample.jpg", {aspect_ratio: "0.66", width: 100, background: "green", crop: "lpad"})
Java:
cloudinary.url().transformation(new Transformation().aspectRatio("0.66").width(100).background("green").crop("lpad")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {aspectRatio: "0.66", width: 100, background: "green", crop: "lpad"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {aspect_ratio: "0.66", width: 100, background: "green", crop: "lpad"})
React:
<Image publicId="sample.jpg" >
<Transformation aspectRatio="0.66" width="100" background="green" crop="lpad" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation aspectRatio="0.66" width="100" background="green" crop="lpad" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation aspect-ratio="0.66" width="100" background="green" crop="lpad">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("0.66").Width(100).Background("green").Crop("lpad")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("0.66").setWidth(100).setBackground("green").setCrop("lpad")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().aspectRatio("0.66").width(100).background("green").crop("lpad")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.limitPad() {
width(100)
aspectRatio(0.66f)
background(Background.color(Color.GREEN))
})}.generate()
The mpad resize mode behaves the same as the pad mode but only if the original image is smaller than the specified minimum (width and height), in which case the image is unchanged but padding is added to fill the specified dimensions. This mode doesn't scale down the image if your requested dimensions are smaller than the original image's. 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.
Minimum pad the 100-pixel wide image sample_100 to a width and height of 200 pixels while retaining the aspect ratio:
Ruby:
cl_image_tag("docs/sample_100.jpg", :width=>200, :height=>200, :background=>"green", :crop=>"mpad")
PHP v1:
cl_image_tag("docs/sample_100.jpg", array("width"=>200, "height"=>200, "background"=>"green", "crop"=>"mpad"))
PHP v2:
(new ImageTag('docs/sample_100.jpg'))
->resize(Resize::minimumPad()->width(200)->height(200)
->background(Background::color(Color::GREEN)));
Python:
CloudinaryImage("docs/sample_100.jpg").image(width=200, height=200, background="green", crop="mpad")
Node.js:
cloudinary.image("docs/sample_100.jpg", {width: 200, height: 200, background: "green", crop: "mpad"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(200).background("green").crop("mpad")).imageTag("docs/sample_100.jpg");
JS:
cloudinary.imageTag('docs/sample_100.jpg', {width: 200, height: 200, background: "green", crop: "mpad"}).toHtml();
jQuery:
$.cloudinary.image("docs/sample_100.jpg", {width: 200, height: 200, background: "green", crop: "mpad"})
React:
<Image publicId="docs/sample_100.jpg" >
<Transformation width="200" height="200" background="green" crop="mpad" />
</Image>
Vue.js:
<cld-image publicId="docs/sample_100.jpg" >
<cld-transformation width="200" height="200" background="green" crop="mpad" />
</cld-image>
Angular:
<cl-image public-id="docs/sample_100.jpg" >
<cl-transformation width="200" height="200" background="green" crop="mpad">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Background("green").Crop("mpad")).BuildImageTag("docs/sample_100.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setBackground("green").setCrop("mpad")).generate("docs/sample_100.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(200).height(200).background("green").crop("mpad")).generate("docs/sample_100.jpg");
Kotlin:
cloudinary.image {
publicId("docs/sample_100.jpg")
resize(Resize.minimumPad() {
width(200)
height(200)
background(Background.color(Color.GREEN))
})}.generate()
Minimum pad the sample image to a square of 200 pixels, defined by aspect ratio and width. This results in the original larger image being delivered:
Ruby:
cl_image_tag("sample.jpg", :aspect_ratio=>"1.0", :width=>200, :background=>"green", :crop=>"mpad")
PHP v1:
cl_image_tag("sample.jpg", array("aspect_ratio"=>"1.0", "width"=>200, "background"=>"green", "crop"=>"mpad"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::minimumPad()->width(200)->aspectRatio(1.0)
->background(Background::color(Color::GREEN)));
Python:
CloudinaryImage("sample.jpg").image(aspect_ratio="1.0", width=200, background="green", crop="mpad")
Node.js:
cloudinary.image("sample.jpg", {aspect_ratio: "1.0", width: 200, background: "green", crop: "mpad"})
Java:
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").width(200).background("green").crop("mpad")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {aspectRatio: "1.0", width: 200, background: "green", crop: "mpad"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {aspect_ratio: "1.0", width: 200, background: "green", crop: "mpad"})
React:
<Image publicId="sample.jpg" >
<Transformation aspectRatio="1.0" width="200" background="green" crop="mpad" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation aspectRatio="1.0" width="200" background="green" crop="mpad" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation aspect-ratio="1.0" width="200" background="green" crop="mpad">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Width(200).Background("green").Crop("mpad")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setWidth(200).setBackground("green").setCrop("mpad")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").width(200).background("green").crop("mpad")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.minimumPad() {
width(200)
aspectRatio(1.0f)
background(Background.color(Color.GREEN))
})}.generate()
Minimum pad the 100-pixel wide image sample_100 to a 175 x 125 pixel rectangle, positioned offset from the top-left:
Ruby:
cl_image_tag("docs/sample_100.jpg", :width=>175, :height=>125, :background=>"pink", :gravity=>"north_west", :x=>20, :y=>20, :crop=>"mpad")
PHP v1:
cl_image_tag("docs/sample_100.jpg", array("width"=>175, "height"=>125, "background"=>"pink", "gravity"=>"north_west", "x"=>20, "y"=>20, "crop"=>"mpad"))
PHP v2:
(new ImageTag('docs/sample_100.jpg'))
->resize(Resize::minimumPad()->width(175)->height(125)
->gravity(Gravity::compass(Compass::northWest()))
->offsetX(20)->offsetY(20)
->background(Background::color(Color::PINK)));
Python:
CloudinaryImage("docs/sample_100.jpg").image(width=175, height=125, background="pink", gravity="north_west", x=20, y=20, crop="mpad")
Node.js:
cloudinary.image("docs/sample_100.jpg", {width: 175, height: 125, background: "pink", gravity: "north_west", x: 20, y: 20, crop: "mpad"})
Java:
cloudinary.url().transformation(new Transformation().width(175).height(125).background("pink").gravity("north_west").x(20).y(20).crop("mpad")).imageTag("docs/sample_100.jpg");
JS:
cloudinary.imageTag('docs/sample_100.jpg', {width: 175, height: 125, background: "pink", gravity: "north_west", x: 20, y: 20, crop: "mpad"}).toHtml();
jQuery:
$.cloudinary.image("docs/sample_100.jpg", {width: 175, height: 125, background: "pink", gravity: "north_west", x: 20, y: 20, crop: "mpad"})
React:
<Image publicId="docs/sample_100.jpg" >
<Transformation width="175" height="125" background="pink" gravity="north_west" x="20" y="20" crop="mpad" />
</Image>
Vue.js:
<cld-image publicId="docs/sample_100.jpg" >
<cld-transformation width="175" height="125" background="pink" gravity="north_west" x="20" y="20" crop="mpad" />
</cld-image>
Angular:
<cl-image public-id="docs/sample_100.jpg" >
<cl-transformation width="175" height="125" background="pink" gravity="north_west" x="20" y="20" crop="mpad">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(175).Height(125).Background("pink").Gravity("north_west").X(20).Y(20).Crop("mpad")).BuildImageTag("docs/sample_100.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(175).setHeight(125).setBackground("pink").setGravity("north_west").setX(20).setY(20).setCrop("mpad")).generate("docs/sample_100.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(175).height(125).background("pink").gravity("north_west").x(20).y(20).crop("mpad")).generate("docs/sample_100.jpg");
Kotlin:
cloudinary.image {
publicId("docs/sample_100.jpg")
resize(Resize.minimumPad() {
width(175)
height(125)
gravity(Gravity.compass(Compass.northWest()))
offsetX(20)
offsetY(20)
background(Background.color(Color.PINK))
})}.generate()
The crop cropping mode extracts a region of the specified dimensions out of the original image. The original proportions are retained and so is the size of the graphics. You can specify the gravity parameter to select which part of the image to extract, or use fixed coordinates cropping.
Crop the sample image to a width of 200 pixels and a height of 150 pixels, with northwest gravity:
Ruby:
cl_image_tag("sample.jpg", :width=>200, :height=>150, :gravity=>"north_west", :crop=>"crop")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>200, "height"=>150, "gravity"=>"north_west", "crop"=>"crop"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::crop()->width(200)->height(150)
->gravity(Gravity::compass(Compass::northWest())));
Python:
CloudinaryImage("sample.jpg").image(width=200, height=150, gravity="north_west", crop="crop")
Node.js:
cloudinary.image("sample.jpg", {width: 200, height: 150, gravity: "north_west", crop: "crop"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(150).gravity("north_west").crop("crop")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {width: 200, height: 150, gravity: "north_west", crop: "crop"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {width: 200, height: 150, gravity: "north_west", crop: "crop"})
React:
<Image publicId="sample.jpg" >
<Transformation width="200" height="150" gravity="north_west" crop="crop" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation width="200" height="150" gravity="north_west" crop="crop" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation width="200" height="150" gravity="north_west" crop="crop">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(150).Gravity("north_west").Crop("crop")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(150).setGravity("north_west").setCrop("crop")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(200).height(150).gravity("north_west").crop("crop")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.crop() {
width(200)
height(150)
gravity(Gravity.compass(Compass.northWest()))
})}.generate()
Crop the sample image to a width of 450 pixels and an aspect ratio of 2.5:
Ruby:
cl_image_tag("sample.jpg", :aspect_ratio=>"2.5", :width=>450, :crop=>"crop")
PHP v1:
cl_image_tag("sample.jpg", array("aspect_ratio"=>"2.5", "width"=>450, "crop"=>"crop"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::crop()->width(450)->aspectRatio(2.5));
Python:
CloudinaryImage("sample.jpg").image(aspect_ratio="2.5", width=450, crop="crop")
Node.js:
cloudinary.image("sample.jpg", {aspect_ratio: "2.5", width: 450, crop: "crop"})
Java:
cloudinary.url().transformation(new Transformation().aspectRatio("2.5").width(450).crop("crop")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {aspectRatio: "2.5", width: 450, crop: "crop"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {aspect_ratio: "2.5", width: 450, crop: "crop"})
React:
<Image publicId="sample.jpg" >
<Transformation aspectRatio="2.5" width="450" crop="crop" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation aspectRatio="2.5" width="450" crop="crop" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation aspect-ratio="2.5" width="450" crop="crop">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("2.5").Width(450).Crop("crop")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("2.5").setWidth(450).setCrop("crop")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().aspectRatio("2.5").width(450).crop("crop")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.crop() {
width(450)
aspectRatio(2.5f)
})}.generate()
You can specify a region of the original image to crop by giving the x and y coordinates of the top left corner of the region together with the width and height of the region. You can also use percentage based numbers instead of the exact coordinates for x, y, w and h (e.g., 0.5 for 50%) . Use this method when you know beforehand what the correct absolute cropping coordinates are, as in when your users manually select the region to crop out of the original image.
For example, the following image shows many white sheep and one brown sheep.
Ruby:
cl_image_tag("brown_sheep.jpg")
PHP v1:
cl_image_tag("brown_sheep.jpg")
PHP v2:
(new ImageTag('brown_sheep.jpg'));
Python:
CloudinaryImage("brown_sheep.jpg").image()
Node.js:
cloudinary.image("brown_sheep.jpg")
Java:
cloudinary.url().imageTag("brown_sheep.jpg");
JS:
cloudinary.imageTag('brown_sheep.jpg').toHtml();
jQuery:
$.cloudinary.image("brown_sheep.jpg")
React:
<Image publicId="brown_sheep.jpg" >
</Image>
Vue.js:
<cld-image publicId="brown_sheep.jpg" >
</cld-image>
Angular:
<cl-image public-id="brown_sheep.jpg" >
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.BuildImageTag("brown_sheep.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("brown_sheep.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().generate("brown_sheep.jpg");
Kotlin:
cloudinary.image {
publicId("brown_sheep.jpg")
}.generate()
To resize the picture so that only the brown sheep is visible, the image is cropped to a 300x200 region starting at the coordinate x = 355 and y = 410:
Ruby:
cl_image_tag("brown_sheep.jpg", :x=>355, :y=>410, :width=>300, :height=>200, :crop=>"crop")
PHP v1:
cl_image_tag("brown_sheep.jpg", array("x"=>355, "y"=>410, "width"=>300, "height"=>200, "crop"=>"crop"))
PHP v2:
(new ImageTag('brown_sheep.jpg'))
->resize(Resize::crop()->width(300)->height(200)->x(355)->y(410));
Python:
CloudinaryImage("brown_sheep.jpg").image(x=355, y=410, width=300, height=200, crop="crop")
Node.js:
cloudinary.image("brown_sheep.jpg", {x: 355, y: 410, width: 300, height: 200, crop: "crop"})
Java:
cloudinary.url().transformation(new Transformation().x(355).y(410).width(300).height(200).crop("crop")).imageTag("brown_sheep.jpg");
JS:
cloudinary.imageTag('brown_sheep.jpg', {x: 355, y: 410, width: 300, height: 200, crop: "crop"}).toHtml();
jQuery:
$.cloudinary.image("brown_sheep.jpg", {x: 355, y: 410, width: 300, height: 200, crop: "crop"})
React:
<Image publicId="brown_sheep.jpg" >
<Transformation x="355" y="410" width="300" height="200" crop="crop" />
</Image>
Vue.js:
<cld-image publicId="brown_sheep.jpg" >
<cld-transformation x="355" y="410" width="300" height="200" crop="crop" />
</cld-image>
Angular:
<cl-image public-id="brown_sheep.jpg" >
<cl-transformation x="355" y="410" width="300" height="200" crop="crop">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().X(355).Y(410).Width(300).Height(200).Crop("crop")).BuildImageTag("brown_sheep.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setX(355).setY(410).setWidth(300).setHeight(200).setCrop("crop")).generate("brown_sheep.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().x(355).y(410).width(300).height(200).crop("crop")).generate("brown_sheep.jpg");
Kotlin:
cloudinary.image {
publicId("brown_sheep.jpg")
resize(Resize.crop() {
width(300)
height(200)
x(355)
y(410)
})}.generate()
The image can be further resized with chained transformations. For example, the 300x200 cropped version above, also scaled down to half that size:
Ruby:
cl_image_tag("brown_sheep.jpg", :transformation=>[
{:x=>355, :y=>410, :width=>300, :height=>200, :crop=>"crop"},
{:width=>150, :crop=>"scale"}
])
PHP v1:
cl_image_tag("brown_sheep.jpg", array("transformation"=>array(
array("x"=>355, "y"=>410, "width"=>300, "height"=>200, "crop"=>"crop"),
array("width"=>150, "crop"=>"scale")
)))
PHP v2:
(new ImageTag('brown_sheep.jpg'))
->resize(Resize::crop()->width(300)->height(200)->x(355)->y(410))
->resize(Resize::scale()->width(150));
Python:
CloudinaryImage("brown_sheep.jpg").image(transformation=[
{'x': 355, 'y': 410, 'width': 300, 'height': 200, 'crop': "crop"},
{'width': 150, 'crop': "scale"}
])
Node.js:
cloudinary.image("brown_sheep.jpg", {transformation: [
{x: 355, y: 410, width: 300, height: 200, crop: "crop"},
{width: 150, crop: "scale"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.x(355).y(410).width(300).height(200).crop("crop").chain()
.width(150).crop("scale")).imageTag("brown_sheep.jpg");
JS:
cloudinary.imageTag('brown_sheep.jpg', {transformation: [
{x: 355, y: 410, width: 300, height: 200, crop: "crop"},
{width: 150, crop: "scale"}
]}).toHtml();
jQuery:
$.cloudinary.image("brown_sheep.jpg", {transformation: [
{x: 355, y: 410, width: 300, height: 200, crop: "crop"},
{width: 150, crop: "scale"}
]})
React:
<Image publicId="brown_sheep.jpg" >
<Transformation x="355" y="410" width="300" height="200" crop="crop" />
<Transformation width="150" crop="scale" />
</Image>
Vue.js:
<cld-image publicId="brown_sheep.jpg" >
<cld-transformation x="355" y="410" width="300" height="200" crop="crop" />
<cld-transformation width="150" crop="scale" />
</cld-image>
Angular:
<cl-image public-id="brown_sheep.jpg" >
<cl-transformation x="355" y="410" width="300" height="200" crop="crop">
</cl-transformation>
<cl-transformation width="150" crop="scale">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.X(355).Y(410).Width(300).Height(200).Crop("crop").Chain()
.Width(150).Crop("scale")).BuildImageTag("brown_sheep.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setX(355).setY(410).setWidth(300).setHeight(200).setCrop("crop").chain()
.setWidth(150).setCrop("scale")).generate("brown_sheep.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation()
.x(355).y(410).width(300).height(200).crop("crop").chain()
.width(150).crop("scale")).generate("brown_sheep.jpg");
Kotlin:
cloudinary.image {
publicId("brown_sheep.jpg")
resize(Resize.crop() {
width(300)
height(200)
x(355)
y(410)
})
resize(Resize.scale() {
width(150)
})}.generate()
The fill cropping mode creates an image with the exact specified dimensions, without distorting the image. This option first scales up or down as much as needed to at least fill both of the specified 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).
Fill a 250-pixel square with the sample image:
Ruby:
cl_image_tag("sample.jpg", :width=>250, :height=>250, :crop=>"fill")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "crop"=>"fill"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::fill()->width(250)->height(250));
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")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(250).height(250).crop("fill")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.fill() {
width(250)
height(250)
})}.generate()
Fill a 250-pixel square with the right-most part (gravity east) of the sample image:
Ruby:
cl_image_tag("sample.jpg", :aspect_ratio=>"1.0", :width=>250, :gravity=>"east", :crop=>"fill")
PHP v1:
cl_image_tag("sample.jpg", array("aspect_ratio"=>"1.0", "width"=>250, "gravity"=>"east", "crop"=>"fill"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::fill()->width(250)->aspectRatio(1.0)
->gravity(Gravity::compass(Compass::east())));
Python:
CloudinaryImage("sample.jpg").image(aspect_ratio="1.0", width=250, gravity="east", crop="fill")
Node.js:
cloudinary.image("sample.jpg", {aspect_ratio: "1.0", width: 250, gravity: "east", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").width(250).gravity("east").crop("fill")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {aspectRatio: "1.0", width: 250, gravity: "east", crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {aspect_ratio: "1.0", width: 250, gravity: "east", crop: "fill"})
React:
<Image publicId="sample.jpg" >
<Transformation aspectRatio="1.0" width="250" gravity="east" crop="fill" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation aspectRatio="1.0" width="250" gravity="east" crop="fill" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation aspect-ratio="1.0" width="250" gravity="east" crop="fill">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Width(250).Gravity("east").Crop("fill")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setWidth(250).setGravity("east").setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").width(250).gravity("east").crop("fill")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.fill() {
width(250)
aspectRatio(1.0f)
gravity(Gravity.compass(Compass.east()))
})}.generate()
The lfill cropping mode behaves the 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 specified dimensions without distorting 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).
Fill a 150 x 200 pixel area with the sample image and limiting the size to no larger than the original image:
Ruby:
cl_image_tag("sample.jpg", :width=>150, :height=>200, :crop=>"lfill")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>150, "height"=>200, "crop"=>"lfill"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::limitFill()->width(150)->height(200));
Python:
CloudinaryImage("sample.jpg").image(width=150, height=200, crop="lfill")
Node.js:
cloudinary.image("sample.jpg", {width: 150, height: 200, crop: "lfill"})
Java:
cloudinary.url().transformation(new Transformation().width(150).height(200).crop("lfill")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {width: 150, height: 200, crop: "lfill"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {width: 150, height: 200, crop: "lfill"})
React:
<Image publicId="sample.jpg" >
<Transformation width="150" height="200" crop="lfill" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation width="150" height="200" crop="lfill" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation width="150" height="200" crop="lfill">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(200).Crop("lfill")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(200).setCrop("lfill")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(150).height(200).crop("lfill")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.limitFill() {
width(150)
height(200)
})}.generate()
Scale down the sample image to fill a 200-pixel square defined by aspect ratio and height:
Ruby:
cl_image_tag("sample.jpg", :aspect_ratio=>"1.0", :height=>200, :crop=>"lfill")
PHP v1:
cl_image_tag("sample.jpg", array("aspect_ratio"=>"1.0", "height"=>200, "crop"=>"lfill"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::limitFill()->height(200)->aspectRatio(1.0));
Python:
CloudinaryImage("sample.jpg").image(aspect_ratio="1.0", height=200, crop="lfill")
Node.js:
cloudinary.image("sample.jpg", {aspect_ratio: "1.0", height: 200, crop: "lfill"})
Java:
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").height(200).crop("lfill")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {aspectRatio: "1.0", height: 200, crop: "lfill"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {aspect_ratio: "1.0", height: 200, crop: "lfill"})
React:
<Image publicId="sample.jpg" >
<Transformation aspectRatio="1.0" height="200" crop="lfill" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation aspectRatio="1.0" height="200" crop="lfill" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation aspect-ratio="1.0" height="200" crop="lfill">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Height(200).Crop("lfill")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setHeight(200).setCrop("lfill")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").height(200).crop("lfill")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.limitFill() {
height(200)
aspectRatio(1.0f)
})}.generate()
The fill_pad cropping mode tries to prevent a "bad crop" by first attempting to use the fill mode, but adding padding if it is determined that more of the original image needs to be included in the final image. Especially useful if the aspect ratio of the delivered image is considerably different from the original's aspect ratio. Only supported in conjunction with Automatic cropping (g_auto).
Compare the lady image delivered as an 80 x 400 image using the fill mode on the left, with the fill_pad mode on the right:
fill
fill_pad
Ruby:
cl_image_tag("lady.jpg", :width=>80, :height=>400, :gravity=>"auto", :background=>"auto", :crop=>"fill_pad")
PHP v1:
cl_image_tag("lady.jpg", array("width"=>80, "height"=>400, "gravity"=>"auto", "background"=>"auto", "crop"=>"fill_pad"))
PHP v2:
(new ImageTag('lady.jpg'))
->resize(Resize::fillPad()->width(80)->height(400)
->gravity(Gravity::autoGravity())
->background(Background::auto()));
Python:
CloudinaryImage("lady.jpg").image(width=80, height=400, gravity="auto", background="auto", crop="fill_pad")
Node.js:
cloudinary.image("lady.jpg", {width: 80, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"})
Java:
cloudinary.url().transformation(new Transformation().width(80).height(400).gravity("auto").background("auto").crop("fill_pad")).imageTag("lady.jpg");
JS:
cloudinary.imageTag('lady.jpg', {width: 80, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"}).toHtml();
jQuery:
$.cloudinary.image("lady.jpg", {width: 80, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"})
React:
<Image publicId="lady.jpg" >
<Transformation width="80" height="400" gravity="auto" background="auto" crop="fill_pad" />
</Image>
Vue.js:
<cld-image publicId="lady.jpg" >
<cld-transformation width="80" height="400" gravity="auto" background="auto" crop="fill_pad" />
</cld-image>
Angular:
<cl-image public-id="lady.jpg" >
<cl-transformation width="80" height="400" gravity="auto" background="auto" crop="fill_pad">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(80).Height(400).Gravity("auto").Background("auto").Crop("fill_pad")).BuildImageTag("lady.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(80).setHeight(400).setGravity("auto").setBackground("auto").setCrop("fill_pad")).generate("lady.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(80).height(400).gravity("auto").background("auto").crop("fill_pad")).generate("lady.jpg");
Kotlin:
cloudinary.image {
publicId("lady.jpg")
resize(Resize.fillPad() {
width(80)
height(400)
gravity(Gravity.autoGravity())
background(Background.auto())
})}.generate()
The thumb cropping mode is specifically used for creating image thumbnails from either face or custom coordinates, and must always be accompanied by the gravity parameter set to one of the face detection or custom values. This cropping mode generates a thumbnail of an image with the exact specified dimensions and with the original proportions retained, but the resulting image might be scaled to fit in the specified dimensions. You can specify the zoom parameter to determine how much to scale the resulting image within the specified dimensions.
Create a 150 x 150 thumbnail with face detection, of the woman image. Below you can see the original image as well as the face detection based thumbnail:
Ruby:
cl_image_tag("woman.jpg", :gravity=>"face", :width=>150, :height=>150, :crop=>"thumb")
PHP v1:
cl_image_tag("woman.jpg", array("gravity"=>"face", "width"=>150, "height"=>150, "crop"=>"thumb"))
PHP v2:
(new ImageTag('woman.jpg'))
->resize(Resize::thumbnail()->width(150)->height(150)
->gravity(Gravity::focusOn(FocusOn::face())));
Python:
CloudinaryImage("woman.jpg").image(gravity="face", width=150, height=150, crop="thumb")
Node.js:
cloudinary.image("woman.jpg", {gravity: "face", width: 150, height: 150, crop: "thumb"})
Java:
cloudinary.url().transformation(new Transformation().gravity("face").width(150).height(150).crop("thumb")).imageTag("woman.jpg");
JS:
cloudinary.imageTag('woman.jpg', {gravity: "face", width: 150, height: 150, crop: "thumb"}).toHtml();
jQuery:
$.cloudinary.image("woman.jpg", {gravity: "face", width: 150, height: 150, crop: "thumb"})
React:
<Image publicId="woman.jpg" >
<Transformation gravity="face" width="150" height="150" crop="thumb" />
</Image>
Vue.js:
<cld-image publicId="woman.jpg" >
<cld-transformation gravity="face" width="150" height="150" crop="thumb" />
</cld-image>
Angular:
<cl-image public-id="woman.jpg" >
<cl-transformation gravity="face" width="150" height="150" crop="thumb">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Width(150).Height(150).Crop("thumb")).BuildImageTag("woman.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setWidth(150).setHeight(150).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().gravity("face").width(150).height(150).crop("thumb")).generate("woman.jpg");
Kotlin:
cloudinary.image {
publicId("woman.jpg")
resize(Resize.thumbnail() {
width(150)
height(150)
gravity(Gravity.focusOn(FocusOn.face()))
})}.generate()
Create a 150-pixel high thumbnail with aspect ratio 5:6 and face detection of the woman image, zoomed out by 75%.
Ruby:
cl_image_tag("woman.jpg", :gravity=>"face", :aspect_ratio=>"5:6", :height=>150, :zoom=>0.75, :crop=>"thumb")
PHP v1:
cl_image_tag("woman.jpg", array("gravity"=>"face", "aspect_ratio"=>"5:6", "height"=>150, "zoom"=>"0.75", "crop"=>"thumb"))
PHP v2:
(new ImageTag('woman.jpg'))
->resize(Resize::thumbnail()->height(150)->aspectRatio('5:6')
->zoom(0.75)->gravity(Gravity::focusOn(FocusOn::face())));
Python:
CloudinaryImage("woman.jpg").image(gravity="face", aspect_ratio="5:6", height=150, zoom="0.75", crop="thumb")
Node.js:
cloudinary.image("woman.jpg", {gravity: "face", aspect_ratio: "5:6", height: 150, zoom: "0.75", crop: "thumb"})
Java:
cloudinary.url().transformation(new Transformation().gravity("face").aspectRatio("5:6").height(150).zoom(0.75).crop("thumb")).imageTag("woman.jpg");
JS:
cloudinary.imageTag('woman.jpg', {gravity: "face", aspectRatio: "5:6", height: 150, zoom: "0.75", crop: "thumb"}).toHtml();
jQuery:
$.cloudinary.image("woman.jpg", {gravity: "face", aspect_ratio: "5:6", height: 150, zoom: "0.75", crop: "thumb"})
React:
<Image publicId="woman.jpg" >
<Transformation gravity="face" aspectRatio="5:6" height="150" zoom="0.75" crop="thumb" />
</Image>
Vue.js:
<cld-image publicId="woman.jpg" >
<cld-transformation gravity="face" aspectRatio="5:6" height="150" zoom="0.75" crop="thumb" />
</cld-image>
Angular:
<cl-image public-id="woman.jpg" >
<cl-transformation gravity="face" aspect-ratio="5:6" height="150" zoom="0.75" crop="thumb">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").AspectRatio("5:6").Height(150).Zoom(0.75).Crop("thumb")).BuildImageTag("woman.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setAspectRatio("5:6").setHeight(150).setZoom(0.75).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().gravity("face").aspectRatio("5:6").height(150).zoom(0.75).crop("thumb")).generate("woman.jpg");
Kotlin:
cloudinary.image {
publicId("woman.jpg")
resize(Resize.thumbnail() {
height(150)
aspectRatio("5:6")
zoom(0.75f)
gravity(Gravity.focusOn(FocusOn.face()))
})}.generate()
When used with cropping modes that crop out part of an image, the gravity qualifier (g in URLs) specifies which part of the original image to keep when one or both of the requested dimensions is smaller than the original.
The basic gravity value is specified by giving a compass direction to include: north_east, north, north_west, west, south_west, south, south_east, east, or center (the default value). The compass direction represents a location in the image, for example, north_east represents the top right corner.
For example, the uploaded jpg image named sample filled to a width and height of 250 pixels while retaining the aspect ratio:
- Original image:
Ruby:
cl_image_tag("sample.jpg")
PHP v1:
cl_image_tag("sample.jpg")
PHP v2:
(new ImageTag('sample.jpg'));
Python:
CloudinaryImage("sample.jpg").image()
Node.js:
cloudinary.image("sample.jpg")
Java:
cloudinary.url().imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg').toHtml();
jQuery:
$.cloudinary.image("sample.jpg")
React:
<Image publicId="sample.jpg" >
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
}.generate()
- With gravity set to north:
Ruby:
cl_image_tag("sample.jpg", :width=>250, :height=>250, :gravity=>"north", :crop=>"fill")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "gravity"=>"north", "crop"=>"fill"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::fill()->width(250)->height(250)
->gravity(Gravity::compass(Compass::north())));
Python:
CloudinaryImage("sample.jpg").image(width=250, height=250, gravity="north", crop="fill")
Node.js:
cloudinary.image("sample.jpg", {width: 250, height: 250, gravity: "north", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).gravity("north").crop("fill")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {width: 250, height: 250, gravity: "north", crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {width: 250, height: 250, gravity: "north", crop: "fill"})
React:
<Image publicId="sample.jpg" >
<Transformation width="250" height="250" gravity="north" crop="fill" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation width="250" height="250" gravity="north" crop="fill" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation width="250" height="250" gravity="north" crop="fill">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Gravity("north").Crop("fill")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setGravity("north").setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(250).height(250).gravity("north").crop("fill")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.fill() {
width(250)
height(250)
gravity(Gravity.compass(Compass.north()))
})}.generate()
- With gravity set to south_east:
Ruby:
cl_image_tag("sample.jpg", :width=>250, :height=>250, :gravity=>"south_east", :crop=>"fill")
PHP v1:
cl_image_tag("sample.jpg", array("width"=>250, "height"=>250, "gravity"=>"south_east", "crop"=>"fill"))
PHP v2:
(new ImageTag('sample.jpg'))
->resize(Resize::fill()->width(250)->height(250)
->gravity(Gravity::compass(Compass::southEast())));
Python:
CloudinaryImage("sample.jpg").image(width=250, height=250, gravity="south_east", crop="fill")
Node.js:
cloudinary.image("sample.jpg", {width: 250, height: 250, gravity: "south_east", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).gravity("south_east").crop("fill")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {width: 250, height: 250, gravity: "south_east", crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {width: 250, height: 250, gravity: "south_east", crop: "fill"})
React:
<Image publicId="sample.jpg" >
<Transformation width="250" height="250" gravity="south_east" crop="fill" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation width="250" height="250" gravity="south_east" crop="fill" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation width="250" height="250" gravity="south_east" crop="fill">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Gravity("south_east").Crop("fill")).BuildImageTag("sample.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setGravity("south_east").setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(250).height(250).gravity("south_east").crop("fill")).generate("sample.jpg");
Kotlin:
cloudinary.image {
publicId("sample.jpg")
resize(Resize.fill() {
width(250)
height(250)
gravity(Gravity.compass(Compass.southEast()))
})}.generate()
There are a number of special positions available to use as the focal point for image cropping, for example g_face to automatically detect the largest face in an image and make it the focus of the crop, and g_custom to use custom coordinates that were previously specified (e.g., as part of the image upload method) and make them the focus of the transformation.
For a full listing of the available gravity positions, see special positions in the transformation reference guide.
Setting the gravity transformation parameter to liquid (g_liquid in URLs), enables content-aware liquid rescaling (also sometimes known as 'seam carving'), which can be useful when changing the aspect ratio of an image. Normal scaling retains all image content even when aspect ratios change, so important elements of an image can be distorted. Liquid rescaling intelligently removes or duplicates 'seams' of pixels that may zig zag horizontally or vertically through the picture. The seams are determined using an algorithm that selects pixels with the least importance (least color change on either side of the seam). The result is an image where the most 'important' elements of the image are retained and generally do not appear distorted although the relative height or width of items in an image may change, especially if you significantly change the aspect ratio.
Tips and guidelines for liquid gravity:
- It can be used only in conjunction with c_scale.
- The
liquid gravity works best when applied to scenic images with large 'unbusy' sections such as sky, grass, or water.
- It also works best when applied to larger images. Thus, it is recommended to use this gravity to change aspect ratio using relative widths and heights, where one of the two dimensions remains at or close to
1.0. If you also want to resize the image, apply the resize on a different component of a chained transformation.
- In some cases, over-aggressive liquid rescaling can result in significant artifacts.
For example, using liquid scaling to change an image to a square (aspect ratio of 1:1) based on the original image width, and then resize the result to 500x500:
Ruby:
cl_image_tag("country_sunset.jpg", :transformation=>[
{:aspect_ratio=>"1.0", :gravity=>"liquid", :width=>1.0, :crop=>"scale"},
{:width=>500, :height=>500, :crop=>"scale"}
])
PHP v1:
cl_image_tag("country_sunset.jpg", array("transformation"=>array(
array("aspect_ratio"=>"1.0", "gravity"=>"liquid", "width"=>"1.0", "crop"=>"scale"),
array("width"=>500, "height"=>500, "crop"=>"scale")
)))
PHP v2:
(new ImageTag('country_sunset.jpg'))
->resize(Resize::scale()->width(1.0)->aspectRatio(1.0)->liquidRescaling(true))
->resize(Resize::scale()->width(500)->height(500));
Python:
CloudinaryImage("country_sunset.jpg").image(transformation=[
{'aspect_ratio': "1.0", 'gravity': "liquid", 'width': "1.0", 'crop': "scale"},
{'width': 500, 'height': 500, 'crop': "scale"}
])
Node.js:
cloudinary.image("country_sunset.jpg", {transformation: [
{aspect_ratio: "1.0", gravity: "liquid", width: "1.0", crop: "scale"},
{width: 500, height: 500, crop: "scale"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.aspectRatio("1.0").gravity("liquid").width(1.0).crop("scale").chain()
.width(500).height(500).crop("scale")).imageTag("country_sunset.jpg");
JS:
cloudinary.imageTag('country_sunset.jpg', {transformation: [
{aspectRatio: "1.0", gravity: "liquid", width: "1.0", crop: "scale"},
{width: 500, height: 500, crop: "scale"}
]}).toHtml();
jQuery:
$.cloudinary.image("country_sunset.jpg", {transformation: [
{aspect_ratio: "1.0", gravity: "liquid", width: "1.0", crop: "scale"},
{width: 500, height: 500, crop: "scale"}
]})
React:
<Image publicId="country_sunset.jpg" >
<Transformation aspectRatio="1.0" gravity="liquid" width="1.0" crop="scale" />
<Transformation width="500" height="500" crop="scale" />
</Image>
Vue.js:
<cld-image publicId="country_sunset.jpg" >
<cld-transformation aspectRatio="1.0" gravity="liquid" width="1.0" crop="scale" />
<cld-transformation width="500" height="500" crop="scale" />
</cld-image>
Angular:
<cl-image public-id="country_sunset.jpg" >
<cl-transformation aspect-ratio="1.0" gravity="liquid" width="1.0" crop="scale">
</cl-transformation>
<cl-transformation width="500" height="500" crop="scale">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.AspectRatio("1.0").Gravity("liquid").Width(1.0).Crop("scale").Chain()
.Width(500).Height(500).Crop("scale")).BuildImageTag("country_sunset.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setAspectRatio("1.0").setGravity("liquid").setWidth(1.0).setCrop("scale").chain()
.setWidth(500).setHeight(500).setCrop("scale")).generate("country_sunset.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation()
.aspectRatio("1.0").gravity("liquid").width(1.0).crop("scale").chain()
.width(500).height(500).crop("scale")).generate("country_sunset.jpg");
Kotlin:
cloudinary.image {
publicId("country_sunset.jpg")
resize(Resize.scale() {
width(1.0f)
aspectRatio(1.0f)
liquidRescaling()
})
resize(Resize.scale() {
width(500)
height(500)
})}.generate()
Cloudinary's intelligent gravity selection capabilities ensure that the most interesting areas of each image are selected as the main focus for the requested crop, not only for photos with faces, but for any content type. Each image is analyzed individually to find the optimal region to include while cropping. Automatically detected faces (or other elements) are, by default, given higher priority while analyzing the image content.
You apply automatic content-aware gravity by setting the gravity transformation parameter to auto (g_auto in URLs).
Here's an example of using automatic gravity when changing the aspect ratio of an image:
Original
w_200,h_300,c_fill,g_centerRegular fill
w_200,h_300,c_fill,g_autoAutomatic fill
Ruby:
cl_image_tag("basketball_in_net.jpg", :width=>200, :height=>300, :gravity=>"auto", :crop=>"fill")
PHP v1:
cl_image_tag("basketball_in_net.jpg", array("width"=>200, "height"=>300, "gravity"=>"auto", "crop"=>"fill"))
PHP v2:
(new ImageTag('basketball_in_net.jpg'))
->resize(Resize::fill()->width(200)->height(300)
->gravity(Gravity::autoGravity()));
Python:
CloudinaryImage("basketball_in_net.jpg").image(width=200, height=300, gravity="auto", crop="fill")
Node.js:
cloudinary.image("basketball_in_net.jpg", {width: 200, height: 300, gravity: "auto", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(300).gravity("auto").crop("fill")).imageTag("basketball_in_net.jpg");
JS:
cloudinary.imageTag('basketball_in_net.jpg', {width: 200, height: 300, gravity: "auto", crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("basketball_in_net.jpg", {width: 200, height: 300, gravity: "auto", crop: "fill"})
React:
<Image publicId="basketball_in_net.jpg" >
<Transformation width="200" height="300" gravity="auto" crop="fill" />
</Image>
Vue.js:
<cld-image publicId="basketball_in_net.jpg" >
<cld-transformation width="200" height="300" gravity="auto" crop="fill" />
</cld-image>
Angular:
<cl-image public-id="basketball_in_net.jpg" >
<cl-transformation width="200" height="300" gravity="auto" crop="fill">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(300).Gravity("auto").Crop("fill")).BuildImageTag("basketball_in_net.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(300).setGravity("auto").setCrop("fill")).generate("basketball_in_net.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(200).height(300).gravity("auto").crop("fill")).generate("basketball_in_net.jpg");
Kotlin:
cloudinary.image {
publicId("basketball_in_net.jpg")
resize(Resize.fill() {
width(200)
height(300)
gravity(Gravity.autoGravity())
})}.generate()
Automatic cropping is supported for the fill, lfill, fill_pad, thumb and crop modes.
- Automatic gravity can be further qualified with various focal gravity options, such as
g_auto:faces.
- If custom coordinates have been specified for an image (using the Upload API or the Management Console), the cropping or overlay will be based on that definition, taking the custom coordinates as-is and overriding the detection algorithm (the same as
g_custom). This applies to all focal_gravity options except for g_auto:custom_no_override and g_auto:none.
- You can add the getinfo flag (
fl_getinfo in URLs) in your transformation to return the proposed g_auto cropping results in JSON instead of delivering the transformed image. You can then integrate the g_auto results into an external workflow, for example to display the proposed g_auto crop as the initial cropping suggestion in an external editing tool.
- By default,
g_auto applies an optimal combination of our AI and saliency-based algorithms to capture the best region to include in your cropped image. However, in certain situations you may want to explicitly request only one of the auto-cropping algorithms and/or adjust the default focal preference of the chosen algorithm.
By default, both the saliency and subject auto-cropping algorithms give increased priority to detected faces. To adjust the focal preference of the automatic cropping algorithm, you can specify a different focal_gravity option.
For example, you can specify adv_face, adv_faces, or adv_eyes to instruct the algorithm to give priority to the eyes or faces detected by the Advanced Facial Attributes Detection add-on (as opposed to the coordinates selected by the built-in face-detection mechanism). Alternatively, you can use the value none if you don't want the algorithm to give special preference to any detected item, including faces.
If you are registered to the Cloudinary AI Content Analysis add-on, you can also instruct the gravity algorithm to give top priority to one or more specific objects or categories from an extensive list.
Additionally, the OCR Text Detection and Extraction Add-on lets you give a higher priority to text by setting the gravity qualifier to auto:ocr_text, while also giving priority to faces and other very prominent elements of an image.
For a complete list of all focal_gravity options, see the g_<special_position> section of the Transformation URL API Reference.
Use the fill mode with automatic gravity to keep most of the original image according to the requested dimensions of the derived image, ensuring that the most interesting regions of the original image are included in the resulting image.
Example of square aspect ratio cropping, regular vs. automatic:
Original
w_200,h_200,c_fill,g_centerRegular fill
w_200,h_200,c_fill,g_autoAutomatic fill
Ruby:
cl_image_tag("face_left.jpg", :width=>200, :height=>200, :gravity=>"auto", :crop=>"fill")
PHP v1:
cl_image_tag("face_left.jpg", array("width"=>200, "height"=>200, "gravity"=>"auto", "crop"=>"fill"))
PHP v2:
(new ImageTag('face_left.jpg'))
->resize(Resize::fill()->width(200)->height(200)
->gravity(Gravity::autoGravity()));
Python:
CloudinaryImage("face_left.jpg").image(width=200, height=200, gravity="auto", crop="fill")
Node.js:
cloudinary.image("face_left.jpg", {width: 200, height: 200, gravity: "auto", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(200).gravity("auto").crop("fill")).imageTag("face_left.jpg");
JS:
cloudinary.imageTag('face_left.jpg', {width: 200, height: 200, gravity: "auto", crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("face_left.jpg", {width: 200, height: 200, gravity: "auto", crop: "fill"})
React:
<Image publicId="face_left.jpg" >
<Transformation width="200" height="200" gravity="auto" crop="fill" />
</Image>
Vue.js:
<cld-image publicId="face_left.jpg" >
<cld-transformation width="200" height="200" gravity="auto" crop="fill" />
</cld-image>
Angular:
<cl-image public-id="face_left.jpg" >
<cl-transformation width="200" height="200" gravity="auto" crop="fill">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Gravity("auto").Crop("fill")).BuildImageTag("face_left.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setGravity("auto").setCrop("fill")).generate("face_left.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(200).height(200).gravity("auto").crop("fill")).generate("face_left.jpg");
Kotlin:
cloudinary.image {
publicId("face_left.jpg")
resize(Resize.fill() {
width(200)
height(200)
gravity(Gravity.autoGravity())
})}.generate()
You can also use automatic gravity with the
lfill cropping mode.
Use the thumb mode with automatic gravity to apply more aggressive cropping than the fill mode. This mode attempts to further zoom in and crop out less interesting image regions when relevant in order to include the most interesting objects in the resulting derived image. The automatic cropping algorithm decides whether and how aggressively to zoom-in and crop according to the content and cropping ratio of each image individually. A numerical value between 0 and 100 can be added to the g_auto parameter in order to advise the algorithm regarding the desired aggressiveness level (e.g., g_auto:0 for the most aggressive thumb cropping).
Example of a square thumbnail, regular vs. automatic cropping:
Original
c_thumb,g_center Regular thumbnail
c_thumb,g_auto Automatic thumbnail
c_thumb,g_auto:0 Automatic thumbnail - most aggressive
Ruby:
cl_image_tag("sunset_shoes.jpg", :width=>150, :height=>150, :gravity=>"auto:0", :crop=>"thumb")
PHP v1:
cl_image_tag("sunset_shoes.jpg", array("width"=>150, "height"=>150, "gravity"=>"auto:0", "crop"=>"thumb"))
Python:
CloudinaryImage("sunset_shoes.jpg").image(width=150, height=150, gravity="auto:0", crop="thumb")
Node.js:
cloudinary.image("sunset_shoes.jpg", {width: 150, height: 150, gravity: "auto:0", crop: "thumb"})
Java:
cloudinary.url().transformation(new Transformation().width(150).height(150).gravity("auto:0").crop("thumb")).imageTag("sunset_shoes.jpg");
JS:
cloudinary.imageTag('sunset_shoes.jpg', {width: 150, height: 150, gravity: "auto:0", crop: "thumb"}).toHtml();
jQuery:
$.cloudinary.image("sunset_shoes.jpg", {width: 150, height: 150, gravity: "auto:0", crop: "thumb"})
React:
<Image publicId="sunset_shoes.jpg" >
<Transformation width="150" height="150" gravity="auto:0" crop="thumb" />
</Image>
Vue.js:
<cld-image publicId="sunset_shoes.jpg" >
<cld-transformation width="150" height="150" gravity="auto:0" crop="thumb" />
</cld-image>
Angular:
<cl-image public-id="sunset_shoes.jpg" >
<cl-transformation width="150" height="150" gravity="auto:0" crop="thumb">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Gravity("auto:0").Crop("thumb")).BuildImageTag("sunset_shoes.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setGravity("auto:0").setCrop("thumb")).generate("sunset_shoes.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(150).height(150).gravity("auto:0").crop("thumb")).generate("sunset_shoes.jpg");
The numeric value supplied for
auto gravity together with
thumb cropping indicates your preference for more or less aggressive zooming and the algorithm takes that preference into account. However, the automatic gravity algorithm may still determine that for a particular image and aspect ratio, its default zoom selection is the appropriate zoom for this image. In such a case, you may not see a difference between the default
g_auto and
g_auto with a specific agressiveness level.
Use the crop mode with automatic gravity to crop a region of exactly the specified dimensions out of the original image while automatically focusing on the most interesting region of the original image that fits within the required dimensions. The portion of the interesting area depends on the resolution of the original image. The crop mode is less useful than the fill, lfill, and thumb modes, as it is only practical to use when both the dimensions of the original image and the size of the interesting region are already known.
Example of a square crop, regular vs. auto cropping:
Original
c_crop,g_center Regular crop
c_crop,g_auto Automatic crop
Ruby:
cl_image_tag("fat_cat.jpg", :width=>200, :height=>200, :gravity=>"auto", :crop=>"crop")
PHP v1:
cl_image_tag("fat_cat.jpg", array("width"=>200, "height"=>200, "gravity"=>"auto", "crop"=>"crop"))
PHP v2:
(new ImageTag('fat_cat.jpg'))
->resize(Resize::crop()->width(200)->height(200)
->gravity(Gravity::autoGravity()));
Python:
CloudinaryImage("fat_cat.jpg").image(width=200, height=200, gravity="auto", crop="crop")
Node.js:
cloudinary.image("fat_cat.jpg", {width: 200, height: 200, gravity: "auto", crop: "crop"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(200).gravity("auto").crop("crop")).imageTag("fat_cat.jpg");
JS:
cloudinary.imageTag('fat_cat.jpg', {width: 200, height: 200, gravity: "auto", crop: "crop"}).toHtml();
jQuery:
$.cloudinary.image("fat_cat.jpg", {width: 200, height: 200, gravity: "auto", crop: "crop"})
React:
<Image publicId="fat_cat.jpg" >
<Transformation width="200" height="200" gravity="auto" crop="crop" />
</Image>
Vue.js:
<cld-image publicId="fat_cat.jpg" >
<cld-transformation width="200" height="200" gravity="auto" crop="crop" />
</cld-image>
Angular:
<cl-image public-id="fat_cat.jpg" >
<cl-transformation width="200" height="200" gravity="auto" crop="crop">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Gravity("auto").Crop("crop")).BuildImageTag("fat_cat.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setGravity("auto").setCrop("crop")).generate("fat_cat.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation().width(200).height(200).gravity("auto").crop("crop")).generate("fat_cat.jpg");
Kotlin:
cloudinary.image {
publicId("fat_cat.jpg")
resize(Resize.crop() {
width(200)
height(200)
gravity(Gravity.autoGravity())
})}.generate()
The default g_auto option applies an optimal mixture of two different methods of identifying the most important region of your image:
- AI-based algorithm (subject) - Uses deep-learning algorithms to identify the subjects of an image that are most likely to attract a person's gaze.
- Saliency algorithm (classic) - Uses a combination of saliency heuristics, edge detection, light, skin-tone prioritization, and more to automatically detect and prioritize significant region(s) in the image.
In the majority of cases, the most salient elements in an image are also the main subjects of the photo, and thus both algorithms often produce very similar or identical results. However, in some cases, results can be somewhat different and therefore the weighted mixture that g_auto applies by default usually gives the best results.
But if you find that for the types of images you are delivering, one of the algorithms consistently gives a better result than the other, you can override the default combined mechanism and instead explicitly request your preferred algorithm by specifying auto:subject or auto:classic as the gravity value (g_auto:subject or g_auto:classic in URLs), with or without an additional focal gravity option.
For example, when cropping the landscape image below to a portrait view, the classic algorithm selects the areas with the most graphically salient spots, which include the tree against the bright blue and white sky, while the subject algorithm focuses on the subjects that the AI-engine predicts are most likely to capture human attention, primarily the boat, lake and mountains.
Original image
Default crop
(Center gravity)
Auto-gravity
Saliency (classic) method
Auto-gravity
AI-based subject method
Different devices support different DPR values, which is defined as the ratio between physical pixels and logical pixels. This means that a device with support for a higher DPR uses more physical pixels for displaying an image, resulting in a clearer, sharper image.
Use the dpr parameter to set the DPR value of the delivered image. The parameter accepts a numeric value specifying the DPR multiplier.
The dpr parameter is especially useful when adding overlays, as you need the overlay image to be correctly resized according to the required pixel density of the device (along with the containing image). Setting the dpr transformation parameter applies the same resizing rules both to the containing image, and the included overlay.
For example, the following URL dynamically generates a 100x100 face-detection-based circular thumbnail of an image named lady, and adds another image named cloudinary_icon_white as a semi-transparent watermark with a width of 50 pixels. Setting the dpr value to 1.0, 2.0 (as in the code example) or 3.0 generates the following images, while resizing both the containing image and the overlay to match the required DPR.
Ruby:
cl_image_tag("lady.jpg", :transformation=>[
{:width=>100, :height=>100, :gravity=>"face", :radius=>"max", :crop=>"thumb"},
{:overlay=>"cloudinary_icon_white", :effect=>"brightness:200", :flags=>"relative", :width=>0.5, :opacity=>60},
{:dpr=>2.0}
])
PHP v1:
cl_image_tag("lady.jpg", array("transformation"=>array(
array("width"=>100, "height"=>100, "gravity"=>"face", "radius"=>"max", "crop"=>"thumb"),
array("overlay"=>"cloudinary_icon_white", "effect"=>"brightness:200", "flags"=>"relative", "width"=>"0.5", "opacity"=>60),
array("dpr"=>"2.0")
)))
PHP v2:
(new ImageTag('lady.jpg'))
->resize(Resize::thumbnail()->width(100)->height(100)->gravity(Gravity::focusOn(FocusOn::face())))
->roundCorners(RoundCorners::max())
->overlay(
Overlay::source(Source::image('cloudinary_icon_white')
->transformation((new ImageTransformation())
->resize(Resize::scale()->width(0.5)->relative())
->adjust(Adjust::opacity(60))
->adjust(Adjust::brightness()->level(200)))))
->delivery(Delivery::dpr(2.0));
Python:
CloudinaryImage("lady.jpg").image(transformation=[
{'width': 100, 'height': 100, 'gravity': "face", 'radius': "max", 'crop': "thumb"},
{'overlay': "cloudinary_icon_white", 'effect': "brightness:200", 'flags': "relative", 'width': "0.5", 'opacity': 60},
{'dpr': "2.0"}
])
Node.js:
cloudinary.image("lady.jpg", {transformation: [
{width: 100, height: 100, gravity: "face", radius: "max", crop: "thumb"},
{overlay: "cloudinary_icon_white", effect: "brightness:200", flags: "relative", width: "0.5", opacity: 60},
{dpr: "2.0"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.width(100).height(100).gravity("face").radius("max").crop("thumb").chain()
.overlay(new Layer().publicId("cloudinary_icon_white")).effect("brightness:200").flags("relative").width(0.5).opacity(60).chain()
.dpr(2.0)).imageTag("lady.jpg");
JS:
cloudinary.imageTag('lady.jpg', {transformation: [
{width: 100, height: 100, gravity: "face", radius: "max", crop: "thumb"},
{overlay: new cloudinary.Layer().publicId("cloudinary_icon_white"), effect: "brightness:200", flags: "relative", width: "0.5", opacity: 60},
{dpr: "2.0"}
]}).toHtml();
jQuery:
$.cloudinary.image("lady.jpg", {transformation: [
{width: 100, height: 100, gravity: "face", radius: "max", crop: "thumb"},
{overlay: new cloudinary.Layer().publicId("cloudinary_icon_white"), effect: "brightness:200", flags: "relative", width: "0.5", opacity: 60},
{dpr: "2.0"}
]})
React:
<Image publicId="lady.jpg" >
<Transformation width="100" height="100" gravity="face" radius="max" crop="thumb" />
<Transformation overlay="cloudinary_icon_white" effect="brightness:200" flags="relative" width="0.5" opacity="60" />
<Transformation dpr="2.0" />
</Image>
Vue.js:
<cld-image publicId="lady.jpg" >
<cld-transformation width="100" height="100" gravity="face" radius="max" crop="thumb" />
<cld-transformation :overlay="cloudinary_icon_white" effect="brightness:200" flags="relative" width="0.5" opacity="60" />
<cld-transformation dpr="2.0" />
</cld-image>
Angular:
<cl-image public-id="lady.jpg" >
<cl-transformation width="100" height="100" gravity="face" radius="max" crop="thumb">
</cl-transformation>
<cl-transformation overlay="cloudinary_icon_white" effect="brightness:200" flags="relative" width="0.5" opacity="60">
</cl-transformation>
<cl-transformation dpr="2.0">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Width(100).Height(100).Gravity("face").Radius("max").Crop("thumb").Chain()
.Overlay(new Layer().PublicId("cloudinary_icon_white")).Effect("brightness:200").Flags("relative").Width(0.5).Opacity(60).Chain()
.Dpr(2.0)).BuildImageTag("lady.jpg")
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setWidth(100).setHeight(100).setGravity("face").setRadius("max").setCrop("thumb").chain()
.setOverlay("cloudinary_icon_white").setEffect("brightness:200").setFlags("relative").setWidth(0.5).setOpacity(60).chain()
.setDpr(2.0)).generate("lady.jpg")!, cloudinary: cloudinary)
Android:
MediaManager.get().url().transformation(new Transformation()
.width(100).height(100).gravity("face").radius("max").crop("thumb").chain()
.overlay(new Layer().publicId("cloudinary_icon_white")).effect("brightness:200").flags("relative").width(0.5).opacity(60).chain()
.dpr(2.0)).generate("lady.jpg");
Kotlin:
cloudinary.image {
publicId("lady.jpg")
resize(Resize.thumbnail() {
width(100)
height(100)
gravity(Gravity.focusOn(FocusOn.face()))
})
roundCorners(RoundCorners.max())
overlay(Overlay.source(Source.image("cloudinary_icon_white") {
transformation(ImageTransformation {
resize(Resize.scale() {
width(0.5f)
relative()
})
adjust(Adjust.opacity(60))
adjust(Adjust.brightness() {
level(200)
})
})
}))
delivery(Delivery.dpr(2.0f))}.generate()
DPR 1.0 DPR 2.0 DPR 3.0
Now you can create a 100x100 HTML image tag and deliver an image with the resolution that best matches the specified pixel density of your users' devices. The three images below are all displayed within a 100x100 logical square using the <img> tag width and height attributes, while you see more details and a better visual result for the last two images if you view this documentation using a device that supports a higher DPR.
<img
src="https://res.cloudinary.com/demo/image/upload/c_thumb,w_100,h_100,g_face,r_max/l_cloudinary_icon_white,e_brightness:200,w_50,o_60/dpr_2.0/lady.jpg"
height=100
width=100 />
DPR 1.0 (100x100, 4.1KB) DPR 2.0 (200x200, 10.1KB) DPR 3.0 (300x300, 22.3KB)
You can alternatively use dpr_auto to automatically deliver the best image, depending on the requesting device's support for DPR. For details, see the Responsive images documentation.
Original
Original
Original
Original
Original image
Default crop
Auto-gravity
Auto-gravity
