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.

With Cloudinary's image improvement filters and effects you can embed better looking images in your websites and mobile apps with ease. You can even mix and match multiple improvement filters together to create cool, "artistic" results. Tell Cloudinary to retouch images with a fully automated image improvement filter for adjusting image colors, contrast and lightness.

Here's an example of an original image that doesn't look optimal:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/gray_mountain.jpg

Ruby:

cl_image_tag("gray_mountain.jpg")

PHP:

cl_image_tag("gray_mountain.jpg")

Python:

CloudinaryImage("gray_mountain.jpg").image()

Node.js:

cloudinary.image("gray_mountain.jpg")

Java:

cloudinary.url().imageTag("gray_mountain.jpg");

JS:

cloudinary.imageTag('gray_mountain.jpg').toHtml();

jQuery:

$.cloudinary.image("gray_mountain.jpg")

React:

<Image publicId="gray_mountain.jpg" >

</Image>

Angular:

<cl-image public-id="gray_mountain.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("gray_mountain.jpg")

Android:

MediaManager.get().url().generate("gray_mountain.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("gray_mountain.jpg")!, cloudinary: cloudinary)

Applying Cloudinary's cloud-based 'improve' effect makes it look much better:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_improve/gray_mountain.jpg

Ruby:

cl_image_tag("gray_mountain.jpg", :effect=>"improve")

PHP:

cl_image_tag("gray_mountain.jpg", array("effect"=>"improve"))

Python:

CloudinaryImage("gray_mountain.jpg").image(effect="improve")

Node.js:

cloudinary.image("gray_mountain.jpg", {effect: "improve"})

Java:

cloudinary.url().transformation(new Transformation().effect("improve")).imageTag("gray_mountain.jpg");

JS:

cloudinary.imageTag('gray_mountain.jpg', {effect: "improve"}).toHtml();

jQuery:

$.cloudinary.image("gray_mountain.jpg", {effect: "improve"})

React:

<Image publicId="gray_mountain.jpg" >
  <Transformation effect="improve" />
</Image>

Angular:

<cl-image public-id="gray_mountain.jpg" >
  <cl-transformation effect="improve">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("improve")).BuildImageTag("gray_mountain.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("improve")).generate("gray_mountain.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("improve")).generate("gray_mountain.jpg")!, cloudinary: cloudinary)

Any further cloud-based image manipulations can be applied as well as chained transformations:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_improve/w_300,h_200,r_max/e_shadow/gray_mountain.jpg

Ruby:

cl_image_tag("gray_mountain.jpg", :transformation=>[
  {:effect=>"improve"},
  {:width=>300, :height=>200, :radius=>"max", :crop=>"scale"},
  {:effect=>"shadow"}
  ])

PHP:

cl_image_tag("gray_mountain.jpg", array("transformation"=>array(
  array("effect"=>"improve"),
  array("width"=>300, "height"=>200, "radius"=>"max", "crop"=>"scale"),
  array("effect"=>"shadow")
  )))

Python:

CloudinaryImage("gray_mountain.jpg").image(transformation=[
  {"effect": "improve"},
  {"width": 300, "height": 200, "radius": "max", "crop": "scale"},
  {"effect": "shadow"}
  ])

Node.js:

cloudinary.image("gray_mountain.jpg", {transformation: [
  {effect: "improve"},
  {width: 300, height: 200, radius: "max", crop: "scale"},
  {effect: "shadow"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .effect("improve").chain()
  .width(300).height(200).radius("max").crop("scale").chain()
  .effect("shadow")).imageTag("gray_mountain.jpg");

JS:

cloudinary.imageTag('gray_mountain.jpg', {transformation: [
  {effect: "improve"},
  {width: 300, height: 200, radius: "max", crop: "scale"},
  {effect: "shadow"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("gray_mountain.jpg", {transformation: [
  {effect: "improve"},
  {width: 300, height: 200, radius: "max", crop: "scale"},
  {effect: "shadow"}
  ]})

React:

<Image publicId="gray_mountain.jpg" >
  <Transformation effect="improve" />
  <Transformation width="300" height="200" radius="max" crop="scale" />
  <Transformation effect="shadow" />
</Image>

Angular:

<cl-image public-id="gray_mountain.jpg" >
  <cl-transformation effect="improve">
  </cl-transformation>
  <cl-transformation width="300" height="200" radius="max" crop="scale">
  </cl-transformation>
  <cl-transformation effect="shadow">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("improve").Chain()
  .Width(300).Height(200).Radius("max").Crop("scale").Chain()
  .Effect("shadow")).BuildImageTag("gray_mountain.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .effect("improve").chain()
  .width(300).height(200).radius("max").crop("scale").chain()
  .effect("shadow")).generate("gray_mountain.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("improve").chain()
  .setWidth(300).setHeight(200).setRadius("max").setCrop("scale").chain()
  .setEffect("shadow")).generate("gray_mountain.jpg")!, cloudinary: cloudinary)

Cloudinary Cookbook

Automatically improve photos