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.
