Optimizing images

Not everybody has a fast internet connection and a lot of empty space of her/his/their hard drive. Along with audio files, images contribute a lot to the final size of a game. When creating a Visual Novel, any author should try to optimize images in order to reduce file size in Mo.

For instance, the great Magical Otoge Ciel game is 144Mo big, including 61Mo of images. While images are correctely resize (step 1), they are all in PNG and are not optimized. As I converted this game to HTML5, I had to reduce the size of the image. I therefore modified the format of certain files (step 2) and used an image optimizer (step 3). In less than one our of work, the global image size was divided by four (15Mo instead of 61Mo) without any visible quality loss. If this changes had been made directely in the final Ren'Py release, the game size would have been 98Mo instead of 144Mo. I've chose this game as an example, but the results were similar for almost all the other games I've worked on.

It is not complicated and doesn't take a lot of time. There is just few simple steps to follow.

Step 1: Resize your images

Screen definition is defined in the configuration variable. It is by default 800x600 but can be changed to other values like 1024x768 (3:4) or 1280x720 (16:9). Except if you're planning to zoom on an image, there is no reason to use a higher definition than the display one. If the game is in 800x600, all background and CGS should be in 800x600 and sprites should be resize accordingly.

Nevertheless, images can be easily downsized, but will appeared pixelated if enlarged. It is therefore adviced for graphist and illustrator to work on high resolution images and reduce the file dimension at exportation. By doing so, you leave open the possibility of increasing the screen resolution later. As you can see here, about 97% of people have a screen resolution of 1024x768 pixels or higher. Moreover, most computers have a 16:9 widescreen display instead of 4:3. So, why keep using of format that nobody uses anymore? That's the reason why most Ren'Py project are now made in 1280x720. With the democratisation of high definition, it could even be worthwhile to chose a higher resolution like 1600x900 or even 1920x1080. But it will highly increase the size of the game in Mo.

Step 2: Chose the correct format

There are two main formats: PNG and JPG.

  • JPG: you can adjust the image quality to get a smaller file size. Unfortunately, JPG does not preserve transparency
  • PNG: high quality but the largest file size. It should therefore only used on image with a transparent background or with really clean line art.

Except few rare exceptions, all sprites should be saved in PNG while backgrounds and CGs should be in JPG.

Step 3: Use an image optimizer

Image software like photoshop let you chose the image quality for JPG when saving. A 80-90% compression is in most case not noticeable to human eyes and can reduce the file size up to 50%.
PNG images are not compressed and are really large files. Any PNG should be therefore optimized. Optimizers can greatly reduce the size of an image, by taking off informations that are not seen by human eyes. In most case, you can reduce an PNG image file size up to 75% without any visible quality lose.

List of image optimizers:

  • JPG: File Optimizer (Windows) and Image Optim (Mac)
  • PNG: I tried many compression engine and pngquant gives the best result. You can install PNGoo (Windows), Pngyu (Mac/Windows) or use an online convertor like kraken.io, websiteplanet and tinypng.com. This engine will only conserve 256 colors (or less) and will work wonderfully on most sprites. This color limitation can lower the quality on sprites with many gradients. In this case, you can use a less aggressive lossless compressor like File Optimizer (Windows), Image Optim (Mac) and others. If this lossless compression is not enough, you can use JCC compression that gives great result but is much more complicated to deal with. You should therefore use JCC compression only if all the other solutions failed

If you have many files to convert, it is adviced to install a software with batch conversion like PNGoo or Pngyu. When you're ready to release your game, you can optimize all your images in only few minutes!

Warning: some software replace the files when optimizing them. You should therefore always make a back up of your images before using batch conversion. Moreover, image can suffer from quality loss, so you should always check the results after.

Of course, there are other solutions to greatly reduce file size like using LiveComposite for character expressions.

Step 4: Do not forget to optimize audio files as well

As I said before, audio files contribute as well largely to the final size of the project. I personaly use Switch Audio File Converter to batch convert and optimize the audio file. On Lemmasoft forum, SinaAzad suggested using Foobar2000 which is free and adding the plugin needed to convert the files (this is also a great lightweight music player for Windows that I recommand). I know really little about audio compression so it could be great if someone else could write a tuto about this!

Back to the beginning of the guide