CODEWITHSUNDEEP
css
spacer GIF
spacer GIF

Reputation: 705

Is it possible to adjust the brightness and contrast of an image simultaneously?

This might be explained better with pictures than words, so please run the code snippet and see what I mean. When using an image editor I can adjust both the brightness and contrast of an image in one go, resulting in a bright and clear image. But when using CSS, the brightness and contrast are changed sequentially in two steps, giving poor results.

Is there any way of adjusting both brightness and contrast in CSS at the same time? Using SVG or some JavaScript solution would also be okay if necessary.

Original:<br>
<img src="https://i.imgur.com/uZP6Tdf.jpg" height="250"><br>

GIMP - 63 brightness and contrast:<br>
<img src="https://i.imgur.com/Ba8PHk2.png" height="250"><br>

CSS - 2 brightness, 2 contrast:<br>
<img src="https://i.imgur.com/uZP6Tdf.jpg" height="250" style="filter: brightness(2) contrast(2);"><br>

CSS - 2 contrast, 2 brightness:<br>
<img src="https://i.imgur.com/uZP6Tdf.jpg" height="250" style="filter: contrast(2) brightness(2);">

Upvotes: 3

Views: 1286

Answers (1)

mfluehr
mfluehr

Reputation: 3217

I'd recommend tweaking your CSS filter values until the appearance is more or less the same. I can't think of a more "scientific" way to do it, but I think the values I've used in the snippet below are very close to what you want.

Original:<br>
<img src="https://i.imgur.com/uZP6Tdf.jpg" height="250"><br>

GIMP - 63 brightness and contrast:<br>
<img src="https://i.imgur.com/Ba8PHk2.png" height="250"><br>

CSS:<br>
<img src="https://i.imgur.com/uZP6Tdf.jpg" height="250" style="filter: brightness(1.53) contrast(1.19);"><br>

Upvotes: 0

Related Questions