Pixel art workflow
How to upscale pixel art without blur
Pixel art stays crisp when each source pixel becomes an exact square block. This guide explains the scaling and export choices that preserve that grid.
Updated
Pixel art depends on deliberate placement of individual colors. A photo resizer usually blends nearby pixels, which creates soft edges and extra shades that change the artwork.
The reliable workflow is simple: begin with the native-resolution source, use nearest-neighbor interpolation at a whole-number scale, export losslessly, and prevent the publishing platform from resizing it again.
Why pixel art becomes blurry
Bilinear and bicubic interpolation estimate smooth transitions between pixels. That helps photographs, but a one-pixel outline in a sprite is meant to remain a hard boundary.
Even a correctly enlarged file can look soft if a browser, document, or game engine displays it at a fractional size. The exported dimensions and the final display dimensions both matter.
- Use the original sprite sheet or PNG, not a screenshot.
- Avoid JPEG because ringing creates false colors around hard edges.
- Scale width and height by the same whole number.
- Display the result at 100%, 200%, or another integer multiple.
A crisp nearest-neighbor workflow
Keep an untouched source, then produce a separate delivery copy for each required size.
- 1
Confirm the native grid
Inspect at high zoom and make sure each artwork pixel maps to one image pixel.
- 2
Choose 2×, 4×, or 8×
Whole-number scaling keeps every source block equal and avoids uneven columns.
- 3
Use nearest-neighbor
Disable smoothing or choose the dedicated Pixel Art Upscaler rather than a photo enhancer.
- 4
Export and test PNG
Open the file at its intended display size and check outlines, transparency, and palette colors.
When nearest-neighbor is not enough
Nearest-neighbor faithfully enlarges what is already present, including compression damage, accidental semi-transparent pixels, and a sprite that was previously scaled incorrectly.
If the only available file is blurry, locate an earlier asset or redraw the grid before enlarging. Generative upscaling may create attractive artwork, but it no longer guarantees fidelity to the source sprite.
Pixel art export checklist
- The source is the native or cleanest available grid.
- The scale is a whole number and both dimensions use it.
- Smoothing and AI detail generation are disabled.
- The output is PNG or another lossless format.
- The destination displays the image at an integer scale.
Pixel art scaling questions
What algorithm keeps pixel art sharp?
Nearest-neighbor interpolation because it copies pixels without blending.
Can I use a 3× scale?
Yes. Any whole-number scale can preserve equal pixel blocks if the destination also displays it correctly.
Why does PNG still look blurry online?
The site may resize the file to a fractional CSS size or create its own smoothed thumbnail.
Should I use an AI image upscaler?
Not when exact sprite fidelity matters. AI can redesign edges and texture rather than only enlarge the grid.