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.

Here's an original image example:

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

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

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

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

Below you can see the same image while increasing brightness by 30%:

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)
30% brighter

And here it is when decreasing the brightness level by 50%:

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

If you don't specify a custom brightness level, the default level of 80% is applied:

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

You can also tell Cloudinary to automatically detect and apply the optimal brightness level:

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

by Itay Taragano