Photo to Pixel Art Converter

About the Photo to Pixel Art Converter

Turn any photo, drawing or logo into real pixel art: a small grid of cells in a limited palette, not just a blurred, blocky photo. Choose how many cells wide the picture should be (16 to 256), and every cell becomes one pixel whose colour is the average of the part of the photo it covers. Then pick a palette — an automatic one of 2 to 64 colours made from your photo, a classic one such as PICO-8, Game Boy greens, CGA or 1-bit black and white, or your own list of colours — and how the colours mix: flat, Floyd–Steinberg dithering or a Bayer ordered pattern.

The result is shown enlarged with an optional pixel grid, with the colours it uses and how many pixels each one covers. Download it at its real size (each pixel one pixel, for games and sprite editors) or enlarged by a whole number so it stays perfectly sharp, copy the palette, or open the picture in the Pixel Art Maker to touch it up. Everything happens in your browser; the photo is never uploaded.

Common uses

• Sprites, tiles and title screens for retro games and fantasy consoles such as PICO-8.
• Pixel-art avatars, profile pictures, emotes and stickers.
• Starting points for hand-drawn pixel art: convert, then clean up the details in the Pixel Art Maker.
• Retro posters and prints: Game Boy, CGA and 1-bit looks.
• Patterns for bead art, mosaics, LEGO-style builds and knitting charts, with an exact colour count.

How the conversion works

• Shrinking. Each cell is the exact average of the photo area it covers, partly covered pixels counting by the share they cover. Transparency counts too: the colour of transparent pixels is never mixed in, and cells less than half covered stay transparent (or become white when Keep transparency is off). Most common colour keeps the colour that covers most of each cell instead — best for logos, screenshots and pixel art that was enlarged.
• Automatic palette. The starting colours come from the same colour reduction the image tools use (principal-axis splitting of the colour cloud, from upng-js), and are then improved with a few rounds of k-means: every colour moves to the average of the pixels nearest to it.
• Matching colours. Colours are compared with the weighted "redmean" RGB distance described by Thiadmer Riemersma (CompuPhase, Colour metric), which follows how different colours look more closely than plain RGB distance.
• Floyd–Steinberg. The difference between each pixel and the colour it became is passed on to its unvisited neighbours — 7/16 to the right, 3/16 below-left, 5/16 below and 1/16 below-right (R. W. Floyd and L. Steinberg, “An adaptive algorithm for spatial greyscale”, Proceedings of the SID 17(2)). Here the rows are scanned alternately left to right and right to left, which avoids diagonal streaks. Areas keep their average brightness: a mid grey in black and white becomes half black and half white pixels.
• Bayer. A fixed 2 × 2, 4 × 4 or 8 × 8 threshold map nudges each pixel up or down before it is matched (B. E. Bayer, “An optimum method for two-level rendition of continuous-tone pictures”, IEEE International Conference on Communications). The pattern is regular, so it does not flicker between animation frames.

The palettes

• PICO-8: the 16 fixed colours of Lexaloffle’s PICO-8 fantasy console, whose screen is 128 × 128 pixels and whose sprites are 8 × 8 (PICO-8 manual); hex values as listed by Lospec.
• Game Boy greens: the four shades #081820, #346856, #88c070 and #e0f8d0 that the bgb emulator uses by default (Lospec). The original Game Boy screen showed four shades of green-grey, and palettes like this one imitate them.
• CGA (16 colours): the RGBI colours of IBM’s Color Graphics Adapter (#000000, #0000aa … #ffffff, with colour 6 as brown #aa5500), and its iconic four-colour set of black, light cyan, light magenta and white.
• DawnBringer 16: a 16-colour palette made for pixel artists by DawnBringer and published on PixelJoint.
• Grey (4 shades) and 1-bit: evenly spaced greys, or black and white only.
• Custom: 2 to 64 colours of your own, typed as hex (#ff004d) or rgb(255, 0, 77).

Getting a good result

• Fewer pixels look more like pixel art: start around 64 wide and go up only if the subject becomes unreadable.
• Crop to the subject first — pixel art has no room for a busy background.
• Raise contrast and saturation a little before choosing a small palette; dull photos turn muddy with few colours.
• Dithering makes gradients smoother but adds noise. Lower its strength, or use none, for flat cartoon areas and for text.
• Use Original to compare, and fix single stray pixels by hand in the Pixel Art Maker.
• A picture that is already small, such as an icon or a sprite, needs a width no larger than its own: a wider grid only repeats its pixels (the page tells you when this happens).

Limitations

• Grids are 16 to 256 cells wide and at most 512 cells high; very tall photos get a narrower grid.
• Enlarged downloads are limited to 8,192 pixels on a side (and 40 megapixels), so not every scale is offered for large grids.
• Pixels are fully transparent or fully opaque — pixel art has no half-transparent edges.
• The automatic palette is made for the whole picture; to keep a particular colour (such as a brand colour), use a custom palette.
• Pixel Art Maker edits pictures of up to 256 × 256 pixels, so taller results cannot be opened there.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.