Image Mosaic

How to use

1. Load the photo.
2. Choose whether to pixelate the whole image or only the centre ellipse.
3. Set the block size — larger means coarser.
4. Download the masked image as PNG.

How it works

Block size sets the blur

Block size decides the blur: at 8px text keeps recognizable outlines — light background masking; 16px is standard, faces and text unreadable; past 24px even shapes vanish. For plates and ID numbers start at 16px.

The center ellipse

The center ellipse centers on the image with semi-axes of about 35% of width and height — a 480x320 image covers a central 336x224 ellipse. Faces and ID main info usually fall inside; targets outside it (a corner plate) need full-image mode, or crop first.

Pixelation is irreversible

Pixelation is a destructive operation: original pixels merge into block-average colors, detail is gone, and no honest algorithm recovers it. Small blocks (2-4px) can still be partially guessed by AI upscalers — use 16px+ for sensitive content.

Nothing leaves the browser

No. The whole pipeline runs in your browser — decode, pixelate and export all happen in local memory, with no upload code on the page, and it works identically offline. That's the floor for a privacy tool.

Code example

const cols = Math.ceil(w / b);
const rows = Math.ceil(h / b);   // 800×600 with 40px blocks → 20×15 = 300 blocks

// Each block is filled with the average of its pixels; a uniform block reads as mosaic
// Larger blocks blur more: 2 is barely grainy, 128 no longer resembles the original

// The ellipse is centred on the image with semi-axes at 35% of each side
const rx = w * 0.35, ry = h * 0.35;

// A block is masked when its centre falls inside the ellipse (the standard ellipse equation)
const px = (c + 0.5) * b, py = (r + 0.5) * b;
const inside = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2 <= 1;

FAQ