Adam Tuttle

Phonegap Devs: How do you keep file size down?

I do a lot with Phonegap, but there's an issue I've been having lately that has been driving me a bit mad... The file size of my finished IPA and APK files is getting out of hand.

The problem, as far as I can see, is that we're required to include a lot of images, some of which are expected to be high quality -- even moreso for Retina devices where the resolution is doubled. Here, let me illustrate the problem:

A graphical representation of file-sizes inside my compiled iPhone/iPad application

This is a graphical representation of file sizes inside my compiled iPhone/iPad application (generated with Disk Inventory X). The compiled IPA weighs in at a massive 23.4mb.

  • The purple blocks are images
  • The blocks inside the yellow outline are the vast majority of the code & other resources I've written and included in my app, including font files which I'm including so that I can use custom fonts in my application. (The fonts are the bright pink blocks inside the yellow outline.)
  • Teal is JavaScript files, and every statistically significant teal block visible is a library: jQuery, jQuery Mobile, iScroll, Handlebars, etc. My application's JS, as lengthy as it sometimes feels, is so tiny compared to even these small files that I just don't even bother worrying about minifying it any more. The savings is marginal at best. The 3 teal blocks outside of and below the yellow outline are three copies of the same file: the Phonegap library, named: phonegap.js, cordova.js, and cordova-2.7.0.js -- I wish this wasn't necessary but it ranks low on my priorities list right now...
  • The red block in the upper right and the green block in the lower left are the .bundle file and the executable, respectively.

It's obvious that the problem here is images.

Why do I have so many large images?

That behemoth in the bottom left corner is the splash screen for Retina iPads. It weighs in at a hefty 6.6mb, and that's after I've run it through some compression and optimization software to try and reduce its size without too much loss of quality.

But the odd thing is: So is the image in the upper-left. That is the file I include in my zip to PhoneGap:Build, and it is only 3.4mb. Based on its dimensions when compared side-by-side, it has to be a copy of my Retina iPad splash screen file... but why is it so huge after they copy and rename it? I'm guessing this is an issue with PhoneGap:Build...

The three large purple blocks along the right side are also copies of other splash screens: OG iPad Landscape, Retina iPhone5, and Retina iPhone 4.

This leads me to wonder if perhaps placing these images in the root of my application, with the appropriate names, would avoid the file copying and keep file size down... It would still be a little large for my tastes, but if my eyeballing is even remotely close, it would cut the total file size roughly in half, which would be a great start.

Android APK files built on PhoneGap:Build tend to have the same issues, just (so far) to a lesser extent. My current APK build for the same app weighs in at 10.9mb.

I'll report back with my findings, but for now, that's all I know.

10 responses:

Tim B

Tim B

I have been dealing with the same thing. It seems the splashscreens in my projects are the biggest filesize culprits. For android I converted them from png to jpg and compressed. That saved a ton of space. I tried that for iOS but then I found out that xcode doesn't allow jpegs for splashscreens D: so short of doing the compression and limiting colors in the png, I'm not really sure what you can do there.
Adam

Adam

I re-read the docs on splash screens (https://build.phonegap.com/docs/config-xml -- search for "gap:splash" since they can't be arsed to add deep linkable id's), and noticed a note that I don't think has always been there:

"Warning: If you do not supply the gap:platform attribute, the referenced image will be copied to ALL platforms, increasing the size of their application packages."

I was already using the gap:platform attribute for my Android splashes, but had accidentally left it off of my iOS splashes. Adding it had the wonderful effect of reducing my Android APK build to about 3.4mb instead of the almost 11mb I reported toward the end of the post. So that's improvement for Android, but still my iOS builds are enormous.

I've done some follow-up research based on my theory about moving & renaming the splash screen files but unfortunately the news is not good. I'll try to post that this afternoon or tomorrow.
Tim B

Tim B

Just wanted to revisit this real quick. I was able to cut my iphone app size down by 60%. The way I did it should have been obvious but I overlooked it. Instead of just saving out the png splash screens from photoshop with default settings I went to File > Save for Web and cut the colors way down then saved. Boom! Wayyy smaller pngs. Like I said it's not a huge discovery its just something I overlooked in the past.
Danny

Danny

Do you NEED to have these splash screen images? Can I remove them from my application and it will still build and run just fine?
Adam

Adam

Danny, yes -- splash screens are required. You can reduce the file size of the images by NOT converting JPEGs (e.g. Photographs) to PNGs (the required format for splashes), and/or by dithering a good bit. It has a lot to do with the photo in question, too.

The problem I'm faced with is that most of my clients want a nice photograph as their splash screen. In my most recent app we've dithered the images significantly, and reduced them all the way down to 8-bit PNG. On higher-resolution screens (e.g. tablets) you can see the dithering but it's not awful. On smaller screens (e.g. phones) you can't even tell. Doing this, we were able to keep our compiled binaries at 14mb (iOS) and 4mb (Android).

The disparity is because, as much as Apple likes to play the "but programming for all of those different screen sizes and resolutions!..." card, we're required to include more splashes for iOS than for Android. Android takes the closest available size and scales it to fit. This does sometimes cause skewing, but it's only noticeable when a portrait-orientation image is used while the device is in landscape orientation, or vice-versa.
Anouk

Anouk

Hi Guys,
I'm project manager for a web based phone app where the team is supposed to use phonegap for development/compiling/publishing. The size of the project is about 50MO. The team didn't realized at first that phonegap has a 15Mo max project size limit, so they are stuck with making and publishing the builds outside of the web phonegap environment. Needless to say it has a major impact on time & budget.
I've been trying to find a workaround for some time now...
Does anyone have a clue?
Tim

Tim

@Anouk
Are you just talking about "Phonegap Build" the cloud based compiling platform or locally compiled Phonegap projects? Also I am curious how your phonegap project is so large, are you storing video, maybe you could move it to CDN and use phonegap to download it in runtime?
Anouk

Anouk

Hi Tim,
Yes I'm talking about phonegap build (cloud). And yes we have animations with .mp3 sounds. We can't use a CDN for this project.
I've read somewhere that using the paid subscription allows for up to 40 mo of project size, although it's not advertised as such.
For now, I guess it's my only solution...
Adam

Adam

They disclose that paid accounts get up to 40mb per application here:

http://phonegap.com/blog/2013/11/14/bigger-apps-have-arrived/

If I were you I would consider re-encoding those mp3 files (and any other large files) to reduce their file size, at least a little bit. It sounds like you have no choice, because the limit is 40mb (when paid) and you said you're currently at 50mb.

I would also advise you to look at the size of your app without these files. If you remove them, how much space does it take up? Mine average about 8-15mb depending on the complexity of the splash screens, because those tend to be the largest files in my apps.
Anouk

Anouk

Hi Adam. Thanks for the advise. I was looking for a proof that subscribing would get us this 40 mo limit. I will look into the size of all my files. Thanks for the support. :)

Your comment:

Leave this field empty: