The seven transforms Filter Effects Module 1 defines, computed from its published matrices and checked against the browser's own implementation, plus exposure in real stops and seeded grain.
Initializing in your browser…
Resize with the filter named (Lanczos, Mitchell, Catmull-Rom, bilinear, box or nearest) and the option to average LIGHT rather than stored bytes, which is worth 1.24 stops on a detailed picture.
Turn an image into a data URL whose payload is decoded again and compared byte for byte with the file, with the media type taken from the file's own signature rather than its extension and the size cost of embedding stated in full.
Compare two images with a perceptual engine (pixelmatch) that ignores anti-aliasing, or an exact byte engine. Groups changes into regions with bounding boxes, reports SSIM, and handles size mismatches with an explicit policy.
Convert to black and white, and check the answer against the browser’s own implementation of the same specification.
Input
swatches.png · Greyscale 1.0 · filter: grayscale(1)
Output
pure red 54 pure green 182 pure blue 18 a flat (R+G+B)/3 would give 85 for all three this page and the browser agree to within 0 of 255 across 33 colours
Filter Effects Module 1 section 8.4 gives the coefficients 0.2126, 0.7152 and 0.0722, so green carries most of the light and comes out light while red and blue come out dark. A flat average of the three channels puts all three at 85, which is 97 levels wrong on green and turns a photograph of grass into a dark rectangle. Because the transform is specified, it can be checked rather than believed: the page hands the same settings to the browser as the CSS string above and compares the two answers pixel for pixel.
Seven of the controls here are not a matter of taste. `grayscale`, `sepia`, `saturate`, `hue-rotate`, `invert`, `brightness` and `contrast` each have an exact definition in Filter Effects Module 1, section 8, with the coefficients written out, and every browser implements it. So this page computes them from the published matrices AND asks the browser for the same thing through its own `filter` implementation, then reports the largest difference between the two. It is normally 0 or 1 of 255 across 33 test colours, and the number is on the page. That check matters because the arithmetic is easy to get wrong in a way nobody notices. Greyscale by a flat (R + G + B) / 3 puts pure red, pure green and pure blue all at 85. The specification puts them at 54, 182 and 18, because green carries most of the light. On pure green that is 97 levels: a photograph of grass turns dark under the flat average and light under the right one. Both look like "black and white", and only one of them is.
Greyscale by the published matrix rather than a flat channel average, which is 97 levels different on green.
Exposure in stops on the light, so one stop up is one stop and not a blown-out frame.
Grain from a seed, so the same settings give the same grain and a set of photographs can be graded identically.
The CSS equivalent is printed, so the same transform can be reproduced in a stylesheet or compared with another tool.
Exposure is the other place a number has a real meaning. A stop is a doubling of LIGHT, so exposure here undoes the sRGB transfer function, multiplies the light by two to the power of the setting, and re-encodes. Multiplying the stored byte instead, which is what a slider labelled exposure usually does, is not the same thing at all: one stop applied to mid grey 128 gives 256, clipped to pure white, where the correct answer is byte 176. The page states both numbers next to the slider.
The rest of the tone controls have no published definition, and rather than implying otherwise the page prints the arithmetic each one uses. Highlights and shadows scale away from mid grey with the effect fading to nothing at the pivot; whites is a multiplier; blacks is an offset; temperature adds to red and subtracts from blue, which is the cheap approximation everything uses and is not a chromatic adaptation; vibrance weights saturation by how unsaturated a pixel already is; clarity is local contrast over a five pixel neighbourhood. Each of those sentences is on the page beside its slider.
Anything that draws on randomness draws from a SEEDED stream, so the same settings give the same picture every time and two downloads are byte identical. That is not a detail: film grain, colour noise and glitch all called Math.random() before, so the file you downloaded was never the picture you had been looking at, and two downloads of one setting differed on 97 percent of their pixels.
Everything runs at full resolution, preview included. A blur radius or a tile size is in pixels, so it means something different on a small picture and a large one; previewing at 800 pixels and exporting at full size, which is what this page used to do, made a blur radius of 5 a different blur in each.
Because the page checks them. The seven specified transforms are computed from the matrices in Filter Effects Module 1 and the same settings are handed to the browser as a CSS filter string and applied by its own implementation of that specification. The largest single-channel difference between the two is shown on the page, over 33 test colours, and it is normally 0 or 1 of 255.
Because the eye does not see the three channels equally. The published coefficients are 0.2126 red, 0.7152 green and 0.0722 blue, which put pure green at 182 and pure red at 54. A flat average puts both at 85, so grass and a red jumper come out the same shade, and neither is the shade either of them should be.
It doubles the light. Byte 128 carries a relative luminance of 0.2159; doubling that gives 0.4318, which encodes to byte 176. Multiplying the stored byte by two instead gives 256, clipped to pure white, which is why an exposure slider built that way blows a picture out much faster than a camera does.
No, and the page says so. Those names belong to commercial filters whose recipes have never been published, so there is nothing to check them against and no measurement can settle whether one is right. Each is an arrangement of this page's own controls that lands near the look people mean by the name, and the exact settings are shown so you can adjust them. The seven specified transforms are a different matter: those have a definition and are checked against it.
Because it comes from a seeded stream rather than Math.random(). That means the picture you preview is the picture you download, two downloads of the same settings are byte identical, and a set of photographs can be given the same grain. Change the seed for a different one.
Yes. Everything runs at full resolution, including the preview. A radius is in pixels, so a preview at a different size would show a different effect, which is what happened before.
Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.