Image Pixelator

The Image Pixelator divides your picture into a grid of blocks whose edge length you set with the Pixel Size control (range 2-50px, default 10, with quick-pick chips at 4, 8, 12, 16, 20, 30 and 40px). Rather than averaging each block, the algorithm samples a single color from the center pixel of every block (clamped to the image bounds) and paints the whole tile with it, so the result is a crisp, posterized mosaic rather than a smooth blur. That sampled color can be rendered in one of four tile shapes: Square (solid fillRect), Circle (a dot at 90% of the block radius, leaving gaps for a halftone/dot-matrix look), Diamond (a four-point rotated tile), or Hexagon (a pointy-top honeycomb drawn from six vertices at 90% radius, starting at -30 degrees). The live preview also applies the CSS image-rendering: pixelated hint so the upscaled blocks stay hard-edged on screen.

Beyond the block size, a Color Palette control reduces the number of distinct colors. The 256, 64, 16 and 8-color modes apply uniform per-channel quantization (each R, G and B value is snapped to a step of 256 / colors^(1/3)), while the Monochrome mode converts to grayscale by averaging R, G and B and then hard-thresholds at 128 to pure black or white. This palette pass runs after pixelation, so combining a large pixel size with a low color count (the Pixel Art preset, for example, is 12px square at 16 colors, and Minecraft is 16px square at 64 colors) gives the limited-palette retro-game aesthetic. Full Color leaves the sampled colors untouched.

Eight one-click presets cover common looks: Subtle Blur (4px), Retro Game (8px), Mosaic Art (20px square), Dot Matrix (10px circles), Stained Glass (25px hexagons), and Censor Bar (30px square) for heavy privacy redaction, plus the color-limited Pixel Art and Minecraft presets. Everything runs locally in the browser on a canvas, and the export is always a PNG written via canvas.toBlob at full quality (1.0) with a descriptive filename that encodes the size plus any non-square style and non-full color mode, such as name-pixelated-20px-hexagon-16.png (the style and color suffixes are dropped when they are square/full). A Show Original / Show Effect toggle lets you flip between the source and the pixelated result before downloading.