Why Would I Want To Scale Up Images And Keep Them Pixelated?

A few days ago I wrote a blog post on how to scale up images and keep them pixelated using Paint.NET. Today, I expand on that a little further, using more images to showcase differences.

First, here are some reasons to keep images pixelated as you resize them:
1. Creating a pixelated/retro game and you would like to scale up one of the images to be an icon that accurately represents the game.
2. Prototyping or creating a MVP.
3. Better compression and/or smaller file sizes. This in turn creates a slightly smaller file for users to download an app/game.
4. Not enough time (or skill) to create a full-fidelity/smooth image. So, you determine that a pixelated and crisp icon looks much better than a large blurry icon. (Screenshots for comparison below)

Initial image. 34x24 pixels.

A "regular" scale up resizing causes image to be blurry. 1000 x 1000 pixels with some margin.

This is how the stretched image looks if I didn't first add the margin for the gem to "grow" into. 1000 x 1000 px.

Using "nearest neighbor" scaling. 1000 x 1000 px.

Now, let's randomly compare image sizes of each of the above four images. Each of them were saved in the same PNG, 32-bit format.
1. 542 bytes
2. 137 KB
3. 174 KB
4. 17.6 KB

The pixelated scaled-up image has about a 10x smaller file size as a regular PNG. Using any more compression techniques, the difference would be even larger.

Though, admittedly, this example is small and simple enough that any modern computer will be able to handle these. A complication would arise more probably in a small embedded system or old phones/processors with bad data connections.

Bonus tip: Instead of choosing the different scaling options in Paint.NET or Photoshop. If you want to create a large pixelated image, the regular Microsoft Paint by default already does that.

~ Danial Goodwin ~

ps - A special thanks goes out to reader Spence for the great blog idea suggestion.

---

My Android Apps | My Windows Phone Apps | My Developer Blog

Level Up - Paint.NET: How To Scale Up Images And Keep Them Pixelated

Typically, when you resize an image in Paint.NET, it will use anti-aliasing in order for images to look less pixelated. But, sometimes, when you have a great small image, you want to keep it pixelated. So, here's how you do it.

1. From the menu bar, click Image->Resize (or just Ctrl+r).

Step 1. Go to the Resize menu

2. Locate the "Resampling" drop-down menu at the top of Resize window. By default, the option selected is "Best Quality".

Step 2. Click the Resampling option

3. Choose the "Nearest Neighbor" option. Set your width and heights. Then click "OK".

Step 3. Select "Nearest Neighbor" resize option

You now have a large image with the pixelation still intact.

How did I find this out? Experimentation (aka guess and check). Good thing there were only four options there to choose from. ;)

UPDATE: A few days later, I have now written a follow up to this with more image comparisons and reasons why you may want to keep pixelation on an image when resizing.

~ Danial Goodwin ~

ps - The image I used in my screenshots used to be 34x32 pixels, then I scaled it up to be 1000 pixels wide. Then, I added the gem's shine (which isn't pixelated).

---

My Android Apps | My Windows Phone Apps | My Developer Blog

Level Up: Scalable Vector Graphics (SVG Files)

Before today, I was level 0 in dealing with any vector graphics. In order to avoid pixelation in some of my images for a new app I'm creating, I had to open a SVG file and expand it from within there, then save it as a PNG. Now, I am level 1 in messing around with scalable vector graphics.

There are some commercially available products that open and manipulate SVG files, like Adobe's InDesign, CorelDRAW, and others. But, my choice is the free and open source Inkscape. Also, they provide some great tutorial in-app to help learn how to use it.

~ Danial Goodwin ~

---

My Android Apps | My Windows Phone Apps | My Developer Blog