Methods to compress image and audio files' size

[Genesis]

Since some people may be concerned that the file size of their game is too huge, here are some methods that may help in the compression of image and audio files' size.

(Note: Most of these methods can be pretty time consuming, especially for the one concerning Audacity because only one file can be dealt with at a time.)

(Double Note: I am not an expert when it comes to judging the quality of image and audio files, so I apologise if there are any inaccuracies on that part.)


Images

. Image formats: These are the three common image formats that are used to save VN files.

.jpg:
+ Quality: Lossy (poor quality), although when such images are saved with relatively high quality, they will still look pretty decent. Maximum quality of 10 can be set for a less pixelated image though it seems like quality 12 gives a more vibrantly coloured image.
+ File size: Usually smallest out of the three
+ Works best for: Images that are rich in colours (full colour) as you will get an image with a small file size as well as acceptable quality.
+ Not the best idea for: Images without complex (photo/soft-shaded colours) because compression becomes quite evident then (thus quality will appear poor).
+ Supports: Does not support transparency, translucency and animated images.
Note - For anyone's reference, saving a rocky image like this: http://orig01.deviantart.net/5924/f/201 ... 97pbxk.jpg with quality 12 can take up to 1MB.

.gif:
+ Quality: Lossless (better quality) but quality may be poor if the images have many colours.
+ File size: Usually biggest out of the three (can warrant the smallest file size if the image has limited colours)
+ Works best for: Pixel art/Images with fewer than 256 colours (small file size + pretty good quality)
+ Not the best idea for: Other kinds of art (especially those that require many colours). Linearts are also not a good idea since they can come out as pixelated.
+ Supports: Transparency, animated images. Does not support translucency.
Note: For anyone's reference, saving the rocky image can take up to 601KB.

.png:
+ Quality: Lossless (better quality)
+ File size: Usually in the middle of the three (can warrant the smallest file size for images that contain large amounts of pixels that are of the same colours and contiguous)
+ Works best for: Full colour transparent and translucent images, images that have a lot of pixels that have same colours and are contiguous. This is also the best option if you want genuinely lossless compression.
+ Not the best idea for: It is still an okay image format for other types of images but the file size will usually be bigger.
+ Supports: Transparency, translucency but not animated images
+ P.S.: It can save with .gif-style limited colours or with full colours.
Note: For anyone's reference, saving the rocky image can take up to 1.49MB.

. Separating Layers (in sprites) : The sprites can be separated to several sections to save space (instead of an expression that consists of a mouth, nose, a pair of eyebrows and eyes, they can be split up into different layers [saves more space and can create more variety in expressions]). This will probably require a more advanced level of coding (LiveComposite), but there's always tutorials in the Ren'Py Cookbook that can help.

. Relevant websites:
http://www.clickonf5.org/15311/image-co ... s-plugins/ (List of websites that can compress images)



Audio

. Audio formats: Very much like the image formats, changing the audio format can be an effective way, but it can also compromise quality.

.ogg:
+ Quality: Lossy (less quality) but I don't think the quality loss is noticeable.
+ File size: Small (and I think it saves the smallest filesize out of all audio formats, if I am not wrong)
+ Works best for: Usually the best idea for average VN audio
+ Not the best idea for: This probably isn't a good idea if you want 100% high-quality audio.
.flac:
+ Quality: Lossless
+ File size: Bigger than .ogg
+ Works best for: If you want extreme high-quality audio, then .flac is the way to go.
+ Not the best idea for: If you don't want big file sizes, then .ogg is still the best option.

. Audacity: Editing with Audacity also helps a whole load.
-> Changing Project Rate: There can be a few hundred KB difference if you simply set a file's project rate to 8000. (Additional note: However, plenty of high-frequency information may be lost in the process of decreasing a project rate, so this should probably be used at discretion.)
-> Cutting off Empty Periods: Usually, if there are unnecessary pauses in the audio files, I remove them so that more space can be saved.
-> Amplifying: This doesn't save a lot of space (probably a few KB) but it does help if the volume of the audio is lowered.
-> Changing Tempo: I won't recommend this method since it changes the music itself, but slowing down the speed of the audio still helps, so I'll just add it here.

. Relevant websites:
http://www.videograbber.net/compress-audio-file.html (Audacity)
https://www.youtube.com/watch?v=ACA9dnBLMAg (iTunes)

Reliability

With the use of Kraken.io and Audacity (except Changing Tempo), I manage to shrink a 50+ MB game to a 17~18 MB game so I think these methods are relatively effective. Of course, as mentioned above, they can be pretty time consuming but I do think they can help a bunch. For backgrounds, I save them as .jpg format; for transparent images, I save them as .png format; for audio files, I save them as .ogg format.

Hopefully this may be serve as help to some people.

[Tempus]

.png: For me, I would recommend this format the most since it is kinda in the middle between .jpg and .gif. It is also 'lossless' and (usually) doesn't have as big of a filesize as .gif does, and its size is reasonably small as well. Supports transparency but not animated images.

Saving an image as a PNG only makes sense under three circumstances:

1. The image contains large amounts of pixels that are the same colour and they're contiguous. Contiguous pixels just means they're touching one another. If you were to take a screenshot of this webpage saving it as PNG would result in both better quality and smaller file size than JPEG.
2. The image is a master file and needs to be saved losslessly so that it can be edited and resaved later.
3. The image requires transparency.

For every other image a decent quality JPEG should be used—no one will be able to tell the difference with the naked eye. PNGs should only be included in a released VN for reasons 1 & 3. If only a sprite's facial expression changes, save a base with a blank face and save the expressions separately. That will save a ton on the size of your game.

[Noyemi K]

.WAV is not lossless; it is totally raw PCM audio. There's a subtle but very important difference (as FLAC is lossless and significantly higher quality than an MP3 or OGG but not raw audio pulse code, so it needs a decoder in addition to the simple, humble DAC that's all that PCM needs).

Also I'd be very hesitant to bring an audio stream's sample rate down to 8kHz, since this means the nyquist will be 4kHz. Humans can hear up to around 20kHz, so a lot of important high frequency information in the audible range (such as the snap of a snare drum, or the sparkle elements elsewhere in a song) will be totally lost. Granted, you can roll off to around 15kHz (a nyquist of 15k means a sample rate of 30k is needed) without much noticeable difference, but as an audio engineer by trade I would advise against lowering it any further than that.

[Genesis]

Saving an image as a PNG only makes sense under three circumstances:

1. The image contains large amounts of pixels that are the same colour and they're contiguous. Contiguous pixels just means they're touching one another. If you were to take a screenshot of this webpage saving it as PNG would result in both better quality and smaller file size than JPEG.
2. The image is a master file and needs to be saved losslessly so that it can be edited and resaved later.
3. The image requires transparency.

For every other image a decent quality JPEG should be used—no one will be able to tell the difference with the naked eye. PNGs should only be included in a released VN for reasons 1 & 3. If only a sprite's facial expression changes, save a base with a blank face and save the expressions separately. That will save a ton on the size of your game.

Thank you for the suggestions! I had considered about your first point beforehand but figured that some people may prefer quality a little more, although I should probably add that just for some food for thought. Thinking about it now, I think I may be missing some details so I'll go back to update the post again.

.WAV is not lossless; it is totally raw PCM audio. There's a subtle but very important difference (as FLAC is lossless and significantly higher quality than an MP3 or OGG but not raw audio pulse code, so it needs a decoder in addition to the simple, humble DAC that's all that PCM needs).

Also I'd be very hesitant to bring an audio stream's sample rate down to 8kHz, since this means the nyquist will be 4kHz. Humans can hear up to around 20kHz, so a lot of important high frequency information in the audible range (such as the snap of a snare drum, or the sparkle elements elsewhere in a song) will be totally lost. Granted, you can roll off to around 15kHz (a nyquist of 15k means a sample rate of 30k is needed) without much noticeable difference, but as an audio engineer by trade I would advise against lowering it any further than that.

That's interesting information but isn't .wav still considered a lossless format (since it does use PCM, or does the additional decoder bridge that difference)? I do notice that it is in uncompressed and has a larger file size than .flac though, so I'll add that in.

[KuroOneHalf]

I currently see absolutely zero reason for people to use anything but OGG for the audio files in their game. The different in quality is, at least to me, indiscernible, and the file size reductions are immense.

In terms of image files, I've lately been finding that PNG nets me the lower file size for roughly the same quality, even for images with lots of gradients and color variation. Though difference between that and JPEG shouldn't matter too much unless it's meant for web.

[Genesis]

I currently see absolutely zero reason for people to use anything but OGG for the audio files in their game. The different in quality is, at least to me, indiscernible, and the file size reductions are immense.

In terms of image files, I've lately been finding that PNG nets me the lower file size for roughly the same quality, even for images with lots of gradients and color variation. Though difference between that and JPEG shouldn't matter too much unless it's meant for web.

I have to agree with your first statement completely for now!

That happens to me sometimes as well so I guess it may be due to the nature of the images (although I am not too sure what are other relevant factors that can affect file size other than colours).

[Fox Lee]

I don't know if you wanted feedback/suggestions, but here are my thoughts:

Is it fair to call GIF Lossless? Unless they've made some major changes I wasn't aware of, GIF can only handle up to 256 colours, so it is certainly NOT going to save the sort of art we see in most modern VNs without destroying the image quality. Even completely solid cel-style shading can come out noticeably worse, if the image is scaled after shading.

I think it would be more helpful, for people not familiar with file types, to describe it as strictly for pixel art or other images with fewer than 256 colours. It would also be a good idea to note that it can't handle translucent (partially transparent) pixels, so unless a sprite is supposed to have a completely hard outline, it's a non-starter.

It would also be worth noting that JPG is actively bad for images without complex (photo/soft-shaded) colours, as its compression is very noticeable in areas of block colour.

The main strength of PNG is that it can save EITHER with GIF-style limited colours, OR with full colour. For full colour files with no transparency jpeg gives smaller filesizes (in exchange for reduced image quality, of course - but you can usually get smaller sizes at an acceptable quality), but if you want transparency AND full colour - or translucency, or genuinely lossless compression - PNG is pretty much the only game in town (at least for VN purposes).

[Genesis]

I don't know if you wanted feedback/suggestions, but here are my thoughts:

Is it fair to call GIF Lossless? Unless they've made some major changes I wasn't aware of, GIF can only handle up to 256 colours, so it is certainly NOT going to save the sort of art we see in most modern VNs without destroying the image quality. Even completely solid cel-style shading can come out noticeably worse, if the image is scaled after shading.

I think it would be more helpful, for people not familiar with file types, to describe it as strictly for pixel art or other images with fewer than 256 colours. It would also be a good idea to note that it can't handle translucent (partially transparent) pixels, so unless a sprite is supposed to have a completely hard outline, it's a non-starter.

It would also be worth noting that JPG is actively bad for images without complex (photo/soft-shaded) colours, as its compression is very noticeable in areas of block colour.

The main strength of PNG is that it can save EITHER with GIF-style limited colours, OR with full colour. For full colour files with no transparency jpeg gives smaller filesizes (in exchange for reduced image quality, of course - but you can usually get smaller sizes at an acceptable quality), but if you want transparency AND full colour - or translucency, or genuinely lossless compression - PNG is pretty much the only game in town (at least for VN purposes).

Feedback is always welcomed. Thank you for the suggestions! I have added them into the main post itself.

[Tempus]

Here's an example of how extreme the savings can be when choosing the correct file type. The attached PNG file is 10,000 x 10,000 pixels and is 752kb. The equivalent good-quality JPEG with the same dimensions is around 62mb. If I crop it to 1,000 x 1,000 pixels the JPEG still produces a larger file size at 919kb. This is basically the only case PNG is better than JPEG in terms of file size, but it pays off massively.

Also, regarding JPEG settings in Photoshop—quality 10 should be the setting you choose unless there's noticeable artifacts. Quality 11 and 12 balloon the file size for little gain.

[Genesis]

Here's an example of how extreme the savings can be when choosing the correct file type. The attached PNG file is 10,000 x 10,000 pixels and is 752kb. The equivalent good-quality JPEG with the same dimensions is around 62mb. If I crop it to 1,000 x 1,000 pixels the JPEG still produces a larger file size at 919kb. This is basically the only case PNG is better than JPEG in terms of file size, but it pays off massively.

Also, regarding JPEG settings in Photoshop—quality 10 should be the setting you choose unless there's noticeable artifacts. Quality 11 and 12 balloon the file size for little gain.

Thanks for the example; that'll be a good reference.

I agree that quality 10 is the best (small file size with decent quality) but I just notice that .jpg pictures with quality 11 and 12 have more vibrant colours. The difference isn't huge either way.

[Chellettate]

As you have talked about the ways to compress the images in details. I would like to add one more way to compress audio files: http://www.videoconverterfactory.com/ti ... essor.html
Since bitrate is the most crucial parameter to determine the file size and quality for audios and videos, files with higher bitrates sound better but they are larger in size. Audio with lower bitrates makes files smaller, but the sound quality is often sacrificed. So when you want to compress the audio files bu changing bitrate, you'd better not adjust it lower than 128 kbps.

[Imperf3kt]

For audio, you get better results using variable bitrate, rather than constant bitrate.