Automatically improve photos

Automatically improve the visual quality of your images using Cloudinary. Image improving is done by setting the effect parameter to improve (e_improve in URLs). All images and thumbnails of your website would seamlessly look much clearer and vivid.

Original

Original

Improved

Improved

Improved, cropped

Improved, cropped
Ruby:
Copy to clipboard
cl_image_tag("gray_mountain.jpg", :effect=>"improve")
PHP:
Copy to clipboard
cl_image_tag("gray_mountain.jpg", array("effect"=>"improve"))
Python:
Copy to clipboard
CloudinaryImage("gray_mountain.jpg").image(effect="improve")
Node.js:
Copy to clipboard
cloudinary.image("gray_mountain.jpg", {effect: "improve"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("improve")).imageTag("gray_mountain.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('gray_mountain.jpg', {effect: "improve"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("gray_mountain.jpg", {effect: "improve"})
React:
Copy to clipboard
<Image publicId="gray_mountain.jpg" >
  <Transformation effect="improve" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="gray_mountain.jpg" >
  <cld-transformation effect="improve" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="gray_mountain.jpg" >
  <cl-transformation effect="improve">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("improve")).BuildImageTag("gray_mountain.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("improve")).generate("gray_mountain.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("improve")).generate("gray_mountain.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Adjust image brightness

Dynamically adjust the brightness of an image. Either manually set the brightness level, or tell Cloudinary to automatically balance the brightness level. Brightness level change can be manually applied by setting the effect parameter to brightness (e_brightness in URLs), or by using the auto_brightness effect for automatic brightness adjustment.

Original

Original

30% brighter

30% brighter

50% darker

50% darker
Ruby:
Copy to clipboard
cl_image_tag("mountain.jpg", :effect=>"brightness:30")
PHP:
Copy to clipboard
cl_image_tag("mountain.jpg", array("effect"=>"brightness:30"))
Python:
Copy to clipboard
CloudinaryImage("mountain.jpg").image(effect="brightness:30")
Node.js:
Copy to clipboard
cloudinary.image("mountain.jpg", {effect: "brightness:30"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("brightness:30")).imageTag("mountain.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('mountain.jpg', {effect: "brightness:30"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("mountain.jpg", {effect: "brightness:30"})
React:
Copy to clipboard
<Image publicId="mountain.jpg" >
  <Transformation effect="brightness:30" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="mountain.jpg" >
  <cld-transformation effect="brightness:30" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="mountain.jpg" >
  <cl-transformation effect="brightness:30">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("brightness:30")).BuildImageTag("mountain.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("brightness:30")).generate("mountain.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("brightness:30")).generate("mountain.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Customize color saturation

Saturation level of images can be easily increased or decreased on-the-fly. This can be done by setting the effect parameter to saturation (e_saturation in URLs). Saturation levels can be customized by specifying the saturation percentage, either positive or negative.

Original

Original

+60% Saturation

+60% Saturation

-60% Saturation

-60% Saturation
Ruby:
Copy to clipboard
cl_image_tag("vegetable_soup.jpg", :effect=>"saturation:60")
PHP:
Copy to clipboard
cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:60"))
Python:
Copy to clipboard
CloudinaryImage("vegetable_soup.jpg").image(effect="saturation:60")
Node.js:
Copy to clipboard
cloudinary.image("vegetable_soup.jpg", {effect: "saturation:60"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("saturation:60")).imageTag("vegetable_soup.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('vegetable_soup.jpg', {effect: "saturation:60"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("vegetable_soup.jpg", {effect: "saturation:60"})
React:
Copy to clipboard
<Image publicId="vegetable_soup.jpg" >
  <Transformation effect="saturation:60" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="vegetable_soup.jpg" >
  <cld-transformation effect="saturation:60" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="vegetable_soup.jpg" >
  <cl-transformation effect="saturation:60">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("saturation:60")).BuildImageTag("vegetable_soup.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("saturation:60")).generate("vegetable_soup.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("saturation:60")).generate("vegetable_soup.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Sharpen an image

Use Cloudinary to sharpen your images easily and dynamically. Image sharpening can be applied by setting the effect parameter to sharpen (e_sharpen in URLs). A custom sharpen level can be set in order to get the exact effect you need.

Original

Original

Sharpened

Sharpened

Sharpened more

Sharpened more
Ruby:
Copy to clipboard
cl_image_tag("front_face.jpg", :effect=>"sharpen")
PHP:
Copy to clipboard
cl_image_tag("front_face.jpg", array("effect"=>"sharpen"))
Python:
Copy to clipboard
CloudinaryImage("front_face.jpg").image(effect="sharpen")
Node.js:
Copy to clipboard
cloudinary.image("front_face.jpg", {effect: "sharpen"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("sharpen")).imageTag("front_face.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('front_face.jpg', {effect: "sharpen"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("front_face.jpg", {effect: "sharpen"})
React:
Copy to clipboard
<Image publicId="front_face.jpg" >
  <Transformation effect="sharpen" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="front_face.jpg" >
  <cld-transformation effect="sharpen" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="front_face.jpg" >
  <cl-transformation effect="sharpen">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sharpen")).BuildImageTag("front_face.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("sharpen")).generate("front_face.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("sharpen")).generate("front_face.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