How To Resize Pixel Art while Retaining Sharpness

Pixel art may look 8-bit but with the right creative flair and Photoshop skills you can make some seriously good pieces of art with it. As usual, there are some techniques you will find useful when working with pixel art. One is resizing and scaling without the image blurring. It isn’t as straightforward as it initially seems, hence this tutorial.

This is another of those tutorials where I lean on a friend to help. This time it’s a digital artist who works for a well known magazine. She spends her time designing magazine layouts but loves messing around with pixel art when she gets the opportunity. So while the words in this piece are mine, the knowledge and the necessary skill to generate beautiful results are all hers.

The challenge of resizing pixel art

Depending on the program you use, resizing usually involves some kind of blurring or loss of detail as pixels are stretched to their new dimensions. Most programs don’t add detail to images to make them larger, they make the pixels larger to fit your required size. The program then decides what size each pixel should be and spreads it evenly across the image.

In most artforms, a little blurriness doesn’t matter. For photography there should be enough data within the image to allow the program to increase the image size and add that detail, or increase the size without losing sharpness. With pixel art, there isn’t that extra information for the program to add that extra detail.

That gives us a problem. By its very nature, pixel art is sharp and has blocky edges. By resizing up, you risk that sharpness which we don’t want to do.

Resize pixel art while retaining sharpness

We can resize pixel art while retaining sharpness using Photoshop. Other programs will likely do much the same thing but my friend uses Photoshop so that’s what we’ve got.

Here’s how to do it:

1. Open your pixel art image within Photoshop.
2. Open Image and Image Size.
3. Enable Preview if it isn’t already enabled.
4. Check the box next to Resample. This allows Photoshop to retain sharpness.
5. Change Interpolation from Automatic to Nearest Neighbor.
6. Add a percentage into the Width and Height box to resize it.
7. Select OK once finished.

Photoshop’s Resample tool allows the program to look at the image and modify it appropriately when resizing. It works very well indeed for pixel art and fills in most of the required data to the image. You may want to inspect the image closely before saving though, just in case.

Apparently it is better to use percentages than exact image sizing as it retains the shape of each pixel. If you specify a size, Photoshop can mutate pixels into different shapes to achieve the change. By specifying percentage, each individual pixel is expanded by that percentage. This retains the shape and position of each relative to their neighbor.

Changing Interpolation to Nearest Neighbor ensures Photoshop does not use its built-in logic to add detail to the image. As we usually resize standard images, Photoshop guesses at the data necessary to retain the image while being resized. We don’t want that. We want a pixel for pixel percentage size increase with no extra details added. Setting it to Nearest Neighbor ensures this.

Resize pixel art by exact size

Apparently you can resize pixel art to an exact size if you need one but it involves a little more work. For example, if you’re going to publish it online and have a placeholder of a specific size, you can resize a pixel image to that size.

1. Follow the guide above up to Step 6.
2. Add ten percent onto the desired image size so it is larger than you require. If you resized your image to 200% above, do it to 220% here.
3. Open Image and Image Size.
4. Set Width and Height in pixels to your desired size.
5. Change Interpolation from Automatic.
6. Select OK.

Automatic Interpolation works better here when downsizing. It will reproduce the pixel art exactly without adding any detail because we are shrinking and not expanding. It’s a convoluted way of doing things but the end result is an image that fits your desired dimensions and retains all the characteristics you need.

Other graphics or photo editors will likely work the same way. I don’t have a great deal of experience with pixel art so will take an expert’s advice on that. If you know differently or know of other ways to resize pixel art without losing sharpness, tell us about it below!