How to Reduce PNG File Sizes
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.
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:
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:
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:
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:
As you remember that the original file was 150.8K, we save
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.
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.
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?
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.
© Copyright 2014 Little Shop of Adventures