About

Converting an image to an 8-bit aesthetic requires two distinct operations: spatial resolution reduction (pixelation) and color depth reduction (quantization). Getting either wrong produces mud. Naive downscaling with bilinear interpolation blurs edges and destroys the hard-pixel look that defines retro art. This tool uses area-average downsampling followed by nearest-neighbor upscaling to preserve crisp pixel boundaries. Color reduction uses the Median Cut algorithm, which recursively partitions the RGB color cube along its longest axis to find k representative colors where k ranges from 2 to 64. Without dithering, banding artifacts appear in gradients. The tool offers Floyd-Steinberg error diffusion and Bayer ordered dithering (4×4 and 8×8 matrices) to mitigate this. All processing runs locally in a Web Worker. No pixels leave your device.

Limitations: the Median Cut palette is computed per-image, not matched to a fixed hardware palette (NES, Game Boy). Extremely dark or monochromatic source images may produce fewer distinct palette entries than requested. Transparent PNG alpha channels are composited onto a white background before processing. Dithering on images smaller than 64×64 pixels may produce noise rather than useful detail.

Formulas

Median Cut Partitioning

Given a bucket B of pixels, compute the range along each channel:

R_range = max(r) − min(r), same for G_range, B_range

Split along the axis with the greatest range at the median value. Repeat until k buckets exist. The representative color of each bucket is the component-wise mean.

Floyd-Steinberg Error Diffusion

For each pixel, quantization error e = old − new is distributed:

pixel(x+1, y) += e × 716

pixel(x−1, y+1) += e × 316

pixel(x, y+1) += e × 516

pixel(x+1, y+1) += e × 116

Bayer Ordered Dithering

A threshold matrix M of size n × n is applied. For a 4×4 Bayer matrix, threshold t at position (x, y):

t = M[x mod n][y mod n]n² − 0.5

The pixel value is biased by t × spread before nearest-color lookup.

Euclidean Color Distance

d = √(r₁ − r₂)² + (g₁ − g₂)² + (b₁ − b₂)²

Where r, g, b are the red, green, and blue channel values (0 - 255).

Reference Data

Platform / Era	Resolution	Colors On-Screen	Palette Total	Pixel Aspect	Year
Game Boy	160 × 144	4	4 (shades of green)	1:1	1989
NES (NTSC)	256 × 240	25	54	8:7	1983
Sega Master System	256 × 192	32	64	1:1	1985
Commodore 64	320 × 200	16	16	1:0.9375	1982
ZX Spectrum	256 × 192	15	15	1:1	1982
Sega Genesis	320 × 224	61	512	1:1	1988
SNES	256 × 224	256	32768	8:7	1990
Game Boy Color	160 × 144	56	32768	1:1	1998
Atari 2600	160 × 192	128	128	1:1	1977
MSX	256 × 192	16	16	1:1	1983
Amiga OCS	320 × 256	32	4096	1:1	1985
Apple II	280 × 192	6	16	1:1	1977
TurboGrafx-16	256 × 240	482	512	8:7	1987
Neo Geo	320 × 224	4096	65536	1:1	1990
GBA	240 × 160	512	32768	1:1	2001

Frequently Asked Questions

Uniform quantization divides the RGB cube into equal-sized bins regardless of where colors actually cluster. This wastes palette entries on empty color regions. Median Cut recursively splits color space at the median of the most-spread channel, concentrating palette entries where pixels actually exist. For a natural photo with mostly greens and blues, Median Cut allocates more palette slots to those ranges rather than wasting entries on reds that barely appear.

Floyd-Steinberg produces more naturalistic results because error diffusion creates organic, noise-like patterns that the eye blends. It works best for photographs and gradients. Bayer dithering produces a characteristic crosshatch pattern that looks more authentically retro - it mimics how actual 8-bit hardware rendered limited palettes. Use Bayer 4×4 for a coarse, Game Boy-era look, and 8×8 for finer patterns. Floyd-Steinberg is computationally heavier because it processes pixels sequentially; Bayer can be applied per-pixel independently.

Blurriness occurs when the browser uses bilinear or bicubic interpolation to scale the image. This tool sets imageSmoothingEnabled to false and uses CSS image-rendering: pixelated to force nearest-neighbor interpolation on upscale. If you download the PNG and view it in another application, ensure that application also uses nearest-neighbor scaling. The downloaded file is at the pixelated resolution - zoom in with a viewer that supports pixel-perfect rendering.

Alpha channels are composited onto a white background (#FFFFFF) before processing. The 8-bit conversion pipeline operates on RGB only - no alpha output is produced. If you need a specific background color for compositing, place your transparent image on the desired background in an image editor first, then export as a flat PNG or JPEG before using this tool.

The pixel scale value defines the size (in source pixels) of each output "block." A scale of 8 means every 8×8 region in the original image becomes a single solid-color pixel in the result. For a 1024×768 source at scale 8, the effective resolution is 128×96 - which closely matches a Game Boy Advance screen. Larger scale values produce chunkier pixels but lose fine detail. The tool caps the internal canvas at 2048×2048 pixels to prevent browser memory issues.

This tool generates an optimal palette per-image using Median Cut. It does not constrain output to a fixed hardware palette. However, setting the palette count to match a platform (e.g., 4 for Game Boy, 16 for Commodore 64) and using Bayer dithering produces a visually similar aesthetic. For exact hardware-accurate palettes, the quantized colors would need to be snapped to a predefined LUT - a feature beyond this tool's current scope.