The Image Pixelator that respects your photos

How image pixelation actually works

The algorithm in three lines of pseudocode, plus the design choices that make a pixelator fast or slow, secure or leaky.

The core algorithm

Pixelation is a downsample-and-upsample operation. The image is conceptually divided into a grid of square blocks of side N pixels. For each block, the average red, green, and blue values of every pixel inside it are computed, and the entire block is then overpainted with that single average color.

// pseudocode
for each block of size N×N:
  r = g = b = 0; count = 0
  for each pixel (x, y) in block:
    r += pixel.r; g += pixel.g; b += pixel.b; count++
  avg = (r/count, g/count, b/count)
  for each pixel (x, y) in block:
    pixel = avg   // fill block with average color

That's it. There is no neural network, no "AI", and no secret sauce — the magic is entirely in the choice of N and how the blocks are laid out.

Block size is everything

The block size N controls three things at once: how private the result is, how blocky it looks, and how much of the original structure survives.

• 1–3 px — barely visible. Unsafe for text — small blocks on high-contrast text can sometimes be reconstructed by de-mosaicing algorithms.
• 6–10 px — subtle mosaic. Good for an artistic, slightly retro feel without losing recognisability.
• 12–24 px — the privacy sweet spot. Faces, plates, and text become unrecognisable. Recommended default.
• 32–64 px — chunky retro / 8-bit art. Loses most detail; great for sprite studies and brick planning.
• 64–100 px — abstract colour blocks. Useful for palette extraction and very large prints.

Why this tool is fast

A naive pixelator reads every pixel one by one in JavaScript, which gets slow above ~4 megapixels. The Canvas API gives us a faster path: draw the image scaled down by factor N with imageSmoothingEnabled = true, then draw it back up to full size with imageSmoothingEnabled = false. The browser's native bilinear filter does the averaging, and nearest-neighbour upscaling paints the blocks. Result: pixelation of a 12-megapixel photo in under 30ms on a modern laptop.

Why browser-based beats server-based

Server-side pixelators have to receive your photo, store it (even if only briefly in RAM), process it, and send it back. That round-trip creates three problems this tool avoids entirely:

• Privacy. The image literally cannot leak because it is never transmitted. No logs, no backups, no analytics pixels sniffing the file.
• Speed. No upload time on a 5MB photo over a slow connection. Processing starts the instant the file is read.
• Cost. No server bills means the tool can stay free forever, with no daily limits and no upsell.

Pixelation vs pixel art

These are not the same thing. Pixelation averages colors — it's a smoothing operation that hides detail. Pixel art is the opposite: an artist places each pixel by hand to deliberately suggest detail that isn't there. Pixelation can be a starting point for pixel art (use a small palette + dithering afterwards), but a pixelated photo is not, by itself, pixel art. For real pixel-art conversion, use a tool that also applies color quantization and a fixed retro palette (NES, Game Boy, PICO-8).

🛡️ Your photos never leave your device — this pixelator runs entirely in your browser using the HTML5 Canvas API. There is no upload, no server-side processing, no analytics on your image, and no log of what you pixelated. Safe for IDs, medical images, source photos, and confidential screenshots.