For more posts in this series, see the series index.

This post is both a development snack, i.e. something I think you should know to build better Windows Store apps, as well as being part of the Treasure Map transparency, which are meant to show you how we built a real Windows Store app.

Size Matters

Lab Rat

In web development, there is often a concern to get the download size of the page down & there are plenty of tools to help with this (Visual Studio has a lot for CSS & JavaScript) but when we get to app development, size isn’t always as big a concern.

Windows Phone development made 20Mb an important limit, since that meant the download could go over 3G rather than requiring WiFi – this is why my Lab Rat comic book for Windows Phone is 17Mb in size. I made a very conscience choice to ensure it would fit under 20Mb.

Windows Store apps don’t have a similar limit to Windows Phone – so when I was recreating Lab Rat for Windows 8, I just went with the highest resolution images I could so it would look great. This resulted in the download being 225Mb!

Treasure Map

With version 1 of the treasure map, no one really thought of file size either rather focusing on making it look and feel great. Which resulted in it containing a lot of high resolution images and many of them in the JPEG format. When we shipped version 1, we shipped a 57Mb install!

Small is better

For version 2 of the treasure map, one piece of feedback we got (I believe the awesome Mike Fourie raised it) was that it was a big download. So I spent some time looking through our assets and doing some sneaky clean-up and in the process learnt a bit.

JPEG

It’s crap – use PNG. PNG is better quality and for most scenarios is smaller in file size. So in both Lab Rat & Treasure Map the first step was to replace all the JPEG images (including assets like store logo) with PNG.

If you want more info on the differences between JPEG and PNG see this amazing StackOverflow answer.

PNG 32, 24, 16, 8… oh my

A PNG isn’t PNG – in fact PNG’s can specify the bit depth of each of the channels they support which directly impacts how distinct colours they support. They can also allocate a specific bit in the colours to indicate transparency. However if you do not need transparency, which in the case for the bulk of Lab Rat & Treasure Map is true, you can save bit for a colour.

Very few images will have all 16 million colours that are needed, so if you identify how many unique colours there are, then you can shrink the bit depth which results in a smaller file. I did some work on this and found two pretty interesting tools:

• TinyPNG – a free website to do this. Only downside, one file at a time.
• PNGoo – a free Windows tool that can do bulk changes. Not as easy as the website to use though.

So I ran both Lab Rat & Treasure Map through that and we got a MASSIVE saving in disk.

• Treasure Map went from 57Mb to (approx.) 11Mb – so a saving of 80%. The 11Mb is just a test on my machine and also includes a lot of new resources, so it may change by release.
• Lab Rat went from 225Mb to 89Mb! So a saving of 60%!

Summary

So in summary, use PNG not JPG & make sure you compress your images before you release!