Pixelation / mosaic

Crushing an image into big visible squares of flat color, to censor something or to make it look deliberately low-res.

big blocky pixelscensor squaresblur out a face with squaresmosaic effectpixelatepixellationlow res blocksmake it look like 8-bit blocks

See it

Live demo coming soon

What it is

Mechanically it is two moves. Downsample with box (area) averaging so each block of pixels collapses to its average color, then scale that tiny image back up with nearest-neighbor sampling so the one color paints the whole block as a hard-edged square. Averaging on the way down keeps the result faithful; killing the interpolation on the way up keeps the squares square. Block size is the entire design decision. Broadcast and Japanese TV call it a mosaic, image editors call it pixelate, and both mean the same operation.

Three real uses: censoring faces, plates, and private data in screenshots; lo-fi art direction that borrows from early game consoles; and progressive reveals where the block size shrinks as an image loads or as the user scrolls. Keep it crisp with image-rendering: pixelated in CSS or imageSmoothingEnabled = false on canvas, otherwise the browser helpfully interpolates your blocks back into a blur.

Gotcha worth taking seriously: pixelation is not redaction. Coarse blocks still leak the underlying values, and for short content in a known format (a phone number, a name, a token) the original can be recovered by brute-forcing candidates through the same filter until the blocks match. Anything genuinely sensitive gets a solid opaque box, not a mosaic.

Ask AI for it

Pixelate this image: downsample it to roughly 24 blocks across, then scale it back to full size with nearest-neighbor sampling (image-rendering: pixelated in CSS, imageSmoothingEnabled = false on canvas) so every block is a hard-edged square of flat averaged color. Keep the original aspect ratio and colors, allow no blur or interpolation between blocks, and expose block size as a variable so it can animate from coarse to fine.

You might have meant

ditheringhalftoneposterizationthresholdpixel art