Pixelate an image

Create a block-mosaic version of a raster image while keeping its original dimensions.

freeworks offlinenothing uploaded
ToolPixelate Image
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The source is reduced to a canvas divided by the block size, then enlarged with smoothing disabled. Each output block repeats one sampled colour region.

  • Block size 10 is the initial mosaic scale.
  • PNG is used for the generated raster.

Worked example

Pixelate a 2×2 test tile
Input
											Input: data:image/png;base64,iVBORw0KGgo=
Block size: 2
Output
												PNG data URL with 2×2 colour blocks

When to use this

Privacy edits obscure faces, game assets create low-resolution style, and graphics lessons demonstrate resampling.

Edge cases

  • A block larger than the image collapses it to one sampled region.
  • Transparent pixels remain transparent because RGBA is resampled.
  • Discarded detail cannot be recovered by enlarging the result.

References