Optimizing images

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Post Reply
Message
Author
User avatar
DrSchizo
Regular
Posts: 133
Joined: Wed Dec 03, 2014 12:53 pm
Tumblr: ninesquarezone
Contact:

Optimizing images

#1 Post by DrSchizo » Sat Jan 02, 2016 12:18 am

Not everybody has a fast internet connection and a lot of empty space of his/her 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 modify 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.

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 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 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 (see Jibus message below) 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 Pngyo. 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.

As I said before, audio files contribute as well largely to the final size of the project. I don't know anything about audio compression, but it could be great if someone could write a tuto about this!
Last edited by DrSchizo on Mon Feb 15, 2016 8:28 pm, edited 5 times in total.

Lightworker
Regular
Posts: 99
Joined: Sun Dec 13, 2015 2:06 pm
Projects: Detroit.exe
Skype: badthai
Contact:

Re: Optimizing images

#2 Post by Lightworker » Sat Jan 02, 2016 1:48 am

I love this post. I am trying to compress my file size as much as possible.
My project is like 67 MBs, and I do not have any images outside of the textboxes. How do I optimize the audio.

User avatar
SinaAzad
Regular
Posts: 176
Joined: Mon May 27, 2013 11:27 pm
IRC Nick: SinaAzad
Deviantart: sinaazad
Skype: sina_m_azad
Soundcloud: Sina_Azad
Location: Firenze, Italy
Contact:

Re: Optimizing images

#3 Post by SinaAzad » Sat Jan 02, 2016 2:39 am

Lightworker wrote:I love this post. I am trying to compress my file size as much as possible.
My project is like 67 MBs, and I do not have any images outside of the textboxes. How do I optimize the audio.
Usually optimizing audio mean losing quality , If you are going for maximum quality ... you need to use wave files which are ... LARGE so thats not an option , you want it to have quality but dont want it as large as wave files or 320 mp3 files ? thats cool , you need to convert it to vbr mp3 (Variable bitrate), but I'd suggest you to use ogg sounds , they are smaller in size an are well supported by renpy !

want to convert it ? I suggest using Foobar2000 which is free and add the plugin needed to convert the files !
I am very proud to be a part of this generous, nice and friendly community!
but please, don't go around telling people that their work is somehow off! thats not how critique works!
Mainly a C# Programmer

My drawings:

Image

Jibus
Regular
Posts: 135
Joined: Tue May 26, 2015 9:45 am
Contact:

Re: Optimizing images

#4 Post by Jibus » Wed Jan 06, 2016 9:58 am

My project was 399Mb, in order to reduce the size, I used JCC (http://www.renpy.org/wiki/renpy/doc/cookbook/JCC). At the end, my game was about 130Mo. It's not perfect, but i plan to reencode the audio part.

User avatar
DrSchizo
Regular
Posts: 133
Joined: Wed Dec 03, 2014 12:53 pm
Tumblr: ninesquarezone
Contact:

Re: Optimizing images

#5 Post by DrSchizo » Wed Jan 06, 2016 3:13 pm

Thanks Jibus, I've read about this in the cookbook but never tried it. I've added JCC compression to the tutorial.

Post Reply

Who is online

Users browsing this forum: No registered users