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

How To Programmatically Batch Resize A Folder Of Images

(This post gives a walkthrough on how to automatically resize a bunch of pictures at once. I provide four different ways to do the resizing, in order of least optimal to most optimal IMO. There may be more ways for programmatically resizing, but I'll most likely be using the fourth method below all of the time.)

1. ImageMagick
2. IrfanView
    2.1. Benefits
    2.2. Limitations
    2.3. Walkthrough
3. Photoshop's Automate Batch
    3.1. Benefits
    3.2. Limitations
    3.3. Walkthrough
4. Photoshop's Scripts Image Processor
    4.1. Benefits
    4.2. Limitations
    4.3. Walkthrough

--

1. ImageMagick: Allows you to run image processing in a Windows command windows. So, you must be comfortable creating BAT (batch) files. I did not use this method, but here's the documentation for batch resizing this way: http://www.imagemagick.org/Usage/windows/

FOR %a in (*.jpg) DO convert %a -resize 50% small_%a

ImageMagick Example

2. IrfanView: When I tried this method, I got the feeling this tool was very old, but it still seems to be regularly updated. Also, IrfanView has many image manipulation features available for it. Many of them seem useful, but this time I was only interested in the resize feature.
2.1. Benefits: Very lightweight program at 2MB.
2.2. Limitations: When I tried to batch resize, each of the images lost their alpha transparencies, and the backgrounds all turned black.
2.3. Walkthrough: Drag a selection of images into the screen, then in the menu bar, choose Image-->Resize/Resample

IrfanView: Program when opened

IrfanView: Menu bar --> Image --> Resize/Resample

3. Photoshop's Scripts Image Processor:
3.1. Benefits: Quick to being resizing without having to setup anything else.
3.2. Limitations: Only resizes to JPG, PSD, or TIFF files. There was no option to save as PNG, which is what I needed.
3.2. Walkthrough: Menu bar --> File --> Scripts --> Image Processor. Then the window that pops up allows you to choose the folder of images you want to manipulate and where to save them.

Photoshop's Scripts Image Processor

4. Photoshop's Automate Batch: Basically, with this method, you change one image whatever way you want to, then record those steps, then you are able to perform all of those steps for a folder of images.
4.1. Benefits: Very versatile! The recorded actions you create will always be available in the future, and easy to manipulate for future projects.
4.2. Limitations: Just requires a little more setup before starting the batch image process.
4.3. Walkthrough:
Step 1. Open Action Window.

Photoshop: Open Action Window

Step 2. Create New Action. Before you can record some actions, you must have an image open. It doesn't matter if it is just a new blank image, or one you would eventually edit anyways. One other useful feature is the ability to stop and record actions at any time.

Photoshop: Create New Action

Photoshop: Saved New Action. List of available actions.

Step 3. Open Batch Window.

Photoshop: Open Batch Window

Step 4. Setup and Start Batch Command. In the first section (Play), choose the action you would like to perform to all your images that you will choose in the second section (Source). In the third section (Destination), you can either replace all of the images or save the manipulated images in a new folder. After all that, choose the "OK" button located at the top right.

Photoshop: Setup Batch Command

Feel free to post any questions or comments about programmatically resizing many images.
~ Simply Advanced ~

---

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