While I should have been testing more images, to prove my concept, I really have been busy with maturing my compression project.
For first time readers, a little flashback. Filesize is highly important when creating browser games. Small data size is required to get faster download times. Download time is a crucial factor for people to decide whether they will play your game or not.
So how to crop lots of images in your game, while keeping the download size acceptable? Well, use a very good compression format for your images. PNG has a good compression, however many PNG’s altogether make a slow download. With Inkscape, it is possible to trace PNG bitmaps into vector graphics and save them as XAML. But these vector graphics are usually much larger than the PNG you started with. I have been busy with a method to compress these Inkscape XAML’s, with some success.
The following picture illustrates different quality results, so they are easy to compare:
From left to right.
The first film-strip is the original PNG-24, 15.3KB, which is used in the game Slengo.
The second film-strip is the original PNG, but now saved as PNG-8, which is 4.59Kb.
The third filmstrip is an Inkscape result and then compressed with my compression technique. The original PNG-24 is input. Trace bitmap, smooth=false, remove background=true, scans=11. The size of this file is reduced to 11Kb, when winzipped.
The fourth filmstrip is an Inkscape result, compressed with my technique. Input is a regenerated image, similar to the PNG-24 original, but now twice its size. The original uses 40x40 frames, while this image uses 80x80 frames. The Inkscape steps taken are:
1. Trace bitmap, smooth=false, remove background=true, scans=11.
2. Simplify.
The size of the compressed result is 7.16Kb.
The fifth filmstrip is like the fourth filmstrip, but Trace bitmap has been performed with scans=10; one color-layer less than the fourth filmstrip. The resulting file can be compressed to 6.36Kb with Winzip.
An honest conclusion is that I did not beat PNG-8. However, I did beat PNG-24 with interesting results. The loss of quality, between original and result is clearly visible. But the quality of the fourth and fifth filmstrips are still quite acceptable.
I still need to investigate this method with more images. Even though it does not outperform PNG-8, it still may be an interesting method to compress vector-based images.
Subscribe