New iPad’s Retina display: how to reduce image file size?
Even till the day of the Keynote about the new iPad, I couldn’t believe the rumours telling the new iPad will have a Retina Display. I thought it was a too big challenge for the Apple engineers to make a resolution of 1536 x 2048 pixels was workable for a mobile device. I was waiting for Apple coming with some smart solution to up the screens resolution, without doubling the size in both directions. Apple actually surprised me by releasing the new iPad with this ridiculous big screen. As a user, this was off course fantastic news! As a developer, just doubling the size of my artwork wasn’t enough.
When I started working on my first app update to support the Retina display, I found out the hard way that just doubling the size of my images and including them as ‘@2x’ images blew the size of my app completely out of proportion. Mosaic Wallpaper Designer currently takes 5.5MB of your space to download it from the App Store. After I have included my reworked images, it grew to around 45MB! Even though this is an universal app and most of the UI is already in Retina resolution to support the iPhone 4 and 4S.
As a coder, I had to search for some tricks to reduce file size of my graphics to make the the file size workable again. Because I don’t think I’m the only one facing this kind of problems, I would like to share some of my experiences with you. For people with a graphical background, this may be pretty obvious, but this article is more targeted at Independent Developers without much of a graphical knowledge. If you have any additions to this article, add a comment below or contact me!
Choosing the right file type
There are more differences between .png and .jpg then their file extensions. Choosing the correct type can save huge amount of disk space. To make the right decision, it’s important to know what the difference are between the different types of images. I found a good articles which explains the difference between .jpg and .png very well. Since .jpg and .png are the most used files formats, this definitely is worth a read.
Optimizing image quality with Photoshop
With my basic knowledge of Photoshop, I always pressed ‘Save as..” when I was done with creating my images. While searching for ways to get my file size down, I found out that there is a better way when developing for iOS: ‘Save for Web and Devices…’. In the following screen you have much more influence on the quality of the saved image. You can also see an example of the chosen settings and the file size when you save the image with these settings. I noticed that in much cases, I could drop the quality dramatically without seeing a mayer difference in the resulting image. Be aware that you are actually changing the quality of the image itself instead of only reducing file size. In a lot of cases this isn’t a problem, but in some cases this is definitely not what you want.
Using tools like ImageOptim
There are a lot of tools out there which reduce file size of images automatically. The one I found most useful was ImageOptim.
This tool reduced some of my images file sizes for an average somewhere around 30%, without any noticeable drop in image quality. You can drag and drop images into ImageOptim or access it through the Terminal, which also makes it very easy to use. I recommend to use this to every mobile developer. I will use it for every project from now on, even if it isn’t really necessary to reduce file size. Mobile development is all about doing great stuff with limited resources.
If you have any additions to this article, add a comment below or contact me!