Image Brightness & Contrast Editor

A photo shot indoors usually comes back a stop or two under, and the fix is three sliders rather than a whole editor. Image Brightness & Contrast Editor gives you brightness, contrast and saturation, each running from −100 to +100, and redraws the canvas on every drag. The file stays on your machine.

What separates this from a preset filter is the Equivalent CSS card under the preview. The pixel maths follows the CSS filter specification in the order a browser applies it, so a printed declaration such as filter: brightness(1.18) contrast(1.06); reproduces what you are looking at when you paste it into a stylesheet. You can dial a look in against a real photograph and then ship the two lines of CSS instead of a re-encoded asset.

Downloads re-render at the image's natural size, so the preview cap never reaches the file you save. A 4000 × 3000 photograph exports at 4000 × 3000.

What Each Slider Does to Your Pixels

• Brightness multiplies every channel by a factor between 0 and 2. At −100 the picture is black, at 0 it is untouched, at +100 every value doubles and highlights clip to white.
• Contrast pushes values away from mid-grey. Below zero it pulls them toward 127.5 until the whole frame is flat grey at −100.
• Saturation blends each pixel toward its own luminance. At −100 you get greyscale by the Rec. 709 weights, which is a more faithful desaturation than averaging the three channels.
• Five Presets set all three at once. Punch is contrast +28 with saturation +18; Low Light is brightness +35 with a small contrast lift to stop the shadows going milky.
• The one most people miss: Hold to compare is a press-and-hold control, not a toggle. Keep the mouse down to see the untouched original and release to snap back, which is faster than resetting the sliders to check whether an edit helped.

The Three Formulas the Sliders Run

Each slider maps to a multiplier k = 1 + slider / 100, giving the 0 to 2 range CSS filter functions expect. The channels then pass through, in this order:

• brightness(k) → v × k
• contrast(k) → (v − 127.5) × k + 127.5
• saturate(k) → the luminance matrix from the filter-effects specification, weighting red at 0.213, green at 0.715 and blue at 0.072

Brightness and contrast are identical across red, green and blue, so both collapse into a single 256-entry lookup table built once per redraw rather than recomputed for every pixel. Order matters: contrast after brightness is not the same picture as brightness after contrast, and this follows the browser.

Preview Size, Export Size and the 10 MB Ceiling

• The on-screen canvas is capped at 900 px on its longest edge. That keeps dragging responsive on a 24-megapixel file, since a full-resolution redraw on every slider step would stutter.
• Pressing Download re-renders from the original element at full resolution, so the cap is a preview device only. JPEG and WebP sources save as JPEG at quality 0.95; a PNG source stays a PNG.
• Files above ten megabytes are refused with "That image is larger than the 10 MB ceiling." A non-image, or a JPEG renamed from something else, reports that it could not be decoded instead.
• Adjustments are destructive once downloaded, in the sense that the saved file carries the new pixel values. Keep the original if you want to revisit the edit later.