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.

GIF

GIF

Circle cropped PNG

Circle cropped PNG

Low quality JPG

Low quality JPG
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)
by Itay Taragano

Convert PDF to JPG

Convert your PDF files to a JPG thumbnail by simply switching the extension of the file to JPG. You can also specify the target thumbnail dimensions using the width and height parameters and any available crop mode. If your PDF file has multiple pages, you can specify the specific page to convert using the page parameter (pg in URLs). For example: Multi-page

PDF thumbnail

PDF thumbnail

With overlays

With overlays

Multi-page

Multi-page
Ruby:
Copy to clipboard
cl_image_tag("multi_page_pdf.jpg", :width=>200, :height=>250, :page=>2, :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("multi_page_pdf.jpg", array("width"=>200, "height"=>250, "page"=>2, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("multi_page_pdf.jpg").image(width=200, height=250, page=2, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).imageTag("multi_page_pdf.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('multi_page_pdf.jpg', {width: 200, height: 250, page: 2, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
React:
Copy to clipboard
<Image publicId="multi_page_pdf.jpg" >
  <Transformation width="200" height="250" page="2" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="multi_page_pdf.jpg" >
  <cld-transformation width="200" height="250" page="2" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="multi_page_pdf.jpg" >
  <cl-transformation width="200" height="250" page="2" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(250).Page(2).Crop("fill")).BuildImageTag("multi_page_pdf.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).generate("multi_page_pdf.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(250).setPage(2).setCrop("fill")).generate("multi_page_pdf.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Streamlining the Process of Product Image Creation

Whether you've just launched a Shopify site for your latest product, or you're a multibillion dollar retailer with expansive design teams, you probably have significant room to improve and make more efficient the process of how raw photographs are transformed into compelling images on your website’s product pages.

Photo with Background Removed

Photo with Background Removed

Photo with Background Removed

Photo with Background Removed

Processed Product Photo

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

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

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

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("wood_chair_orig.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("wood_chair_orig.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("wood_chair_orig.jpg")!, cloudinary: cloudinary)
by Josh Slivken