About

Blockification reduces an image to a grid of uniform color cells, each representing the arithmetic mean of the underlying pixel region. The process is functionally equivalent to spatial downsampling followed by nearest-neighbor upscaling, but with control over cell geometry. Choosing a block size of b = 1 px yields the original image; values above 40 px produce abstract mosaic compositions. Incorrect block sizing relative to image resolution can obliterate critical detail. Faces become unrecognizable above roughly 5% of the shorter dimension. This tool computes the per-channel mean (R, G, B, A) for every cell using raw canvas pixel data. It supports square, circular, diamond, and hexagonal cell shapes. All processing runs locally in your browser with zero server uploads.

Formulas

For each grid cell at position (i, j) with block size b, the average color channel value is computed as:

C̄_channel = 1n n∑k=1 p_k

Where n = b × b is the number of pixels in the cell, and p_k is the value of channel (R, G, B, or A) for pixel k. The grid coordinates map to canvas pixels as:

x₀ = i × b, y₀ = j × b

The total number of cells along each axis:

cols = ⌈Wb⌉, rows = ⌈Hb⌉

Where W and H are the image width and height in pixels. Edge cells that extend beyond the image boundary sample only available pixels, adjusting n accordingly.

Reference Data

Block Size (px)	Grid Density (1000×1000 image)	Visual Effect	Detail Retention	Typical Use Case
2	250,000 cells	Subtle texture	Very High	Retro photo filter
5	40,000 cells	Soft pixel look	High	Game art sprite reference
10	10,000 cells	Classic pixelation	Moderate	Privacy blur alternative
15	4,444 cells	Mosaic tile	Moderate-Low	Social media thumbnails
20	2,500 cells	Bold block art	Low	Poster design
30	1,111 cells	Abstract mosaic	Very Low	Background patterns
40	625 cells	Coarse grid	Minimal	Color palette extraction
50	400 cells	Large tiles	Minimal	Abstract wall art
80	156 cells	Extreme abstraction	None	Color study
100	100 cells	10×10 grid	None	Favicon / tiny icon design

Frequently Asked Questions

Research on facial recognition thresholds shows that faces become unrecognizable to humans when the block size exceeds roughly 5% of the face's bounding box width. For a 200px-wide face, a block size of 10px or larger effectively anonymizes it. Automated recognition systems may require larger blocks - typically 10-15% of face width. This tool lets you preview in real-time, so increase the block size until facial features merge into uniform color cells.

The tool computes the arithmetic mean of RGB channels independently. This is a linear operation applied to gamma-encoded sRGB values, which can produce averages that appear slightly darker than perceptual expectation. True perceptual averaging would require linearizing (gamma-decoding) each channel, averaging, then re-encoding - a computationally heavier process. For most artistic and privacy use cases, the difference is negligible. If color accuracy is critical (e.g., print production), export and apply gamma correction in a dedicated editor.

Browser canvas elements typically support up to 16,384×16,384 pixels (268 megapixels) on desktop and around 4,096×4,096 on mobile Safari. The practical limit depends on available RAM - a 4000×3000 image uses approximately 48 MB of raw pixel data. The tool will warn you if the image exceeds safe thresholds. For images above 8 megapixels, processing may take 1-3 seconds.

Circular and diamond shapes leave gaps between cells, which are filled with a configurable background color (default: white). These gaps can reveal thin slivers of the original image at cell boundaries. For strict privacy (GDPR-compliant anonymization), use square blocks, which provide complete coverage with zero gaps. Circular and hexagonal modes are designed for artistic mosaic effects, not data redaction.

Yes. The output canvas matches the source image dimensions exactly. Each block cell of size b×b pixels is drawn at full resolution on the output canvas. The file size of the exported PNG is typically 60-90% smaller than the original because large uniform-color regions compress extremely well under PNG deflate encoding.