Pixel Art Styles: Block Size, Palettes and What Survives Downscaling
Turning a photo into convincing pixel art is mostly a subtraction problem. You are throwing away resolution and, ideally, colour, and the result only reads as retro if what remains still describes the subject. The Pixel Art Converter handles the resolution half with a single slider; this article is about using that slider well and about the palette work that finishes the look.
Pixelation and pixel art are not the same thing
True pixel art is drawn pixel by pixel, with every dot placed deliberately - that is what gives classic sprites their crisp silhouettes and hand-tuned shading. A converter cannot invent that intent. What it does is reduce a photograph to a grid of flat colour blocks, which lands somewhere between a mosaic and a sprite. The gap between those two outcomes is closed almost entirely by how you prepare the source, not by the conversion itself.
Reading the block size slider as a resolution
The slider sets how many original pixels collapse into one visible block, from 2 up to 50. It is more useful to think in terms of the effective resolution you end up with, which is simply the source width divided by the block size. Classic sprite work lives at recognisable sizes: 16 by 16 for an icon, 32 by 32 for a character, 64 wide for a detailed portrait.
| Source width | Block size | Effective resolution | Reads as |
|---|---|---|---|
| 640 px | 40 | 16 blocks wide | Abstract icon |
| 640 px | 20 | 32 blocks wide | Chunky 8-bit |
| 640 px | 10 | 64 blocks wide | 16-bit portrait |
| 640 px | 4 | 160 blocks wide | Softened photo |
Because the control is a divisor rather than a target width, resize your source to a round number first and the arithmetic becomes trivial. The output keeps the original canvas dimensions, so a 640 pixel image at block size 20 is still 640 pixels wide, just built from 32 columns of 20 pixel squares.
Why fine detail disappears
Smoothing is switched off during the downscale, so the browser samples the source rather than averaging it: each block takes its colour from one point in the region it covers. That is the right choice for a retro look, because averaging produces muddy in-between colours that no real 8-bit hardware could display. The cost is that anything thinner than a block can vanish completely - spectacle frames, a thin antenna, individual strands of hair, distant text.
The practical response is to choose and prepare subjects accordingly:
- Crop tight. A face filling the frame survives at 32 blocks wide. The same face across a wide landscape becomes four brown squares. Use the cropper before converting.
- Favour strong silhouettes. Subjects that are recognisable in outline - a cat, a bottle, a face in profile - hold up far better than busy scenes.
- Boost contrast first. When each block is a single sampled colour, a flat, hazy original produces a flat, hazy grid. Adding contrast and saturation before conversion makes the blocks separate.
- Simplify the background. A cluttered background competes with the subject at every resolution, and at low resolution it wins.
Palettes: the half the slider does not do
Block size gives you the grid. What makes an image read as a specific era is the colour restriction that the hardware imposed. The original Macintosh was one bit: black or white, nothing else. The Game Boy displayed four shades of one green-grey. EGA-era PCs and home computers such as the Commodore 64 worked from fixed sixteen-colour sets, which is why art from that period shares a family resemblance no matter who drew it.
The converter itself does not quantise colour, so palette work is a separate pass. Two approaches work well:
- Run the image through the dither tool for a hard one-bit reduction with Floyd-Steinberg error diffusion. Dithering plus large blocks is the most convincing route to an early-computer look, because the scattered dots imitate exactly what artists did to fake extra shades.
- Use the palette extractor to pull the dominant colours out of a reference image, then push your source towards those hues before pixelating. Recolouring first and pixelating second keeps the blocks clean.
Never save pixel art as JPEG. JPEG compression is built around smooth gradients and reacts badly to hard edges. Ringing artefacts and colour bleed appear along every block boundary. The converter exports PNG for exactly this reason. If you need a different container, use the format converter and stay in a lossless format.
Style directions worth trying
Chunky 8-bit at 32 blocks wide with heavy contrast makes good avatars and profile icons. A 64-wide conversion with a lighter touch reads as 16-bit and keeps enough facial structure for a portrait. A one-bit dithered version at a large block size gives you the old dot-matrix aesthetic. And a very low block count, 16 or fewer, stops being a picture and becomes a colour-field abstraction, which is surprisingly effective as a background or a loading placeholder.
If you enjoy reducing images to their bare structure, the same instinct drives ASCII art, where brightness is mapped onto characters instead of blocks. And converted portraits make good meme material, where the typography conventions matter more than the resolution.
All of the conversion runs on a canvas inside your browser, so the photos you experiment with - family portraits, unreleased artwork, screenshots - are never uploaded anywhere while you try twenty different block sizes.