Adjustments that respond immediately
Every control here updates the preview as you drag it, at any image size. That is not an optimisation detail so much as the difference between an editor you can actually judge by eye and one where you set a number, wait, and guess again.
It works because the adjustments run through the browser's canvas filter pipeline — the same optimised graphics path that powers CSS effects, executing in the compositor rather than in JavaScript. A 24-megapixel photo re-filters in milliseconds. Doing the same arithmetic in a loop over the pixel array would take seconds per adjustment and lock up the page while it ran.
What the preview guarantees
The preview and the exported file run the same filter string against the same source image. The only difference between them is the size of the canvas being drawn onto.
This matters because it is a common place for editors to disappoint. Many preview a downscaled proxy through an approximation of the real pipeline, which is fast but means the export can come back slightly different — usually in exactly the way you were trying to control. Here there is one pipeline, so there is nothing to diverge.
What each control does
- Brightness — scales every channel. Above 100% lifts the whole image, which can clip highlights to pure white irrecoverably.
- Contrast — pushes values away from mid-grey. Adds punch, at the cost of shadow and highlight detail.
- Saturation — intensity of colour. Zero gives you greyscale by a different route than the grayscale slider, weighting channels for perceived brightness.
- Hue — rotates every colour around the wheel. Small amounts correct a colour cast; large amounts are an effect.
- Sepia — maps toward warm brown. The classic aged look, best at 30–50% rather than full strength.
- Grayscale — removes colour using perceptual weighting, so a red and a blue of equal brightness stay distinguishable.
- Invert — flips every value. Full strength gives a photographic negative.
- Blur — a Gaussian blur in pixels. Applied last, so it softens the adjusted image rather than being adjusted itself.
Why order is fixed
Filters compose left to right, and the sequence genuinely changes the result: blurring a high-contrast image is not the same as boosting the contrast of a blurred one, because the blur averages values the contrast curve has already pushed apart.
The order used here — colour, then tone, then optical effect — is what image editors converged on, because it matches the order the equivalent operations happen in a real camera and lens.
Common uses
- Rescuing an underexposed photo with brightness and contrast
- Converting to black and white for a portrait or document
- Applying a consistent look across a set of product images
- Toning down an over-saturated phone photo
- Blurring an image for use as a background