Resize an image

Resize your images by setting the width and/or height parameters (w and h in URLs). When resizing using Cloudinary's URL-based transformations, Cloudinary will automatically apply the scale crop mode. Alternatively, you can use any one of our many supported crop modes.

Resizing an image can be easily done on-the-fly in the cloud. Resize an image by setting the width and height parameter, or by setting the percentage of the scaling ratio.

Here's an original image:

Ruby:
cl_image_tag("turtles.jpg")
PHP:
cl_image_tag("turtles.jpg")
Python:
CloudinaryImage("turtles.jpg").image()
Node.js:
cloudinary.image("turtles.jpg")
Java:
cloudinary.url().imageTag("turtles.jpg")
JS:
cl.imageTag('turtles.jpg').toHtml();
jQuery:
$.cloudinary.image("turtles.jpg")
React:
<Image publicId="turtles.jpg" >

</Image>
Angular:
<cl-image public-id="turtles.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("turtles.jpg")
Original

To resize your image. specify the width and the height parameters (w and h in URLs):

Ruby:
cl_image_tag("turtles.jpg", :width=>70, :height=>53, :crop=>"scale")
PHP:
cl_image_tag("turtles.jpg", array("width"=>70, "height"=>53, "crop"=>"scale"))
Python:
CloudinaryImage("turtles.jpg").image(width=70, height=53, crop="scale")
Node.js:
cloudinary.image("turtles.jpg", {width: 70, height: 53, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(70).height(53).crop("scale")).imageTag("turtles.jpg")
JS:
cl.imageTag('turtles.jpg', {width: 70, height: 53, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("turtles.jpg", {width: 70, height: 53, crop: "scale"})
React:
<Image publicId="turtles.jpg" >
  <Transformation width="70" height="53" crop="scale" />
</Image>
Angular:
<cl-image public-id="turtles.jpg" >
  <cl-transformation width="70" height="53" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(70).Height(53).Crop("scale")).BuildImageTag("turtles.jpg")
Scaled

The scale crop mode keeps all parts of the image visible. In this case, specifying 'width' and 'height' values which do not match the original image's ratio may result a stretched / shrunken image:

Ruby:
cl_image_tag("turtles.jpg", :width=>400, :height=>120, :crop=>"scale")
PHP:
cl_image_tag("turtles.jpg", array("width"=>400, "height"=>120, "crop"=>"scale"))
Python:
CloudinaryImage("turtles.jpg").image(width=400, height=120, crop="scale")
Node.js:
cloudinary.image("turtles.jpg", {width: 400, height: 120, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(400).height(120).crop("scale")).imageTag("turtles.jpg")
JS:
cl.imageTag('turtles.jpg', {width: 400, height: 120, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("turtles.jpg", {width: 400, height: 120, crop: "scale"})
React:
<Image publicId="turtles.jpg" >
  <Transformation width="400" height="120" crop="scale" />
</Image>
Angular:
<cl-image public-id="turtles.jpg" >
  <cl-transformation width="400" height="120" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(120).Crop("scale")).BuildImageTag("turtles.jpg")
Stretched

Cloudinary supports specifying just the 'width' or 'height' parameter, instead of both. This will ensure that the original aspect ratio is maintained:

Ruby:
cl_image_tag("turtles.jpg", :width=>200, :crop=>"scale")
PHP:
cl_image_tag("turtles.jpg", array("width"=>200, "crop"=>"scale"))
Python:
CloudinaryImage("turtles.jpg").image(width=200, crop="scale")
Node.js:
cloudinary.image("turtles.jpg", {width: 200, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(200).crop("scale")).imageTag("turtles.jpg")
JS:
cl.imageTag('turtles.jpg', {width: 200, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("turtles.jpg", {width: 200, crop: "scale"})
React:
<Image publicId="turtles.jpg" >
  <Transformation width="200" crop="scale" />
</Image>
Angular:
<cl-image public-id="turtles.jpg" >
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Crop("scale")).BuildImageTag("turtles.jpg")
Specifying width only

You can change the dimensions of an image by a specified multiplier. Simply use a decimal value to define your required size. Here as well, you can provide only the width or height parameters instead of both of them:

Ruby:
cl_image_tag("turtles.jpg", :width=>0.4, :crop=>"scale")
PHP:
cl_image_tag("turtles.jpg", array("width"=>0.4, "crop"=>"scale"))
Python:
CloudinaryImage("turtles.jpg").image(width=0.4, crop="scale")
Node.js:
cloudinary.image("turtles.jpg", {width: "0.4", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(0.4).crop("scale")).imageTag("turtles.jpg")
JS:
cl.imageTag('turtles.jpg', {width: "0.4", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("turtles.jpg", {width: "0.4", crop: "scale"})
React:
<Image publicId="turtles.jpg" >
  <Transformation width="0.4" crop="scale" />
</Image>
Angular:
<cl-image public-id="turtles.jpg" >
  <cl-transformation width="0.4" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.4).Crop("scale")).BuildImageTag("turtles.jpg")
Resize2

Scaling can also be used to enlarge an image. For example by setting the width parameter to a value higher than the original width:

Ruby:
cl_image_tag("turtles.jpg", :width=>450, :crop=>"scale")
PHP:
cl_image_tag("turtles.jpg", array("width"=>450, "crop"=>"scale"))
Python:
CloudinaryImage("turtles.jpg").image(width=450, crop="scale")
Node.js:
cloudinary.image("turtles.jpg", {width: 450, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(450).crop("scale")).imageTag("turtles.jpg")
JS:
cl.imageTag('turtles.jpg', {width: 450, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("turtles.jpg", {width: 450, crop: "scale"})
React:
<Image publicId="turtles.jpg" >
  <Transformation width="450" crop="scale" />
</Image>
Angular:
<cl-image public-id="turtles.jpg" >
  <cl-transformation width="450" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(450).Crop("scale")).BuildImageTag("turtles.jpg")
Scale-up by dimension

You can also enlarge the image by setting the percentage to a higher value than '1.0':

Ruby:
cl_image_tag("turtles.jpg", :width=>1.4, :crop=>"scale")
PHP:
cl_image_tag("turtles.jpg", array("width"=>1.4, "crop"=>"scale"))
Python:
CloudinaryImage("turtles.jpg").image(width=1.4, crop="scale")
Node.js:
cloudinary.image("turtles.jpg", {width: "1.4", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(1.4).crop("scale")).imageTag("turtles.jpg")
JS:
cl.imageTag('turtles.jpg', {width: "1.4", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("turtles.jpg", {width: "1.4", crop: "scale"})
React:
<Image publicId="turtles.jpg" >
  <Transformation width="1.4" crop="scale" />
</Image>
Angular:
<cl-image public-id="turtles.jpg" >
  <cl-transformation width="1.4" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(1.4).Crop("scale")).BuildImageTag("turtles.jpg")
Scale-up by percentage

by Itay Taragano