Pixelate

The image is divided into a grid of squares and each square is painted one flat colour, so the only real question is where that colour comes from. There are two published answers and this tool offers both rather than picking one quietly. Block average adds up every pixel the square covers and divides — the result is the tone of the area, and a single bright speck inside a large block barely moves it. Centre pixel reads exactly one pixel, the one nearest the middle of the square, and averages nothing — so that same speck is either the colour of the whole block or absent from it entirely. On flat colour the two agree exactly. On an edge, on fine text, on a highlight, they give visibly different pictures, and the line under the preview names the one that produced the pixels above it.

The usual shortcut for this effect is two lines long: draw the image very small, then draw it back at full size with smoothing turned off. It produces blocks, and it also throws away the question the page just answered — the filter a browser uses when it shrinks an image is not specified anywhere, so the block that comes back is neither the average nor the centre pixel but a third rule with no name, which can differ between browsers on the same file. A tool that offers a choice of rule cannot then let the canvas choose a different one. This page reads the pixel buffer once at working size and computes every block from the pixels that block actually covers, so the same settings on the same image give the same output everywhere. Blocks at the right and bottom edges are drawn at whatever width is left rather than padded out.

The optional reduction control is labelled for what it does: it snaps red, green and blue each to a fixed number of evenly spaced levels. Four levels per channel is not four colours — it allows up to sixty-four combinations, and how many of those actually appear depends entirely on the picture. So the number of distinct colours is measured off the finished blocks and printed next to the settings, before any grid is drawn over them, rather than calculated from the slider. What this control is not is a named palette: reducing to a few levels is arithmetic on your image's own colours, while a NES or Game Boy palette is a fixed list of specific colours that every pixel must be matched to. That is a different operation and this tool does not claim it.

Everything happens in your browser through the Canvas API. The image is never uploaded, nothing is stored, and no account is needed. Large images are worked at up to 2048px on the long edge, and the source is never scaled up. One thing this is deliberately not: it is a visual effect and not a way of hiding information. Each block still carries a summary of what was underneath it, and pixelated text and faces have been reconstructed from exactly that. If something has to stay unreadable, cover it rather than average it — the Redaction Tool paints over document regions and Face Blur handles people. For the neighbouring effects in this family, see Dithering, Halftone and ASCII Art.