Converting an image format

Convert your images to any other format either by simply changing the extension of the file, or by setting the format parameter. You can either covert the image's format while uploading or upload the image as is and dynamically convert its format on delivery.

Static or dynamic image are uploaded to Cloudinary in various formats. You might want to dynamically convert them for displaying in your web site in your desired format.

Here's the original image, when not specifying the extension part, the image will be delivered as the original format (in this example - JPG):

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

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="nice_beach" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="nice_beach" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("nice_beach")
Android:
Copy to clipboard
MediaManager.get().url().generate("nice_beach");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("nice_beach")!, cloudinary: cloudinary)
Original (JPG)300x200  jpg  (16.3 KB)

In order to deliver it as any other format, simply set the format as the extension of the file name:

Ruby:
Copy to clipboard
cl_image_tag("nice_beach.gif")
PHP:
Copy to clipboard
cl_image_tag("nice_beach.gif")
Python:
Copy to clipboard
CloudinaryImage("nice_beach.gif").image()
Node.js:
Copy to clipboard
cloudinary.image("nice_beach.gif")
Java:
Copy to clipboard
cloudinary.url().imageTag("nice_beach.gif");
JS:
Copy to clipboard
cloudinary.imageTag('nice_beach.gif').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("nice_beach.gif")
React:
Copy to clipboard
<Image publicId="nice_beach.gif" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="nice_beach.gif" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="nice_beach.gif" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("nice_beach.gif")
Android:
Copy to clipboard
MediaManager.get().url().generate("nice_beach.gif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("nice_beach.gif")!, cloudinary: cloudinary)
GIF300x200  GIF  (37 KB)

When you need to display high quality illustrations with a transparent background, the PNG (24 bit) format is probably the best choice. Note that PNG is usually expensive in file size, which affects your bandwidth: Here's an example of the same image, converted to PNG, scaled down and cropped to a shape of a circle. Note that PNG supports transparent background:

Ruby:
Copy to clipboard
cl_image_tag("nice_beach.png", :width=>200, :height=>200, :radius=>"max", :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("nice_beach.png", array("width"=>200, "height"=>200, "radius"=>"max", "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("nice_beach.png").image(width=200, height=200, radius="max", crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("nice_beach.png", {width: 200, height: 200, radius: "max", crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(200).height(200).radius("max").crop("fill")).imageTag("nice_beach.png");
JS:
Copy to clipboard
cloudinary.imageTag('nice_beach.png', {width: 200, height: 200, radius: "max", crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("nice_beach.png", {width: 200, height: 200, radius: "max", crop: "fill"})
React:
Copy to clipboard
<Image publicId="nice_beach.png" >
  <Transformation width="200" height="200" radius="max" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="nice_beach.png" >
  <cld-transformation width="200" height="200" radius="max" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="nice_beach.png" >
  <cl-transformation width="200" height="200" radius="max" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Radius("max").Crop("fill")).BuildImageTag("nice_beach.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(200).height(200).radius("max").crop("fill")).generate("nice_beach.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(200).setRadius("max").setCrop("fill")).generate("nice_beach.png")!, cloudinary: cloudinary)
Circle cropped PNG200x200  png  (54.5 KB)

You might want to use a low quality JPG format to deliver your images much quicker as they are smaller in size (which saves lots of bandwidth). This is done with the quality parameter (q in URLs):

Ruby:
Copy to clipboard
cl_image_tag("nice_beach.jpg", :quality=>80)
PHP:
Copy to clipboard
cl_image_tag("nice_beach.jpg", array("quality"=>80))
Python:
Copy to clipboard
CloudinaryImage("nice_beach.jpg").image(quality=80)
Node.js:
Copy to clipboard
cloudinary.image("nice_beach.jpg", {quality: 80})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().quality(80)).imageTag("nice_beach.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('nice_beach.jpg', {quality: 80}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("nice_beach.jpg", {quality: 80})
React:
Copy to clipboard
<Image publicId="nice_beach.jpg" >
  <Transformation quality="80" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="nice_beach.jpg" >
  <cld-transformation quality="80" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="nice_beach.jpg" >
  <cl-transformation quality="80">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(80)).BuildImageTag("nice_beach.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().quality(80)).generate("nice_beach.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(80)).generate("nice_beach.jpg")!, cloudinary: cloudinary)
JPG quality 80300x200  jpg  (11.1 KB)

Setting the 'quality' parameter to a too low value might be noticeable:

Ruby:
Copy to clipboard
cl_image_tag("nice_beach.jpg", :quality=>10)
PHP:
Copy to clipboard
cl_image_tag("nice_beach.jpg", array("quality"=>10))
Python:
Copy to clipboard
CloudinaryImage("nice_beach.jpg").image(quality=10)
Node.js:
Copy to clipboard
cloudinary.image("nice_beach.jpg", {quality: 10})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().quality(10)).imageTag("nice_beach.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('nice_beach.jpg', {quality: 10}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("nice_beach.jpg", {quality: 10})
React:
Copy to clipboard
<Image publicId="nice_beach.jpg" >
  <Transformation quality="10" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="nice_beach.jpg" >
  <cld-transformation quality="10" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="nice_beach.jpg" >
  <cl-transformation quality="10">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(10)).BuildImageTag("nice_beach.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().quality(10)).generate("nice_beach.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(10)).generate("nice_beach.jpg")!, cloudinary: cloudinary)
Low quality JPG300x200  jpg  (2.44 KB)

Note that 'nice_beach' is the Public ID of the resource and '.jpg' is the extension that represents the format required for the delivery.

When using the API, you can also convert the image's format by setting the format parameter:

Ruby:
Copy to clipboard
cl_image_tag("nice_beach", :format => :png)
PHP:
Copy to clipboard
cl_image_tag("nice_beach", array("format" => "png"))
Python:
Copy to clipboard
cloudinary.CloudinaryImage("nice_beach").image( format = "png")
Node.js:
Copy to clipboard
cloudinary.image("nice_beach", { format: 'png' })
Java:
Copy to clipboard
cloudinary.url().format("png").imageTag("nice_beach");
jQuery:
Copy to clipboard
$.cloudinary.image("nice_beach", { format: 'png' });
.Net:
Copy to clipboard
@Model.Cloudinary.Api.UrlImgUp.Format("png").BuildImageTag("nice_beach")

Cloudinary currently supports the following formats: JPG, PNG, GIF, BMP, TIFF, ICO, PDF, EPS, PSD, SVG, WebP, JXR, and WDP.

by Itay Taragano