Stage 02 · photo to sprite
Image to pixel art
Shrink any picture to a small pixel grid, map it to a retro console palette or an automatic one, and add Floyd–Steinberg or ordered dithering. The picture never leaves your device.
Drop a picture here
PNG, JPEG, WebP or GIF: photos, drawings and logos all work.
How the conversion works
Three steps run every time you change a setting. First the picture is shrunk to the width you choose by averaging every block of original pixels into one, which keeps colours truer than ordinary resizing. Then each pixel is matched to the nearest colour of the palette. The automatic palette uses median cut: it keeps splitting the picture's colours into groups until there are as many groups as colours you asked for, then refines them so each group's average fits its pixels well. A console palette such as PICO-8 or the Game Boy's four greens forces the picture into that machine's look instead.
Dithering mixes neighbouring palette colours to suggest shades the palette does not have. Floyd–Steinberg passes each pixel's rounding error on to the pixels to its right and below (7/16, 3/16, 5/16 and 1/16 of it). Ordered dithering adds a fixed Bayer threshold pattern instead, giving the tidy cross-hatching of old computer games. Strength scales either effect down; at 0 you get flat colour.
Pictures with a clear subject and strong contrast convert best. Crop away busy backgrounds first, nudge contrast up a little for flat, washed-out photos, and remember that a small, noisy area turns into speckles at low widths. To clean up the result by hand, send it to the pixel art editor.
Sources
- Floyd RW, Steinberg L. An adaptive algorithm for spatial greyscale. Proceedings of the Society for Information Display 1976;17(2):75–77. The error-diffusion weights used here.
- Bayer BE. An optimum method for two-level rendition of continuous-tone pictures. IEEE International Conference on Communications, 1973. The ordered threshold matrices.
- Heckbert P. Color image quantization for frame buffer display. ACM SIGGRAPH Computer Graphics 1982;16(3):297–307. The median cut method.
Questions
What width should I choose?
It depends on how chunky you want the result. 32 to 64 pixels across gives the look of an 8-bit game sprite or portrait; 96 to 160 keeps faces and scenes recognisable while still reading as pixel art. Start low and raise it until the subject is clear.
Should I use Floyd–Steinberg or ordered dithering?
Floyd–Steinberg gives the smoothest gradients and the most detail, but its dots look random. Ordered dithering makes a regular cross-hatch pattern that looks like classic console and computer graphics, and it does not shimmer between the frames of an animation. With no dithering you get flat areas of colour, like hand-made pixel art.
Why do faces look odd with a console palette?
Small fixed palettes have few skin tones, so the converter has to use the nearest colour it has. Try the automatic palette with 16 to 32 colours, raise the width, or lower the dither strength for flatter, cleaner areas.
Is my picture uploaded?
No. The picture is decoded, scaled and recoloured by this page in your browser, and the result is saved straight from your device. Nothing is sent to a server.