Codesmith

How to Reduce PNG File Sizes

Bilgin Esme   June 15, 2014   Design

In our first game, Volcano Island, which was a much simpler game than Rubber Boom, we came up with large image files that caused the game crash many times. And above all, the application package file exceeded 20BM, which was above the 3G download limit at the time.

So we learned the hard way, how to reduce the file sizes. Now I share the secrets. Keep in mind that, this is not a tutorial; only a blog entry to lead you the way. You can Google on specific items for details.

Good luck  

Cutting the Image to Smaller Chunks to Reduce PNG File Size - Tap/Click to Enlarge
Cutting the Image to Smaller Chunks to Reduce PNG File Size - Tap/Click to Enlarge

Whether you develop on iOS, Android, Windows Phone or XBox; you have a couple of image format alternatives, such as JPEG, GIF and PNG. Although you may use other formats, PNG is the most versatile one because:

  • You have a true transparency control
  • You have lots of palette options
  • There's already a compression system while compiling the package, the PNGs you'll create will be compressed during compilation. So no need to bother with JPG

But why do have to reduce the file sizes of the images in the first place? The answer is simple: "In fact, we don't have to".

Reducing the file sizes, makes your game more playable and look more professional. Large files take a lot of time to load between screens, also they take a lot of valuable memory space. Here are the reasons for targeting small file sizes:

  • Small files load more quickly, and the player waits less during screen loadings
  • Large files take a lot of memory space and this causes application crash often
  • The screens with large image files are bulky and not responsive, which is the most hated setback among players
  • The apps on AppStore which are above 50 MB can only be download via WiFi, not via 3G
  • Large images lead to large app package sizes. Among the players, large app size is regarded that a very sophisticated game with lots of screens, images and content is being downloaded. If it doesn't turn out to be so, the players think that they're deceived. The app file size should reflect the true league of your game. No less, no more.

If you're convinced that you should use smaller PNG file sizes, let's cover how shall we achieve it? There are three major methods:

1

Smaller Chunks

A large PNG in dimension increases the file size
2

Reducing Bit Depth

Do you really
need 24 bit?
3

Posterization

The ultimate
weapon
Cutting the Image to Smaller Chunks to Reduce PNG File Size - Tap/Click to Enlarge

1. Smaller Chunks

I don't have any idea about the file structure algorithm of PNG files, but images with large spatial dimensions take up more file size. Instead of dealing with large files, you can split into separate images.

In the example seen here, we have a large file with dimensions 2048 x 1314.

By the way, this is the background image of the Welcome and Start screens of Rubber Boom. The original file size is 150.8K.

After we cut it to three pieces as seen on the image, the total file dimensions of three separate files make up:

3.6K + 127.8K + 4.6K = 136.0K

As you remember that the original file was 150.8K, we save

150.8K - 136.0K = 14.8K

This may feel like a small and insignificant saving, but after all this is only a small random example I gathered while writing this entry. You can save much more on certain images.

As you may notice, we split the file into three pieces. And all these three pieces are structurally different from each other. The uppermost piece is the sky, the button piece is the river. If you can skillfully split the images to relevant pieces according to the context, you may save lots of file space.

Also, in game development, sometimes even 1K is very very important.

Reducing the Bit Depth of a PNG Image - Tap/Click to Enlarge

2. Reducing Bit Depth

The lossless format of the PNG is coded by 24 bits. Below 24 bits, the image is lossy. But if you adjust the parameters well, and if the context is suitable, you can use lossy images and the naked eye cannot see the difference.

Especially if there's a huge size saving opportunity, you should consider some loss in visual quality. If there will be a performance, playability and responsiveness loss in your game; visual quality loss is always preferable.

For example, take this quicksand image of the Jungle Book in game summary. The original image with 24 bits costs an unbelievable size of 352K. Here are the 3 alternatives in 8 bits.

The alternative on the top-right corner is coded with 8 bits by using 64 colors and takes up only 30.3K. Only 10% of the lossless version. And you can't see the difference at first sight.

Below two are the other alternatives with 8 bits coding with 32 colors, and with different palettes. The file sizes reduce to 24.2K and 23.K. But the image quality falls significantly.

In this situation, taking the top-right alternative is a great bargain.

Keep in mind that, reducing bit depth works better when you don't use transparency. You can still use transparency, but this needs further knowledge on fine-tuning the parameters. Personally, I keep using 24 bit if parts of the image are transparent.

Posterization of a PNG Image - Tap/Click to Enlarge

3. Posterization

Posterization is one of the best kept secrets among designers in general sense, much less a game developer knows about it.

"Posterization of an image entails conversion of a continuous gradation of tone to several regions of fewer tones, with abrupt changes from one tone to another" - Wikipedia.

The posterization algorithms combine the regions with similar color values. In a way, simplifies the image.

If you're working on cartoony images in your games, this method will do wonders for you. Apart from reducing the file sizes significantly; sometimes, posterization effect makes your image even more cute and lovely.

The image displays the Rubber Boom's cute pterodactyl. The original and the posterized versions. You cannot easily see the difference, and after all, the posterized one is arguable better than the original. As the bird is flying (not standing still), it's very hard to for the player to concentrate on such small details.

And most important of all; the image size is cut by half. Isn't it amazing?

Posterization works generally well, except for smooth gradients. Posterizing smooth gradients, causes rainbow-like rings. And generally not usable.

When you start developing games, you never think that you should be competent in many areas, and you should know many details. Unless you don't own a studio with dozens of employees working for you, you should master many details.

Reducing PNG file sizes is just one of these countless skills you should have at hand. Don't be frustrated, be patient and try to learn as much as possible.



Good luck