Proposal - dim images with opacity

What is the Proposal?

Add dimming to images.

Why?

When browsing the web at night, often times you’ll run into images that have white or very bright backgrounds and are not png’s. Imagine browsing websites (example e-commerce/shopping) where they use large white backgrounds.

Solution

• Dim images slightly.
• Add a configurable option to toggle this feature on/off.

Potential Challenges

• jpg’s or images that don’t have bright backgrounds could become hard to read. I haven’t dug into how to solve that issue too much, but I know there are micro javascript libraries that can detect the color of images and analyze the brightness level, if we were to use something like that, we could check the brightness of the image after loading the page, to undo dimming, if the image doesn’t need to be dimmed.

CSS filters have strong support already. Most users who use dark reader, we can assume are on relatively newer browsers. If they know how to install an extension and find one like dark reader, we can make some assumptions =).

img {
	border-color: #000;
	box-shadow: none;
	-webkit-filter: brightness(0.8) contrast(1.2);
	filter: brightness(0.8) contrast(1.2);
}

Live demo code (JSbin.com): https://jsbin.com/naseresade/4/edit?html,output

[vyach-vasiliev]

Yes! Indeed, this stunning extension has saved my eyes more than once by nights! It would be great to have this functionality, albeit as an implicit setting.

In the meantime, I am using such a simple code that I pasted into the config editor.

img, video {
    filter: brightness(0.5);
}
img:hover, video:hover {
    filter: unset;
}

Hovering over an element returns the brightness so that you can better understand the context 👍

[WebMechanic]

this is a new way to waste CPU cycles and other resources.

so are browser extensions 😉

Actually CSS filters run on the GPU.