Pixelation is the oldest visual redaction technique still in daily use. It reads instantly as deliberate rather than accidental, which is why it appears on documents, broadcast footage and screenshots far more often than a blur does. It also produces the blocky look that stands in for low resolution in games and design work.
Everything runs locally through a canvas. A screenshot containing an account number or a photograph of somebody who did not consent to appear online is processed inside your own browser tab, so the untouched original never crosses a network on its way to being redacted.
When to reach for the image pixelator
The rectangle mode covers the redaction cases. Position the region over a face, a licence plate, an email address or an account number, choose a block size large enough that the underlying shapes disappear, and the rest of the picture stays perfectly sharp. That contrast is the point, since a viewer can see the context while the sensitive detail is gone. It is also the quickest way to pixelate image online when a screenshot has to go out in a hurry.
Whole image mode covers the stylistic cases. A heavily pixelated photograph reads as retro or anonymous, and it is a common way to produce a placeholder or a thumbnail that suggests an image without revealing it.
- Pixelate a face or a name before posting a screenshot publicly.
- Pixelate a licence plate or a house number in a street photograph.
- Pixelate a logo you do not have permission to reproduce.
- Pixelate a whole image to create a low resolution placeholder.
- Pixelate deliberately for a pixel art effect in a poster or game mockup.
Choosing a block size
The block size is the width in pixels of each flat square in the output. It has to be judged against the size of the thing you are hiding, not against the size of the image. A face that occupies 200 pixels across needs blocks of at least 20 to become unrecognisable, because roughly ten blocks across a face still leave enough structure to identify it.
A useful rule is that anything you want gone should be covered by fewer than eight blocks in its longest direction. Text is the hardest case. Characters are small and highly structured, so a block size that comfortably hides a face will often leave a rendered word still readable at a glance.
Why pixelation is not a security guarantee
Pixelation is a lossy averaging operation, not encryption, and it can be attacked. If an adversary knows the font, the layout and the exact pixelation parameters, they can render every candidate string, pixelate each one the same way and compare the results. Short, predictable values such as a six digit code or a numeric plate are the most vulnerable, because the candidate set is small enough to search exhaustively.
The safe approach for genuinely sensitive data is removal rather than obscuring. Crop the region out of the frame, or paint a solid opaque rectangle over it and flatten the file. Use the image pixelator when you want the viewer to understand that something was redacted, and use a crop when the consequence of recovery would be serious.
How this image pixelator works in your browser
Pixelation here is two draw operations rather than a filter. The selected area is first drawn into a tiny offscreen canvas whose dimensions are the region divided by the block size, which forces the browser to average each block of source pixels down into one. That small canvas is then drawn back at full size with image smoothing switched off, so each averaged pixel expands into a hard edged square.
Turning smoothing off is what separates a pixelated image from a blurry one. With smoothing on, the upscale interpolates between neighbouring samples and you get a soft gradient instead of blocks. The image pixelator sets imageSmoothingEnabled to false on the destination context before the second draw for exactly this reason.
Because both steps are native canvas draws, the cost is close to a single copy of the image regardless of how small the block size gets. No pixel loop runs in JavaScript, so a large photograph pixelates in milliseconds.
Positioning the region accurately
The region controls are expressed as percentages of the image rather than pixels, so the same settings behave the same way whether you loaded a phone screenshot or a 40 megapixel camera file. The image pixelator preview shows the finished result rather than an overlay, which means you can nudge a slider, re run and see exactly what a viewer will see.
Give the region a margin. Redactions that stop exactly at the edge of a face or a word tend to leave identifiable fragments in the outermost blocks, since each edge block averages both hidden and visible content. Extending the rectangle a few percent past the target removes that seam.
| What you are hiding | Its width in pixels | Suggested block size |
|---|---|---|
| A face in a group photo | 120 | 16 to 20 |
| A face filling the frame | 600 | 70 to 90 |
| A licence plate | 200 | 25 to 35 |
| A line of small text | 300 | 40 or larger |
| A whole image, stylistically | any | 8 to 24 |
How to pixelate an image online
- 1
Add your image
Drop a PNG, JPG or WebP onto the drop area, or click to browse. The file is read locally and never uploaded.
- 2
Choose whole image or a region
Switch to region mode to redact one rectangle, then set its position and size as percentages of the image.
- 3
Set the block size
Pick a block size large enough that the hidden content is covered by fewer than eight blocks across.
- 4
Pixelate and download
Press pixelate, check the preview at full width, then download the flattened result.
Related tools worth bookmarking
Sources and further reading
- MDN: CanvasRenderingContext2D.imageSmoothingEnabledThe property that must be switched off during the upscale, which is what turns a blur into hard blocks.developer.mozilla.org
- WHATWG: HTML canvas specificationDefines drawImage scaling behaviour and the smoothing quality hints this two step technique depends on.html.spec.whatwg.org
- W3C: CSS Images Module Level 3Specifies the pixelated scaling behaviour browsers use, and explains why nearest neighbour sampling looks the way it does.w3.org
Frequently asked questions
Common questions about the image pixelator.
Not directly, because averaging discards information. It can sometimes be defeated by guessing, however, when the hidden content comes from a small predictable set such as a numeric code rendered in a known font. Crop instead when recovery would be harmful.
Yes. Region mode pixelates a single rectangle whose position and size you set as percentages of the image, leaving everything outside that rectangle completely untouched and at full sharpness.
Measure the face in pixels and divide by eight. A face 240 pixels wide therefore wants blocks of about 30. Smaller blocks leave enough structure for a person, or an automated system, to recognise the subject.
No. The tool reads a copy of the file into memory and produces a new blob for download. The file you selected stays exactly as it was, so you always keep the unredacted original unless you delete it yourself.
PNG, because it is lossless and pixelated images are made almost entirely of large flat areas that PNG compresses very efficiently. JPG can introduce faint ringing along the hard edges between blocks.
No. Decoding, pixelating and encoding all happen in your browser tab using the canvas element. Nothing is transmitted, which is the reason this approach suits screenshots that contain private information.