Monday, July 11, 2011

Shrink Those Resources

I made the t-zone/tipster demo in one day (each... I spent most of the time on the logic), they were really easy to make (once Martin made the PSD's) but when you rush you miss on many "details" such as size. I must admit I was quite negligent letting the t-zone resource file balloon to over 900kb in size and the tipster theme was close to 300kb!
Its easy to lose track of size/performance when you are working within the comforts of a visual tool like the resource editor even if you are the guy who wrote the resource editor...

I suddenly noticed this issue when running on an S40 device (which has a 1mb jar size limit) and so I reduced both resources almost in half without reducing functionality!

When optimizing resource files you need to keep in mind one thing: its all about image sizes.
Images will take up 95-99% of the resource file size, everything else is peanuts in comparison.

Like every optimization the first rule is to reduce the size of the biggest images which will provide your biggest improvements, for this purpose I introduced the ability to see image sizes in KB (see the menu option Images -> Image Sizes (KB).
This produces a list of images sorted by size with the amount of KB each takes. For the t-zone theme the Sun, the moon & Martin were the largest images (which kind of made me think of Game Of Thrones). Turns out these images were all multi-images that I used the wizard to make & in them by mistake I allowed the creation of all multi-image resolution including Very High and HD resolutions. These very high resolution images take up ALLOT of space! Just going to the multi-images, selecting the unnecessary resolutions & deleting these HUGE images (note you can see the size in KB at the top right side in the image viewer) saved a HUGE amount of space!

Next most should probably use the "Delete Unused Images" menu option as well (its also under the Images menu) in my case it detects allot of images used programmatically and didn't help much (it also seems to have a regression in failing to detect usage of timeline images).

If you have a very large image that is opaque you might want to consider converting it to JPEG and replacing the builtin PNG, JPEG's work on most devices and are much smaller. I did this with the LWUIT demo to reduce size but not with the t-zone theme.

Last but not least I added a new feature to the resource editor where you can use the excellent OptiPng tool to optimize image files right from the resource editor. To use this feature you need to install OptiPng then select "Images -> Launch OptiPng" from the menu. Once you do that the tool will automatically optimize all your PNG's, this didn't help much with the LWUIT Demo images but made a huge difference for both t-zone & tipster themes!

The t-zone theme went down to 412kb before compression (from well over 900kb!) and 376,765 compressed bytes!!! The obfuscated JAR which was well over 1.1mb is now 580kb! (594,705 bytes). The icon is 11,233 bytes which means the application logic, MIDlet and LWUIT sum up to 206,707 bytes  a reasonable 201kb for an entirely visual environment.

When faced with size issues make sure to check the size of your res file, if your JAR file is large open it with a tool such as 7-zip and sort elements by size. Start reviewing which elements justify the size overhead.

3 comments:

  1. Please, where and how can i get the latest resource editor, have gone to the repository but could not get it, please tell me what to do

    ReplyDelete
  2. Did you follow through the steps in the link at the top of the blog?

    ReplyDelete
  3. Hi Shai,

    I have used LWUIT for mobile application development ..I want to know does it support for android? or what i should do in order to make the code work in android?..I have seen some docs explaining how to convert the file to .apk but they were not clear.

    ReplyDelete