Few days ago, after all sprites for the player character, monsters and items were done. I was creating the background images for my game, and I notice how big they were. For example, the following image is the background of the first level and was originally saved in PNG, which resulted in 1.08MB. A whole megabyte is a lot for a single image for a simple web game, and it was in the resolution of 1024×768. The HD version of this image (2048×1536) had 2.54MB!
These ridiculous file sizes are the result of a bad choice for the image format. An image format describes how the pixels of an image are represented. A format can trade the image quality to make the file size smaller (Lossy), or can save the image in the best quality but in the cost of the file size (Lossless). A format also can specify if the image will have a limited number of colors (Indexed) or it will have no limitation (Direct). Common image formats includes: BMP, GIF, JPEG, and PNG.
BMP is a Lossless format and can be Indexed or Direct. There is no compression at all in this format, resulting in very large file sizes. It is an old format and have no application nowadays.
GIF uses a Lossless compression which preserves the image data, but it is an Indexed format used for images with less than 256 colors, impacting on the image quality. GIF also accepts transparency, but only in 100% (totally transparent) or 0% (totally opaque) levels. It is a pretty good format for simple images with limited colors, such as logos and some simple icons.
JPEG (or JPG) is a Lossy and Direct format, preserving the colors but losing image data. This combination makes the format specially useful for rich and complex images such as photographies, where losing some data are not (or barely) noticeable.
The PNG format also uses a Lossless compression, resulting in files with much less size than BMP, and is not limited to a fixed number of colors, such as GIF, thus, resulting in high quality images. PNG accepts alpha transparency, i.e., the transparency may range from 0% to 100%. PNG was created to improve and replace the GIF format.
Given these descriptions and examples, we can summarize:
- JPEG for complex and detailed artworks and photographies without transparency;
- PNG for simple images such as sprites, icons, logos, and all images that need transparency;
The first image presented here, which had 1.08MB for 1024×768 and 2.54MB for 2048×1536, converted to JPEG (and keeping a good quality) resulted in 201KB and 336KB for the 1024 and 2048 resolutions, respectively. This show the importance of knowing the different formats and choosing the right one for your images.