Counteracting a semi-transparent overlay

[tobefirst ⚽️]

I have an image that, let's say, looks like this:

When I put the image onto my website (a custom platform that I cannot change/edit) and add text, it adds a 60% opacity black layer over the top of it to make sure that the text has enough contrast, making it look like this:

Is there a way that I can manipulate the original image in Photoshop so that when the black semi-transparent layer is added, it will look like the original image?

I've played with a white layer using an overlay blend mode and that almost worked, but my layers were out of order (the white layer was above the black layer) and when I moved it, it didn't end up working as I'd hoped. Has anyone done something like this before? Any thoughts on how to do it that I can try? Anyone else want to try?

 

[poked]

I don’t believe so, specifically because the websites overlay is interfering with the image and will always overlay it. I can only suggest taking it to a different host site, or checking out the html that’s causing the opacity to shift when text is added, but since you can’t modify it, it won’t do much for you. Can you contact the platform developers and explain what you need?

 

[AngerDanger]

This is such an interesting thought experiment!

Like, yeah, it's technically possible, but not guaranteed to work for every image. It will absolutely work for any image that has no whites brighter than 60% white, but it comes at the cost of fidelity.

Here are a couple of attempts pretty much doing what you've already tried; there are two white layers set to overlay and a hue/saturation layers with the saturation bumped up a little bit.

First the original image, then a 60% black overlay, then the attempt to counteract. Were it not for the highlights on the cat's paws, it wouldn't be too bad.

If my understanding is correct, it's possible to do with a desaturated, 60% white image, but there's no way to get around the loss in fidelity.

Sorry I couldn't be of more help.

 

[tobefirst ⚽️]

This is such an interesting thought experiment!

Like, yeah, it's technically possible, but not guaranteed to work for every image. It will absolutely work for any image that has no whites brighter than 60% white, but it comes at the cost of fidelity.

Here are a couple of attempts pretty much doing what you've already tried; there are two white layers set to overlay and a hue/saturation layers with the saturation bumped up a little bit.

View attachment 1806370 View attachment 1806371

First the original image, then a 60% black overlay, then the attempt to counteract. Were it not for the highlights on the cat's paws, it wouldn't be too bad.

If my understanding is correct, it's possible to do with a desaturated, 60% white image, but there's no way to get around the loss in fidelity.

Sorry I couldn't be of more help.

Ah, yes. I forgot to mention the Hue/Saturation adjustment layer. I adjusted the saturation and the lightness and got great results on another image – not perfect, but well past "good enough."

But once I moved the adjustment layer and the white overlay under the black 60% opacity (which is the "order" things would be applied on the site), it didn't work out nearly as well.

It seems like there *should* be some combination of adjustments that could correct (within reason) for this. The image I upload to the site would, of course, look awful, but once the image is behind the semi-transparent layer, it would look "right."

 

[AngerDanger]

It seems like there *should* be some combination of adjustments that could correct (within reason) for this.

I think that's what makes this so interesting. To my understanding, the 60% opacity black is like taking the RGB data from the image below and multiplying them by .4 then adding them to 0,0,0 * .6.

The only way to get the same RGB values that you started out with is to multiply them by the… reciprocal of .4? So 2.5. Which is why there's a cap on the colors above 40% white (ignore the "60% white" I said in my previous post); you can't have RGB values higher than 255,255,255.

This got me thinking about 32-bit images; they won't restore whites above 40%, but it at least bumps the fidelity up a little bit. I tried a quick test and think it's an improvement. Not sure how a browser would handle images of higher color depth.

I guess the takeaways are that the 60% opacity rectangle does permanent damage to the image below if it's above a certain brightness because the pixel values of the PS'd image would have to be higher than is possible to counteract, and maybe 32-bit images are worth a try.

 

[Herbert123]

With an 8bit image colour gamut, the max white value will always be 40% in this case, just like @AngerDanger stated. The 8bit RGB value cannot go beyond a white that is RGB 255,255,255. And browsers work in 8bit colour space only, so it is what it is.

The real solution would be to inject simple CSS that increases or removes that 60% opacity, or completely hides that overlay element.

@tobefirst what kind of web platform/CMS are you using?

 

[Nermal]

And browsers work in 8bit colour space only

Depends on the browser. Safari has support for more than that: https://webkit.org/blog-files/color-gamut/

 

[Herbert123]

Depends on the browser. Safari has support for more than that: https://webkit.org/blog-files/color-gamut/

Interesting - did not know that. The question is then: does it allow for compositing with web elements at that higher bit depth as well? Are things like CSS opacity, CSS gradients, and CSS blend modes (for those that make sense) rendered at 16bpc?

Will do some research.