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:
cl_image_tag("nice_beach")
PHP:
cl_image_tag("nice_beach")
Python:
CloudinaryImage("nice_beach").image()
Node.js:
cloudinary.image("nice_beach")
Java:
cloudinary.url().imageTag("nice_beach")
JS:
cl.imageTag('nice_beach').toHtml();
jQuery:
$.cloudinary.image("nice_beach")
React:
<Image publicId="nice_beach" >

</Image>
Angular:
<cl-image public-id="nice_beach" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("nice_beach")
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:
cl_image_tag("nice_beach.gif")
PHP:
cl_image_tag("nice_beach.gif")
Python:
CloudinaryImage("nice_beach.gif").image()
Node.js:
cloudinary.image("nice_beach.gif")
Java:
cloudinary.url().imageTag("nice_beach.gif")
JS:
cl.imageTag('nice_beach.gif').toHtml();
jQuery:
$.cloudinary.image("nice_beach.gif")
React:
<Image publicId="nice_beach.gif" >

</Image>
Angular:
<cl-image public-id="nice_beach.gif" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("nice_beach.gif")
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:
cl_image_tag("nice_beach.png", :width=>200, :height=>200, :radius=>"max", :crop=>"fill")
PHP:
cl_image_tag("nice_beach.png", array("width"=>200, "height"=>200, "radius"=>"max", "crop"=>"fill"))
Python:
CloudinaryImage("nice_beach.png").image(width=200, height=200, radius="max", crop="fill")
Node.js:
cloudinary.image("nice_beach.png", {width: 200, height: 200, radius: "max", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(200).radius("max").crop("fill")).imageTag("nice_beach.png")
JS:
cl.imageTag('nice_beach.png', {width: 200, height: 200, radius: "max", crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("nice_beach.png", {width: 200, height: 200, radius: "max", crop: "fill"})
React:
<Image publicId="nice_beach.png" width="200" height="200" radius="max" crop="fill">
        <Transformation width=200 height=200 radius="max" crop="fill" />
</Image>
Angular:
<cl-image public-id="nice_beach.png" width="200" height="200" radius="max" crop="fill">
        <cl-transformation width=200 height=200 radius="max" crop="fill" />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Radius("max").Crop("fill")).BuildImageTag("nice_beach.png")
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:
cl_image_tag("nice_beach.jpg", :quality=>80)
PHP:
cl_image_tag("nice_beach.jpg", array("quality"=>80))
Python:
CloudinaryImage("nice_beach.jpg").image(quality=80)
Node.js:
cloudinary.image("nice_beach.jpg", {quality: 80})
Java:
cloudinary.url().transformation(new Transformation().quality(80)).imageTag("nice_beach.jpg")
JS:
cl.imageTag('nice_beach.jpg', {quality: 80}).toHtml();
jQuery:
$.cloudinary.image("nice_beach.jpg", {quality: 80})
React:
<Image publicId="nice_beach.jpg" quality="80">
        <Transformation quality=80 />
</Image>
Angular:
<cl-image public-id="nice_beach.jpg" quality="80">
        <cl-transformation quality=80 />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(80)).BuildImageTag("nice_beach.jpg")
JPG quality 80300x200  jpg  (11.1 KB)

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

Ruby:
cl_image_tag("nice_beach.jpg", :quality=>10)
PHP:
cl_image_tag("nice_beach.jpg", array("quality"=>10))
Python:
CloudinaryImage("nice_beach.jpg").image(quality=10)
Node.js:
cloudinary.image("nice_beach.jpg", {quality: 10})
Java:
cloudinary.url().transformation(new Transformation().quality(10)).imageTag("nice_beach.jpg")
JS:
cl.imageTag('nice_beach.jpg', {quality: 10}).toHtml();
jQuery:
$.cloudinary.image("nice_beach.jpg", {quality: 10})
React:
<Image publicId="nice_beach.jpg" quality="10">
        <Transformation quality=10 />
</Image>
Angular:
<cl-image public-id="nice_beach.jpg" quality="10">
        <cl-transformation quality=10 />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(10)).BuildImageTag("nice_beach.jpg")
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:
cl_image_tag("nice_beach", :format => :png)
PHP:
cl_image_tag("nice_beach", array("format" => "png"))
Python:
cloudinary.CloudinaryImage("nice_beach").image( format = "png")
Node.js:
cloudinary.image("nice_beach", { format: 'png' })
Java:
cloudinary.url().format("png").imageTag("nice_beach");
jQuery:
$.cloudinary.image("nice_beach", { format: 'png' });
.Net:
@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