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: Create Large Image From Small Image Source

In trying to create a logo for my newest game, I had a few images that were 32x32 pixels. So, my first thought for the logo was just a mash up with all of them. And, that looked something horrific, like:

A mashup of small pixelated icons

And, if that were scaled up to the size I needed, it would be even more pixelated, which I did not want for this game. So, I thought for a few seconds to determine what I were to do if I weren't lazy. Using my design background and my like for being minimal, I've decided to just create an image of my own that wouldn't be pixelated. If I were to just blow up an 32x32 image to 1000x1000, here's what it would look like:

This is worse than pixelation

Solution, in order to capture the essence of the game in just a single simple icon, I determined that the bomb disguised as a coin would best represent most of the game. Hopefully, it would also provide a little bit of intrigue to get users to click on it.

Final image, using only my own circles, lines, and rounded rectangles. Oh, and the practical use of Gaussian Blur for the level up! =]

Btw, you can play the free beta version at Simply Advanced Games. Coinqueror is coming soon for Windows 8 and Windows Phone 8.

~ Danial Goodwin ~

---

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

Construct 2: Exporting To Windows Phone Part 2

So, part 1 of issues isn't enough. The next issue happened when trying to create screenshots for the Windows Phone upload. A screenshot size of 768x1280 is required. Unfortunately, my Windows Phone 8 (Lumia Nokia 820) only takes screenshots at 480x800. Also, I'd rather not scale up the images that much, making them possibly pixelated and not as pleasant for viewers with devices of high fidelity. So, I learned that the default emulator also captures screenshots at 480x800.

Here's what I missed:
- I should have chosen the WXGA emulator, not the WVGA emulator. Just a slight difference there.

Now, everything's all good. I should have anymore hiccups as I publish this Windows Phone app made with Construct 2.

I found a use for the 480x800 screenshot I took. ;)

~ Danial Goodwin ~

---

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