image format: file size, performance and quality
Monkey Archive Forums/Monkey Discussion/image format: file size, performance and quality
| ||
| Hi, (yet again) I would be interested in opinions from more experienced Monkeycoders/game developers. What do you think is a good compromise regarding image formats and file sizes/overhead of decoding. It's certainly better to have a smaller app size, but then for iOS Apple recommends PNG for various reasons and I also read that at least on iOS PNGs are quicker to display/less overhead. I love everything about PNGs - being lossless, alpha transparency - but the larger file size. For many games the image format probably wouldn't make a big difference, but I'm working on an interactive book project with scanned original drawings, so there are many large images, and with better resolutions (iPad3) file size really matters. Anyway, here's a comparison chart of a total of 40 full size images and file sizes: +--------------------------++----------+-----++-----------+-----+ | format / dimension || 1024x768 | % || 2048x1536 | % | +--------------------------++----------+-----++-----------+-----+ | PNG original || 33.6MB | 100 || 134.0MB | 100 | +--------------------------++----------+-----++-----------+-----+ | PNG optimised * || 30.3MB | 90 || 121.5MB | 91 | +--------------------------++----------+-----++-----------+-----+ | PNG iphoneos-optimize ** || 52.9MB | 157 || 212.6MB | 159 | +--------------------------++----------+-----++-----------+-----+ | JPG quality 80 || 13.5MB | 40 || 55.4MB | 41 | +--------------------------++----------+-----++-----------+-----+ | JPG quality 60 || 8.5MB | 25 || 34.6MB | 26 | +--------------------------++----------+-----++-----------+-----+* optimised with PnGenie ( http://www.gingerbeardman.com/pngenie/ ), see also http://www.monkeycoder.co.nz/Community/posts.php?topic=253 ** optimised with iphoneos-optimize, see http://www.monkeycoder.co.nz/Community/posts.php?topic=2464 The chart shows that the difference in total file size is massive, and e.g. a universal iOS app (iPhone/iPad1+2/iPad3) would probably have another set of smaller images for smaller non-retina devices such as iPod Touch. So regarding size, quality, and especially also performance, what are your thoughts about this, please? Thank you! |
| ||
| When I was working with Flash banners, I would have to resort to all kinds of tricks to get file sizes down. The thought is to break apart images into what they were used for: - static backgrounds = highly compressed jpg - small moving object = Png ...if monkey had vector masks, then you could keep everything JPG and create masks for animated images. |
| ||
| I find that using pngquant gives good results when trying to reduce the PNG size. It takes the 24 bit PNG and does a lossy transformation to 8 bit, but retains the full alpha channel. This reduces the size greatly and the quality is still good enough. [url]http://pngquant.org/[/url] (Since this is lossy, one of course needs to keep copies of the source images.) I believe that most other PNG optimizers are lossless, so this might be interesting when making comparisons. |
| ||
| There might be ways to reduce your PNGs even more. Take a look here: http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/ As for other tricks, you could try composing your images. At work we have a relatively simple tool that builds what we call "frames". Those frames are nothing more than pieces of an image atlas put together to compose another image. It will need some extra work to make an editor to glue together more parts of the image, but that way you'll be able to reduce the file size the most: Non-transparent pieces of an image > JPG as low as possible before it starts to look bad. Transparent pieces > PNG and try to reuse them. One last thing could be vectors, but that may just be way too much work and perhaps not that fit to your case. Good luck! |
| ||
| These are really good links, thanks! PNGQuant can be quite useful for some image types. The PNG optimisation article is really interesting. This will all really help to reduce file sizes. |
   |