App size is too big because of too many images

Question

I'm creating an universal app. For one screen, I'm displaying 6 images (png format) in a grid using this control. Also this screen supports both portrait and landscape orientation.

I've created a set of images in different resolutions for all the iDevices and named them using the correct naming convention as follows.

• name~iphone.png
• name@2x~iphone.png
• name~ipad.png
• name@2x~ipad.png
• name-568h@2x~iphone.png (iPhone 5)

And I had to create another set of these images since I support both orientation and I can't use the same images as above because in landscape it would stretch.

Now I have close to 60 images for just for one screen and the app already weighs ~40MB! It goes without saying this is unacceptable.

My question is, is it necessary to create separate images for all these sizes/devices and orientations? Can't I create a set for just the retina display and will it scale down for normal displays? If that's not possible, is there a way to shrink the sizes of images?

Thank you.

Answer 1

Is not obbligatory, but you should do or at least balance with other factors. The main issue if you don't is related to memory (RAM) issues, bigger images take a lot of space in memory and devices with lower resolution have less memory than retina ones. So shrinking is not the best option.
A possible solution would be take one "big" image that could be resized also for the others. To do that you need to redraw images using Core Graphics or ImageIO, this library could be useful NYXImagesKit. Of course there a price to pay:

1. it requires computing time
2. the source "big image" should be open at least once to do the calculation, if you are already in short of memory it could be a problem

There is another solution for GUI (not only) elements, use a PDF vect image. You can find an interesting article here by Matt Gemmel
If your images are not using alpha channel go with jpg!!!!

Answer 2

There is no need to create images for both non-retina and retina display. You can use the "retina images" only (if possible, in JPG format). When you need to display the smaller size images, you can used "aspect fit" to scale down the bigger images. There may be some quality tradeoff.

Similarly, for iPhone 5 images, you can clipped the longer images using the clipsToBounds property to cut out the unwanted portions in smaller screens.