Big up ImageOptim and ImageAlpha!! png optimization.

Slowboy

Hey all, I know many people already make use of the above mentioned apps for reducing the size of pngs, but I thought I'd better give them a special mention as they have just reduced my image folder from 46Mb to 15.4Mb! I've also used it previously, but have just gone through a much more involved process that has given these great results...

(note, try and follow this exactly, as it even took me several attempts to get this list written properly!)

01. Get the apps! at

ImageOptim = http://imageoptim.com/
ImageAlpha = http://pngmini.com/

02. Right click your myfatgame.gameproj and Show Package Contents
03. Copy the Images folder out somewhere safe, leave this alone so you can compare your results.
04. So, make another copy of this folder right next to it and call it Crunch1, or whatever you want.
05. Run ImageOptim
06. Select all your images from Crunch1 and drag them into the ImageOptim window.
07. Wait a few hours (my 45megs took at least 2 hours to finish (I went to bed)).
08. Brush your teeth (if necessary).
09. Make a copy of your Crunch1 folder and call it Crunch2.
10. Use Finder to find the FOLDER that contains ImageAlpha.app
11. Right click the FOLDER and Copy Path > Terminal Path
12. Run Terminal
13. Type 'cd ' (lower case, with a space after) then Cmd+V to paste the path, then Enter
14. Now copy and paste this into terminal...

ImageAlpha.app/Contents/Resources/pngquant -v -speed 1 -force -ext .png

....make sure you put a SPACE at the end, after .png

15. ...and then select everything in Crunch2 and drag it into the Terminal window!
16. If you dragged loads of files this will look very ugly and may take a few seconds, don't panic.
17. Ready? Now press Enter!
18. Munch munch munch, should be quicker than last time, but your pngs will now be even smaller!

Now go and compare the folder sizes of your original Images, Crunch1 and Crunch2 folders. Best way to do this is to select the first folder, then Cmd+Opt+i to get a constant info pane, then arrow up and down to see each folders size (assuming you put them all right next to each other?)

Also compare the quality of the images. I compared mine pretty thoroughly and was only able to spot any real differences when zoomed right in, hopefully you'll be just as happy with the results!

Cheers
Wayne


Oh, one more thing, I should remind you that you'll now need to replace the contents of the Images folder, within your Package Contents, with your new super slim pngs from Crunch2! You hadn't forgotten, had you?

Manto

Doesn't work for me. I got a message of "permission denied" at item #17. Any ideas what I could be doing wrong?

Slowboy

Looks like your Crunch2 folder is locked. Right click the folder, Get Info, Press the padlock, put in your password, make sure all the Privileges above the padlock say 'Read & Write', click the gear icon at the bottom, tell it to 'Apply to enclosed items...', say, Yes, I'm sure...
Better?

Manto

That wasn't the problem but I did everything again from start to finish and this time it worked. I already had the programs but I didn't use the ImageAlpha as it did only one image at a time. Thanks for the terminal trick!

I got my images folder size from 1,9mb to 0,469mb. Size reduced by 75%!

ashtmj

Sounds cool!
@Slowboy Does this help with a games frame rate/loadtimes at all? or just lowers the file size for uploading to apple/downloading from the app store

Manto

@ashtmj The memory usage of images went down by 20mb for me and fps went up by 4 on Acer Iconia a100. Not sure how much it affects the loading time. (I didn't see much difference)

carlblanchet

Awesome! Thanks for sharing @Slowboy!

entersimon

Currently testing this out on 40.7megs (274 files)

I'll edit this post with the results I get plus I'll do some load speed tests. Thanks for posting this.

Slowboy

Glad you're sorted Manto. I only used ImageOptim last game, and this time realised that ImageAlpha would only do one at a time. When I saw how much it appeared to be saving per image though, I thought it was worth the pain of finding out how to get the terminal batch going! Also, I know that even though it seems straightforward when you get it sorted, you always forget so much the next time around, so that's why I posted the steps, for you AND for me next time!
Ash, I think load time has definitely improved when the game loads first time, but I haven't noticed as much framerate improvement as I'd hoped. Maybe I'll compare some files versions later and see if there is a definite difference, didn't analyse it too much to be honest, as I was concentrating more on the size savings.
The way I see it, anything like this must improve loads and frames, at least by a little, which is enough for me!

Slowboy

Yeah, please do Simon, I'm interested!

entersimon

@Slowboy

Here is what I learned:

Without any optimization, the image files were a total of 40.7Mb

After just ImageOptim (which is what I have used in previous projects) the files were a total of 30.8Mb

After this whole process the final image files were a total of 25.6Mb


Now, I am using a relatively limited color palette which may be why the reduction in size wasn't as extreme as going from 46mb to ~15mb


For the loading time tests I decided to go with 2 project files: 1 containing unoptimized images, and 1 containing the images that went through this process. I repeated the loading time test 5 times for each project and used the average of the 5 to get the average load time for each project.

Average Initial load time for unoptimized images project file: 4.3 seconds

Average Initial load time for optimized images project file: 4.3 seconds


Then I repeated this process for switching to another scene within the app.

Average Scene load time for unoptimized images project file: 3.3 seconds

Average Scene load time for optimized images project file: 3.3 seconds



Device: 3rd Gen iPad with Retina Display using iOS 6.0
Run through Viewer


This was run on a large scale project which took me 11 months to complete. The code has been optimized over and over to keep away from workaround logic. What I'm saying is this was tested using a very tightly coded program.


Results and thoughts:

There was no change to the load times whether optimized images were used or not. Results may vary from project to project, but I feel confident in my findings for my own use.

HOWEVER

This process is quite effective in reducing your image files down dramatically while maintaining quality and reducing the RAM footprint of the images, which is always a good thing. I graduated college with a degree in Studio Art and have built a very discerning eye for detail and I can assure you the difference in quality vs the difference in file size is absolutely worth it. The reduction in quality is minuscule to the degree that I cannot imagine any user ever catching wind that anything had changed.

Thanks for this Wayne. I love it when someone can write out very clear instructions. Kudos! I've bookmarked this page for future use. I'll definitely be using this process from now on.

Slowboy

Cheers Simon, admirable work and useful findings! Totally agree with the bang for buck - barely noticeable quality change for massive memory savings - must say I hadn't even considered the run time memory footprint, was more worried about download size from the store, but yeah, memory footprint would be greatly reduced, which can only be a good thing!
Shame about the lack of improvement in the loading times, any Chefs reading this that can give us an official angle on this?
Glad you appreciate the clear instructions, they're for my benefit as well as yours - I've used them a few times already since I posted them, changing a few files and needing to recrunch them!

Doguz

Hey everyone, is it common practice to 'replace' the images using the finder with optimised images, rather than optimising images then importing using game salad?

I ask because of this:

http://forums.gamesalad.com/discussion/40507/

Manto

@Doguz I optimized my images sizes using ImageAlpha and imported back to GS. The size went back to the same it was before optimization. But when I just put the images in the images folder of the gs project the size was 30% of the original and the app ran alright. Not sure if there's any downsides doing it that way.

Doguz

Yes @Manto1 I think this is the trend. I've contacted the developer of imageAlpha. He suspects that GameSalad along with others 'convert' the file back to PNG24 when importing. That makes sense because we know it'll convert other formats to png when importing. It must be a default setting in GS to run each file it imports through a png converter. Thus making them png24.

MarkOnTheIron

Just a friendly bump for this awesome optimisation method. I already knew Image Optim and I used it extensively, but Image Alpha is incredible. I was able to make a 55Mb image folder into a 31Mb one after using it!

POM

@MarkOnTheIron
Did you managed to make it on a mountain lion? with the latest image alpha?
Im trying to run the script but when i paste this:

ImageAlpha.app/Contents/Resources/pngquant -v -speed 1 -force -ext .png

Im getting the following errors (in terminal):

warning: option '-speed' has been replaced with '--speed'.
warning: option '-force' has been replaced with '--force'.
pngquant: invalid option -- e

Also , where do i find this "Right click the FOLDER and Copy Path > Terminal Path"
I dont have this option , i simply copy the path from "get info" is this ok?

Any help/suggestion on how to "crunch" a folder full of png files using ImageAlpha would be great!

Thanks in advanced
Roy.

MarkOnTheIron

@P-O-M I'm using it on Mountain Lion without problems.

You get that in Terminal in two cases:
1. You didn't add any image after the command line
2. You didn't add a space after the command line before adding the images

I also don't have the Copy Path function, however you can get the path by clicking on the app and then on "Get Info", there you will find the path. However if you put the app in the Utilities folder like I did here's the command for you: cd /Applications/Utilities

Socks

The way I see it, anything like this must improve loads and frames, at least by a little, which is enough for me!

Frame rates won't be improved as image fies are held in memory as 24bit PNGs regardless of how they are stored on your hard drive - and load times should be identical.

This process is quite effective in reducing your image files down dramatically while maintaining quality and reducing the RAM footprint of the images . .

The RAM footprint is not effected by reducing bit depth.

POM

Thanks for the quick reply , ill give it another shot right away .

Roy.

Socks

@MarkOnTheIron

Great script, should come in really useful.

Thanks for sharing it.