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:

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

URL:

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

Ruby:

cl_image_tag("mountain.jpg")

PHP:

cl_image_tag("mountain.jpg")

Python:

CloudinaryImage("mountain.jpg").image()

Node.js:

cloudinary.image("mountain.jpg")

Java:

cloudinary.url().imageTag("mountain.jpg")

JS:

cl.imageTag('mountain.jpg').toHtml();

jQuery:

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

React:

<Image publicId="mountain.jpg" >

</Image>

Angular:

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

</cl-image>

.Net:

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

Android:

MediaManager.get().url().generate("mountain.jpg")

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

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

URL:

https://res.cloudinary.com/demo/image/upload/e_brightness:30/mountain.jpg

Ruby:

cl_image_tag("mountain.jpg", :effect=>"brightness:30")

PHP:

cl_image_tag("mountain.jpg", array("effect"=>"brightness:30"))

Python:

CloudinaryImage("mountain.jpg").image(effect="brightness:30")

Node.js:

cloudinary.image("mountain.jpg", {effect: "brightness:30"})

Java:

cloudinary.url().transformation(new Transformation().effect("brightness:30")).imageTag("mountain.jpg")

JS:

cl.imageTag('mountain.jpg', {effect: "brightness:30"}).toHtml();

jQuery:

$.cloudinary.image("mountain.jpg", {effect: "brightness:30"})

React:

<Image publicId="mountain.jpg" >
  <Transformation effect="brightness:30" />
</Image>

Angular:

<cl-image public-id="mountain.jpg" >
  <cl-transformation effect="brightness:30">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("brightness:30")).BuildImageTag("mountain.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("brightness:30")).generate("mountain.jpg")

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

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

URL:

https://res.cloudinary.com/demo/image/upload/e_brightness:-50/mountain.jpg

Ruby:

cl_image_tag("mountain.jpg", :effect=>"brightness:-50")

PHP:

cl_image_tag("mountain.jpg", array("effect"=>"brightness:-50"))

Python:

CloudinaryImage("mountain.jpg").image(effect="brightness:-50")

Node.js:

cloudinary.image("mountain.jpg", {effect: "brightness:-50"})

Java:

cloudinary.url().transformation(new Transformation().effect("brightness:-50")).imageTag("mountain.jpg")

JS:

cl.imageTag('mountain.jpg', {effect: "brightness:-50"}).toHtml();

jQuery:

$.cloudinary.image("mountain.jpg", {effect: "brightness:-50"})

React:

<Image publicId="mountain.jpg" >
  <Transformation effect="brightness:-50" />
</Image>

Angular:

<cl-image public-id="mountain.jpg" >
  <cl-transformation effect="brightness:-50">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("brightness:-50")).BuildImageTag("mountain.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("brightness:-50")).generate("mountain.jpg")

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

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

URL:

https://res.cloudinary.com/demo/image/upload/e_brightness/mountain.jpg

Ruby:

cl_image_tag("mountain.jpg", :effect=>"brightness")

PHP:

cl_image_tag("mountain.jpg", array("effect"=>"brightness"))

Python:

CloudinaryImage("mountain.jpg").image(effect="brightness")

Node.js:

cloudinary.image("mountain.jpg", {effect: "brightness"})

Java:

cloudinary.url().transformation(new Transformation().effect("brightness")).imageTag("mountain.jpg")

JS:

cl.imageTag('mountain.jpg', {effect: "brightness"}).toHtml();

jQuery:

$.cloudinary.image("mountain.jpg", {effect: "brightness"})

React:

<Image publicId="mountain.jpg" >
  <Transformation effect="brightness" />
</Image>

Angular:

<cl-image public-id="mountain.jpg" >
  <cl-transformation effect="brightness">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("brightness")).BuildImageTag("mountain.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("brightness")).generate("mountain.jpg")

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

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

URL:

https://res.cloudinary.com/demo/image/upload/e_auto_brightness/mountain.jpg

Ruby:

cl_image_tag("mountain.jpg", :effect=>"auto_brightness")

PHP:

cl_image_tag("mountain.jpg", array("effect"=>"auto_brightness"))

Python:

CloudinaryImage("mountain.jpg").image(effect="auto_brightness")

Node.js:

cloudinary.image("mountain.jpg", {effect: "auto_brightness"})

Java:

cloudinary.url().transformation(new Transformation().effect("auto_brightness")).imageTag("mountain.jpg")

JS:

cl.imageTag('mountain.jpg', {effect: "auto_brightness"}).toHtml();

jQuery:

$.cloudinary.image("mountain.jpg", {effect: "auto_brightness"})

React:

<Image publicId="mountain.jpg" >
  <Transformation effect="auto_brightness" />
</Image>

Angular:

<cl-image public-id="mountain.jpg" >
  <cl-transformation effect="auto_brightness">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("auto_brightness")).BuildImageTag("mountain.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("auto_brightness")).generate("mountain.jpg")

Cloudinary Cookbook

Adjust image brightness