Pixel art upscaler

Why ordinary resizing ruins pixel art

When a program makes an image bigger it has to invent the pixels in between. The default almost everywhere is to blend: each new pixel is a weighted mix of the originals around it. On a photograph that reads as smooth. On a 32-pixel sprite it turns every hard edge into a smear, because the art has no in-between shades to begin with, only flat squares of colour placed by hand.

The same thing happens when you don’t resize at all. Post a small sprite on a social site or drop it into a chat and the app enlarges it for display, with blending. That’s why the advice among pixel artists is to scale the art yourself, by a whole number, before it goes anywhere.

The three methods

Nearest neighbour is the plain one. Scale by 4 and each original pixel is a 4×4 square of the same colour. Nothing is added and nothing is lost, and the result looks like the original seen through a magnifying glass.

EPX (Eric’s Pixel Expansion) dates from the early 1990s, and the later Scale2x gives the same result. It doubles the image, and for each new pixel it looks at the two nearest neighbours of the original: if they match each other, the corner takes their colour. Staircase diagonals come out as smoother lines, and since it only ever copies existing colours, the palette doesn’t grow. Larger sizes are made by doubling again.

xBR, by the developer known as Hyllian, goes further. It examines a wider neighbourhood to work out which way an edge runs, then blends along the edge rather than across it. Curves and diagonals come out smooth. It does create intermediate colours to do that, so the output isn’t palette-pure, and on very small or very detailed sprites it can turn single-pixel details such as eyes into blobs.

My advice: use nearest neighbour unless you have a reason not to. The smoothing methods were made to make old games look better on bigger screens, and plenty of people think they make pixel art look like something else. Compare with the divider and decide by eye.

Whole numbers only

Every scale on offer is a whole number, and that isn’t a limitation of the code. At 2.5×, a row of four art pixels has to fill ten screen pixels, so some become two wide and some three. Lines that were one pixel thick come out with thick and thin stretches. At any whole scale, every art pixel is the same size and the proportions of the piece survive.

Art that has already been enlarged

A lot of pixel art online has been scaled before you get it: the file is 512 px wide but the drawing is really 64 px, each pixel stored as an 8×8 block. Scaling that with nearest neighbour works fine. Feeding it to EPX or xBR doesn’t, because they look at single pixels and all they see is the inside of flat blocks.

When you open a file, the tool checks whether the whole image is made of uniform blocks and what size they are. If it finds any, a switch appears, already on: Shrink to original pixels first. The image is reduced to one pixel per art pixel, losslessly, and then scaled by the method you chose. Turn it off if the blocks are part of the design.

The check only passes for clean enlargements. If the file was saved as JPG or resized with blending, the blocks aren’t uniform any more and the image is treated as it is.

Sizes for common uses

For a game, don’t upscale the files at all. Import the art at its original size and let the engine scale it with filtering turned off (Point in Unity, Nearest in Godot); the files stay small and you can change the size freely.

For posting, sharing and printing, upscale. For print, work from the printed size: at 300 dots per inch, a 32 px sprite scaled 16× to 512 px prints about 4.3 cm wide.

When it doesn’t look right

Still blurry after downloading. Check where you are looking at it. Many image viewers and web pages shrink a large image to fit the window, with blending. View it at 100%.

The colour count is in the hundreds before scaling. The source wasn’t clean pixel art; it had already been blurred or saved as JPG. Scaling can’t undo that. Go back to the original file if you can.

xBR made a mess of the face. Tiny features confuse edge detection. Use nearest neighbour, or EPX as a middle ground.

The result is too large to draw. The tool stops at 8,192 px per side. Pick a smaller scale; for a sprite sheet, cut it with the sprite sheet cutter, scale the frames, and pack them again in the sprite sheet maker.