Using PhoneGap Build's .pgbomit to Drastically Reduce File Size

PhoneGap Builds approach in the past has made it difficult to keep the resulting file size of packaged applications low, whilst still including high quality icons and splash screens for individual platforms. You need to include about 16 icons and splash screens just for the various iOS and Android devices. Here’s a snippet from the config.xml of one of my applications to demonstrate what I mean:

<icon
  src="resources/icon/android/icon-36-ldpi.png"
  gap:platform="android"
  gap:density="ldpi"
/>
<icon
  src="resources/icon/android/icon-48-mdpi.png"
  gap:platform="android"
  gap:density="mdpi"
/>
<icon
  src="resources/icon/android/icon-72-hdpi.png"
  gap:platform="android"
  gap:density="hdpi"
/>
<icon
  src="resources/icon/android/icon-96-xhdpi.png"
  gap:platform="android"
  gap:density="xhdpi"
/>
<icon
  src="resources/icon/ios/icon-57.png"
  gap:platform="ios"
  width="57"
  height="57"
/>
<icon
  src="resources/icon/ios/icon-72.png"
  gap:platform="ios"
  width="72"
  height="72"
/>
<icon
  src="resources/icon/ios/icon-57-2x.png"
  gap:platform="ios"
  width="114"
  height="114"
/>
<icon
  src="resources/icon/ios/icon-120.png"
  gap:platform="ios"
  width="120"
  height="120"
/>
<icon
  src="resources/icon/ios/icon-72-2x.png"
  gap:platform="ios"
  width="144"
  height="144"
/>

<gap:splash
  src="splash/ios/Default.png"
  gap:platform="ios"
  width="320"
  height="480"
/>
<gap:splash
  src="splash/ios/Default@2x.png"
  gap:platform="ios"
  width="640"
  height="960"
/>
<gap:splash
  src="splash/ios/Default-568h@2x.png"
  gap:platform="ios"
  width="640"
  height="1136"
/>

<gap:splash
  src="splash/android/screen-ldpi-portrait.png"
  gap:platform="android"
  gap:density="ldpi"
/>
<gap:splash
  src="splash/android/screen-mdpi-portrait.png"
  gap:platform="android"
  gap:density="mdpi"
/>
<gap:splash
  src="splash/android/screen-hdpi-portrait.png"
  gap:platform="android"
  gap:density="hdpi"
/>
<gap:splash
  src="splash/android/screen-xhdpi-portrait.png"
  gap:platform="android"
  gap:density="xhdpi"
/>

The problem is that all of these files are included as resources in the resulting package, even the Android splash screens in your iOS package. This has made it frustrating to keep the file size down when including graphics, and typically I’ve settled for reducing image quality somewhat in the past to keep file sizes reasonable.

The PhoneGap Build service has just overcome this problem in a spectacular way with the introduction of .pgbomit. Adding a .pgbomit file essentially allows us to tell PhoneGap Build to “use these images for icons and splash screens as necessary, but don’t include them as resources in the resulting package”. So now, we don’t have to worry about Android fails taking up space in our iOS packages.

Adding .pgbomit to your project

It’s extremely simple to make use of this in your own app. Currently, my directory structure for resources are set up as follows:

/splash
 /android
 /ios

and

/resources
  /css
  /icon
    /android
    /ios
  /img

So in my case I’m going to want to omit the entire /splash directory and the /icon directory from being included in the resulting packages. I can’t put the omit file directly in the resources folder as this would prevent resources that need to be included for use within the app from being included.

Open up a text editor like notepad and simply save a blank file called .pgbomit into the directories you wish to exclude. Make sure the file is saved as .pgbomit and not .pgbomit.txt.

How much is the file size reduced by?

I couldn’t wait to try this out, so I immediately put .pgbomit into action to see how much of an effect it would have on one of my existing applications. Here’s the results:

Before:

.ipa: 4.4MB (iOS)

.apk: 2.8MB (Android)

After:

.ipa: 3.4MB (iOS)

.apk: 1.9MB (Android)

In both cases, that’s a drop of around 1MB which is a pretty significant change. It’s worth noting that I significantly reduced the file sizes of these images using an optimisation program before the introduction of .pgbomit – the image files were already reasonably small and still lead to a significant drop. Previously if I were to include a high quality splash screen with a file size of 1MB the resulting package would be ridiculously large, but now it is much more possible to include a high quality image like that.

It is still likely going to be a good idea to optimise your images as much as possible without sacrificing too much quality, I’ve found TinyPNG to be a great service for this.

This is a very welcome change from PhoneGap Build and I’m looking forward to see what else comes about in the future!