Blog

How to scale pixel art up without blur

Learn why pixel art gets blurry when enlarged, how to use nearest-neighbor scaling, and which image settings keep edges crisp.

Andrew PriceApps and software 4 min read

To scale pixel art up without blur, use nearest-neighbor resampling and enlarge the image by a whole-number factor, such as 2x or 4x. This method copies each pixel into a larger block instead of blending it with nearby colors.

The key is to change the image itself, not just zoom in on it. Follow these steps to make a larger file while keeping the original pixel shapes and colors intact.

Scale pixel art without blurring it

  1. Make a copy of the original. Keep the unscaled image so you can start over if the result is wrong. For browser-based pixel-art editing, the Pixel Art Editor opens pictures and exports PNG or GIF files. For the resize itself, use an editor with a nearest-neighbor option, such as Photoshop or GIMP.
  2. Choose a whole-number scale factor. For a 16 by 16 pixel sprite, a 2x enlargement makes it 32 by 32 pixels, while a 4x enlargement makes it 64 by 64. Each original pixel becomes a block that is 2 or 4 pixels wide and tall.
  3. Work in pixel dimensions. Decide the new width and height by multiplying each original dimension by the same factor. Keep the aspect ratio locked if the editor offers that setting, so the sprite does not stretch.
  4. Select nearest-neighbor resampling. In Photoshop, open Image › Image Size, make sure resampling is enabled, and choose Nearest Neighbor (Hard Edges). In GIMP, open Image › Scale Image and set Interpolation to None. Enter the new pixel dimensions and apply the resize.
  5. Check the result and export a copy. Look closely at outlines, single-pixel details, and transparency. Save the enlarged image as PNG to keep sharp edges and transparent areas. Avoid JPEG for pixel art because its compression can add color artifacts around edges.

If your artwork is part of a sprite sheet, scale the entire sheet by the same whole-number factor. Keep the frame width, frame height, and gaps between frames consistent so the sprites remain aligned when you use them in a game or animation.

Why nearest-neighbor scaling works

When an image is enlarged, the editor must decide what color to put in the new pixels. Smooth resampling methods estimate colors between the old pixels. That can look good on a photograph, but it creates soft edges and extra shades in pixel art.

Nearest-neighbor resampling assigns each new pixel the color of the closest original pixel. If one source pixel is blue, the larger block representing it stays blue. The edges remain hard, and the original color palette is preserved.

A whole-number enlargement keeps the blocks even. If a 16-pixel-wide image is scaled to 48 pixels, each source pixel becomes 3 pixels wide. If you scale it to 50 pixels instead, some source pixels must take up a different number of pixels than others. The result can still be sharp, but the pattern may look uneven.

Check that you enlarged the file, not just the view

Zooming in on a canvas changes how large the artwork looks on your screen, but it does not add pixels to the image. Check the exported file's pixel width and height to confirm that the image dimensions changed. A 16 by 16 sprite enlarged 4x should be 64 by 64 pixels.

Also, the preview can look soft even when the file is correct. Some apps smooth their display when zooming. Inspect the exported image at 100% or at a whole-number zoom level, and check its pixel dimensions rather than judging only by the preview.

Problems you might hit

The enlarged art still looks soft

Check that the resampling method was set to nearest neighbor before you resized. If the editor used bilinear, bicubic, or another smoothing method, undo the resize or reopen your copy of the original and try again with nearest neighbor. Repeatedly resizing an already blurred image will not restore the original hard edges.

Some edges already have blended colors

Nearest neighbor preserves the pixels that are already there, including any blended colors along the edges. It does not turn anti-aliased artwork into clean pixel art. If those soft pixels are part of the source, remove or redraw them in a pixel editor before enlarging.

The image looks stretched

Check that you multiplied the width and height by the same factor. For example, scaling a 16 by 24 image by 3x should produce dimensions of 48 by 72 pixels. If one dimension was entered incorrectly, return to the original copy and resize again.

A transparent background turns solid

Choose PNG and confirm that the editor preserves transparency when exporting. Some formats or export settings replace transparent areas with a background color. Reopen the exported file to verify that the background is still transparent.

The sprite sheet no longer lines up

Scale the complete sheet uniformly rather than resizing individual sprites by eye. Multiply the sheet dimensions and each frame's dimensions by the same factor, and keep the spacing between frames proportional. A grid or guide in your editing app can help you check alignment.

Pixel art files opened in TooLab's Pixel Art Editor are processed in your browser, and the file stays on your device. For a crisp enlargement, the important setting is nearest-neighbor resampling in the editor you use to resize the image.