Upscaling pixel art without blurring it

• #images
• #design
• #gaming
• #in-browser
• #pixel-art

A 32 by 32 sprite looks great in an editor zoomed to 1000%. Drop it into a web page or a slide at a bigger size and it turns into a soft, smeared blob. Nothing is wrong with the sprite. The problem is the way it was enlarged.

Why resizing blurs pixel art

When an image editor or browser makes an image bigger, it has to invent the new pixels in between the old ones. The default methods, bilinear and bicubic, do that by blending neighbouring colours. For a photo, that is exactly what you want: smooth gradients stay smooth and nothing looks blocky.

For pixel art it is a disaster. The whole look depends on hard edges between flat colours. Blending invents in-between shades that were never in the palette, softens every outline and turns a crisp one-pixel highlight into a fuzzy smudge.

Nearest-neighbour keeps it sharp

Nearest-neighbour scaling does not blend anything. Each new pixel simply copies the colour of the nearest original pixel. Scale a sprite up by four and each original pixel becomes a 4 by 4 block of exactly the same colour. Edges stay hard, the palette stays the same, and the image looks like a bigger version of itself.

In most image editors this is a setting on the resize dialog, often called "nearest neighbour", "hard edges" or "none" for the resampling method. Forgetting to set it is the cause of most blurry sprites.

Use whole-number factors

Nearest-neighbour has one catch. If the scale factor is not a whole number, some original pixels become, say, three new pixels wide and others become four. At 2.5×, a row of identical pixels comes out as alternating 2- and 3-pixel blocks. The result is uneven: lines wobble, circles lose their shape and checkerboard dithering turns into stripes.

So stick to 2×, 3×, 4× and so on. If you need a particular final size, pick the whole-number factor that gets closest and pad or crop the canvas, rather than scaling by 2.37.

Keep the browser from blurring it again

Even a correctly upscaled sprite can be blurred a second time by the browser if it is shown at a size other than its natural one. On high-density screens the browser scales every image by the device pixel ratio, and it uses smooth scaling by default.

CSS can turn that off:

img.pixel {
  image-rendering: pixelated;
}

With pixelated set, you can even serve the small original and let the browser scale it with nearest-neighbour, which saves bandwidth. It is still worth exporting a large version for places you do not control, such as social media, app stores and documents, which will apply their own smoothing.

Smarter upscalers

There is a family of algorithms designed specifically for pixel art, with names like Scale2x, hqx and xBR. Instead of copying pixels as blocks, they look for diagonal edges and round them off, so a jagged staircase becomes a smooth slope. They were developed for emulators and can make old game art look cleaner on modern screens.

They are a stylistic choice rather than a fix. They change the art, and the result no longer looks like pixel art in the strict sense. If you want the blocky look, nearest-neighbour at a whole-number factor is the right tool. If you want a smoothed look, try one of the edge-aware methods and judge it by eye.

General-purpose AI upscalers are usually the wrong choice for pixel art. They are trained on photographs and tend to add texture and detail that the artist did not draw.

Export at the size you need

A simple workflow for sprites:

1. Draw at the native size, such as 16, 32 or 64 pixels.
2. Save the native-size PNG as your master. Never edit an upscaled copy.
3. Export upscaled copies with nearest-neighbour at whole-number factors for each place you need them.
4. Use PNG, not JPEG. JPEG compression adds blocky artefacts and colour noise that are very visible on flat pixel art.

If an export needs to land at an exact pixel size that is not a whole-number multiple, scale up first with nearest-neighbour to the nearest multiple above, then scale down. The downscale will soften it slightly, but far less than a straight smooth upscale.

Tools for the job

The pixel art upscaler enlarges a sprite by a whole-number factor with nearest-neighbour scaling in the browser, so nothing is uploaded and nothing is blurred. To draw or touch up the sprite first, the pixel art editor works on an 8 to 64 pixel grid and exports PNG at any scale. For photos and screenshots where smooth scaling is what you want, use the ordinary image resizer instead.