Pixel Art Upscaler

How the Pixel Art Upscaler works

Every ordinary image resizer is built to make photographs look smooth. It interpolates: to work out the colour of a new pixel it averages the neighbouring source pixels, using bilinear or bicubic weighting or something fancier. On a photograph that is exactly right, because the original scene was continuous and the pixels are just samples of it. On pixel art it is destructive, because there is nothing between the pixels — each one is a deliberate decision, and averaging two adjacent ones invents a colour the artist never chose.

Why a pixel art upscaler is needed

Pixel art is drawn tiny on purpose. The NES output 256 × 240 pixels, the Game Boy 160 × 144, and modern indie games that borrow the look often work at 320 × 180 or 640 × 360 so the canvas divides evenly into a 1920 × 1080 screen. A character might be 16 × 16 pixels with a palette of eight colours. Shown at that size on a 4K monitor it is a speck, so every sprite has to be enlarged before anyone sees it — and the method of enlargement decides whether it still looks like pixel art or like a blurry thumbnail.

Nearest-neighbour scaling is the answer. Instead of averaging, it asks which single source pixel a destination pixel falls inside, and copies that colour. Scale by four and every source pixel becomes a 4 × 4 block of identical colour. Nothing is invented, nothing is blended, the palette is preserved exactly, and the hard edges that define the style survive. This is the scaling every sprite editor and emulator uses, and it is what browsers do when CSS says image-rendering: pixelated.

Where it gets used

• Store pages and social posts. Steam capsule images, itch.io covers and app-store screenshots have fixed pixel sizes, and social platforms resample and recompress anything small. Uploading a sprite at 8× or 10× means the platform's own smoothing has almost nothing to damage.
• Game engines. Unity's "Point (no filter)" and Godot's "Nearest" texture filter do the same thing at run time. Pre-scaled exports are still handy for menus, trailers and press kits built outside the engine.
• Printing. A 32 × 32 icon printed at 300 DPI is about 2.7 mm across. At 32× it is 1024 pixels, enough for a sticker or a T-shirt with every block crisp.
• Documentation and tutorials. Enlarged sprites with a grid make it possible to talk about individual pixels, which is how most pixel-art teaching is done.

Tips and pitfalls

Whole numbers only, and that matters. Scaling by 3 turns each pixel into a perfect 3 × 3 block. Scaling by 2.5 cannot: some pixels become 2 wide and some 3, so a sprite with an even outline develops a visible stagger where the rounding alternates. That inconsistency is far more noticeable than the size difference, so this tool only offers integers from 2× to 32×. If you need a specific output size, pick the nearest factor and let the result be slightly bigger or smaller, or pad the canvas afterwards.

Start from the true resolution. If a sprite has already been enlarged once with smoothing, or saved as a JPEG, its edges are already soft and full of stray colours; scaling it again just makes bigger mush. Go back to the original PNG or the file from the sprite editor.

What the grid overlay is for. Drawing a one-pixel line along every block boundary makes the underlying resolution legible at a glance — useful for counting pixels when replicating a sprite, checking that an asset really is the grid size it claims, or presenting pixel art in documentation. It is baked into the exported PNG, so turn it off before using the output as an actual asset. Light suits dark sprites, Dark suits pale ones.

Transparency is preserved. The output is always PNG, and since nearest-neighbour copies the alpha channel along with the colour channels, a transparent background stays transparent with the same hard edge as the source. There are no semi-transparent halo pixels, which is exactly what happens if you scale a sprite with interpolation.

Don't convert to JPEG afterwards. JPEG compression works in 8 × 8 blocks and smears hard colour edges, which is the worst possible thing for pixel art. Keep PNG, or use lossless WebP if file size matters.

When not to use this. If the source is a normal photograph or a high-resolution graphic, this tool will make it look worse than any standard resizer would: you will get visible blockiness with none of the stylistic payoff. Nearest-neighbour enlargement is only the right answer when the individual pixels are meant to be seen. For photographs, use the Image Resizer and the advice in how to compress an image for the web.

The size can grow fast. Output pixels scale with the square of the factor, so a 64 × 64 sprite at 32× is 2048 × 2048 — four million pixels from four thousand. Anything over 40 megapixels is refused rather than crashing the tab, and the message names the largest factor that fits.

How to read the result

The stats panel lists the source and output dimensions with their file sizes; the output should be exactly the source width and height multiplied by the factor, and "Each source pixel" confirms the block size. Zoom into any edge: every block should be a solid square of one colour with no in-between shades. If you see soft edges, the source was already blurred before it reached this page. Counting blocks across a known feature, such as a character's eye, tells you the original grid size, and with the grid overlay on, each cell is one source pixel.

Related tools