Pixelate Image

The bug screenshot is perfect — the stack trace, the reproduction steps, the exact build number — except the address bar contains an internal URL with a session token in it, and the customer's email is visible in the corner of the attached log. You need that screenshot in the shared channel in two minutes. What you do not need is a career-defining lesson in what tokens pasted into public channels can do.

Pixelation is the tool this job reaches for by instinct: drag a box over the sensitive strip, let it collapse into chunky colored blocks, ship the screenshot. The same operation, run deliberately over a whole image instead of a strip, is also an aesthetic — the 8-bit nostalgia look, the reality-show mosaic, the intentionally-low-res avatar. One operation, two very different moods, and this page serves both with a block-size slider and a brush.

What follows is the mechanics: why pixelation is *averaging*, not blurring; what block size actually destroys versus merely decorates; and the honest limits of mosaic censoring, which has a specific and well-documented weakness that blur does not share.

The intuition most people carry is 'make it blurry in squares.' The reality is sharper than that, literally. Pixelation is a two-step resize: first the image is *downsampled* — shrunk so that each output pixel stands in for a block of originals, averaging their colors — and then it is *upscaled* back to full size using nearest-neighbor sampling, where each new pixel simply copies the nearest one, duplicating each stored pixel into a hard-edged block.

That second step is where the character comes from. Upscale with bilinear or bicubic filtering and you get soft, smeared edges — blur wearing a costume. Upscale with nearest-neighbor and the blocks stay crisp, the palette stays flat, and the result reads as mosaic instead of fog. The CSS property `image-rendering: pixelated` exists precisely to request this behavior when scaling images in a page; the canvas path used here toggles the same choice with `imageSmoothingEnabled = false` before the final draw.

So a pixelated image genuinely is a tiny image, magnified. Everything the censor does, the retro effect also does — the difference is only intent and block size, which is a pleasantly honest state of affairs for a tool to occupy.

1. 1

   Load the image

   Drag, browse, or paste from the clipboard — the paste path is the fast one for screenshots, which are most of this tool's traffic.

2. 2

   Pick the region

   Whole image for the retro treatment, or paint/drag a rectangle for censoring. The brush is handy for irregular shapes; the rectangle tool is the workhorse for address bars, plates, and log lines.

3. 3

   Choose the block size

   The slider runs from 2 (subtle texture) to 64 (pure abstraction). For hiding information, start around a tenth of the feature's width and consult the zoom check below.

4. 4

   Zoom-verify

   The 400% inspector exists because shape survives small blocks — letters in particular. If a motivated stranger could still read it, increase the block size and look again.

5. 5

   Export

   PNG keeps the hard block edges byte-clean; JPG will re-compress them and slightly soften every boundary, which is fine for sharing and wrong for archival.

Undo is a keystroke and regions are re-editable, because the correct block size is usually discovered rather than known in advance — the tool is shaped around iterating to the number that passes inspection.

The implementation is two canvas draws, and it is worth seeing because it explains every visible property of the output:

// 1. Downsample: each small pixel = average of a block×block area
const small = document.createElement('canvas');
small.width  = Math.ceil(W / block);
small.height = Math.ceil(H / block);
sctx.imageSmoothingEnabled = true;        // averaging
sctx.drawImage(img, 0, 0, small.width, small.height);

// 2. Upsample: nearest neighbor, duplicating each pixel into a block
ctx.imageSmoothingEnabled = false;        // hard edges
ctx.drawImage(small, 0, 0, W, H);

The first draw is where information dies. Shrinking a 4032-pixel-wide photo to 126 pixels wide means each surviving sample summarizes a 32 × 32 patch — 1,024 original pixels averaged into one number per channel. The averaging is what distinguishes honest pixelation from *dropping* pixels (which aliases into shimmering artifacts): every source pixel contributes, so a block covering half sky and half roof lands on the mixed color of both rather than on whichever pixel the sampler happened to land on.

The second draw is where style is born. With smoothing off, the magnified copy repeats each stored sample across its block — no interpolation, no soft edges. Change nothing but that one boolean and the result turns into a blur; flip it back and the mosaic returns. The entire visual identity of the effect sits in a single line of setup code, which is either beautiful or suspicious, depending on how your week is going.

Region-limited pixelation composes the same two draws through a mask, exactly as region blurring does: the mosaic is computed for the full image, then only the masked region is taken from it and the rest from the untouched original. That ordering is why blocks near the region boundary average only pixels from within the region — no leaking of sharp content into the averaged result, and no averaged mush bleeding into the sharp surroundings.

Numbers make the destruction measurable. Take a 4032 × 3024 photo containing a license plate region 300 × 225 pixels — a realistic plate size in a parked-car shot:

Six hundred and twenty-five pixels of evidence, collapsed into one value — that is what a censor block is. The table also shows pixelation's specific weakness in relief: at block 12 the plate's letters are 144-sample averages that still trace their shapes, and *shape is what text is*. A blur of equivalent strength smears the letters into gradients; a mosaic at moderate block size preserves their silhouettes as blocky outlines. For words, numbers, logos, and anything else whose identity is its shape, blocks must be big enough to break the shape itself, not merely its edges.

The same arithmetic run in reverse gives the retro branch its design guidance. A 512 × 512 avatar at block 16 becomes a 32 × 32 image — a resolution that matches genuine 8-bit-era sprites, which is why it *looks* like the 8-bit era rather than merely low-res. The aesthetic correctness of retro pixelation is a matter of landing on resolutions the hardware of memory actually used: 16, 24, 32, 48 blocks wide.

Mosaic censoring has a documented soft spot, and pretending otherwise would leave you less protected than you think. Published research on reconstructing images from blocky sources — most famously the depixelization work on scaling pixel art — demonstrates that the human and machine visual systems are startlingly good at inferring smooth, plausible originals from coarse grids. Fill in the blanks correctly enough times and a 'destroyed' face becomes a recognizable one, a 'destroyed' word becomes a guessable one.

Three practical consequences. First, block size must scale with the content's recognizability, not with the image's resolution — a 4000-pixel-wide photo of a document needs bigger blocks than a 1000-pixel-wide photo of the same document, because the letters are physically larger in the frame. Second, distinctive silhouettes are the last thing to die: a red octagon under pixelation remains an octagon, and context does the rest of the identifying. Third, when the stakes are real, the solid box remains undefeated — pixelation is prettier, but 'a rectangle of one color' is the only state with literally zero residue.

For everyday protection — session URLs, emails in logs, a face in a group shot being kept out of a public post — properly sized pixelation is entirely sound. The rule of thumb from the license-plate table generalizes: blocks at or above a tenth of the feature's width, verified at 400% zoom. The failure cases in the wild are nearly always blocks chosen for aesthetics at information-bearing sizes, which is the pixelation equivalent of locking the door and leaving the window open.

Half the traffic to any pixelate tool wants the look, not the redaction. The 8-bit aesthetic runs on specific constraints, and honoring them is the difference between 'pixelated' and 'pixel art adjacent':

• Land on era-authentic resolutions. Whole-image blocks of 16, 24, or 32 give outputs in the true sprite ranges. Block 9 produces a 213-pixel-wide image, which no 1985 hardware ever displayed, and the eye notices without knowing why.
• Let the palette stay averaged. Real hardware had fixed palettes; area averaging approximates the feel by muting gradients. If you want authentic, quantize to 16 or 32 colors after pixelating — a two-step that most of the good 'pixelator' effects quietly do.
• Keep contrast high in the source. Pixelation preserves luminance structure at any block size; a flat-lit photo becomes flat blocks, while a contrasty one becomes readable mosaic.
• Pixelate the whole image, not a region. A sharp photo with one pixelated patch reads as censorship; a uniformly blocky image reads as style. The exception — a deliberately retro 'glitch patch' — is its own micro-genre and knows what it is doing.

The mosaic-as-identity look earned its place honestly: it is the visual language of an era when hardware constraints made it mandatory, revived as a choice. Constraints that were once imposed tend to age into style precisely because they are legible — everyone recognizes the shape of the limitation, now worn as ornament.

The small print, in the order people hit it:

• Partial blocks at region edges. A rectangle rarely aligns to the block grid; the tool averages partial blocks so nothing escapes processing, and slivers at the boundary are the visible cost. Grow the region or accept the seam.
• Shape survives long after texture dies. The license-plate lesson generalized: high-contrast edges — logos, gestures, letters, distinctive objects — remain identifiable at block sizes that feel aggressive. Zoom-verify everything that matters.
• JPEG output softens the blocks. The hard block edge is a high-frequency feature, exactly what JPEG spends its bits fighting. Export PNG when the crispness is the point.
• Animated GIFs get their first frame. Frame-by-frame mosaic is a different, heavier tool; this one treats the poster frame as the image.
• EXIF is untouched. Pixelation is pixels; GPS, timestamps, and device data ride along in metadata. Strip them before publishing anything location-sensitive.
• Unpixelation is impossible, by you too. Once exported, your original detail is gone from that file. Keep the source image if there is any chance you will need the uncensored version later — the tool works on copies, but it cannot un-average what you saved over.

The support-engineer and developer crowd is the volume: bug screenshots with URLs, API keys, internal hostnames, and customer emails that must survive a journey through shared channels. The paste-censor-export loop is muscle memory after the first week on the job, and this tool's clipboard-first design is aimed squarely at that workflow.

The privacy-publication crowd overlaps with the blur audience — journalists protecting sources, teachers protecting kids, marketplace sellers blurring plates in vehicle photos — split between those who prefer the soft-focus look and those who prefer the mosaic, a pure matter of taste once both are sized to pass the zoom test.

And the aesthetic crowd: profile pictures gone deliberately blocky, band posters, stream overlays, product marketing doing a nostalgia beat, the recurring 'make my photo look 8-bit' request that has been arriving since roughly the moment 8-bit stopped being the default. Retro is the use case that never expires, only hibernates between hardware anniversaries.

The neighboring tools cover the adjacent jobs: Blur Faces in Photos for the gradient-flavored censoring (with automatic face detection), Invert Image Colors for the opposite-universe tonal trick, and the Grayscale Image Converter for the classic black-and-white treatment.

The phone markup apps deserve their place in the table and a word of caution: their fixed mosaic settings are calibrated for aesthetics, and finger-painted regions at those strengths are how readable tokens end up in public channels. The desktop editors are the full-control option with the usual full-ceremony cost. The upload editors are competent and insist on receiving the screenshot you are trying to keep contained — the recurring theme in this cluster, and the recurring reason these pages exist.

Between them sits the shape of this tool: precise block control because censoring has a correctness requirement, region flexibility because the sensitive part is rarely the whole image, and an inspector because the difference between safe and decorative is one zoom level that nobody performs unprompted.

The input to this tool is very often a screenshot that exists *because* something went wrong — a bug report carrying session tokens, an error dialog with an internal hostname, a log line with a customer identifier. The design answer is that the pixelation never leaves the tab: decode, average, upscale, encode, download, all on the canvas in your browser. The network panel after page load shows precisely nothing, including during the export step.

That property is what makes the tool usable on the images that most need it. A token-bearing screenshot uploaded to a converter is a small, avoidable breach with an annoying blast radius; a client photo under NDA pixelated through a server is the same event in a nicer suit. Client-side processing is not a performance optimization here — it is the requirement the tool is built around.

The usual corollaries all apply: no size caps, no watermarks, no quota walls, no account, and full function offline once the page has loaded. A censoring tool that demands an internet connection at the moment of use has misunderstood its own job description.

Family tree of adjacent effects: Blur Faces in Photos for soft-focus redaction with face detection, Invert Image Colors for the negative-universe branch, and the Grayscale Image Converter for black-and-white conversions done with proper luminance math.