Graphic optimization for iPhone

Question

Basically, I am creating a large iPhone game (with an overwhelming amount of 2d graphics).

I am concerned about the game file size.

Since the iPhone game will accept Retina and Normal display, we need 2 versions of each image (one HD and on normal). Therefore, it is necessary to resize our image files (it is not a good idea to resize the images in-game, an iPhone 3GS would have memory usage problems).

So my team is thinking about using Adobe Fireworks for the image creation, since it has that nice vector-resizing behavior without losing image quality (not-blurry on resize).

And it works alright.

But then I created an image that is pretty much the same in Adobe Photoshop, and it happened to be about 3x smaller in memory.

So naturally, there's something wrong with our Fireworks' files. How can I save my .png Firework file with the smallest memory size possible?

Note: the images require transparency.

Answer 1

How are you saving these PNG files from Fireworks? Fireworks uses PNG as its native file format, but adds meta-data to it (such as information about layers, effects etc.). This could be the reason why the Fireworks PNG files are larger than a PNG saved using Photoshop.

Since your iPhone app won't need any of the meta-information Fireworks stores, you should always use File > Export in Fireworks to export your assets. Similarly, use File > Save for Web & Devices in Photoshop.

While this should already result in considerably smaller PNG files, you could even further optimize them. Here's an excellent article about PNG optimization. Here's a ready to use tool for Mac and one for Windows (disclaimer: I never used the windows tool, but the Mac one can yield very good results).