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.

@Amar Thanks. I'm keeping shrinking images as my second option as of now. Because created so many images is a tedious task. So if there's a way to reduce that, I'd be great. If not, I'll have to fall back to compressing method. :) — Isuru, Jul 15 '13 at 05:47
@Amar I used the site you mentioned. Its amazing! Got 160MB to 40MB! That's a ton! :) — Isuru, Dec 18 '13 at 05:55

score 3 · Answer 1 · answered Jul 15 '13 at 08:03

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.

Andrea · Accepted Answer · 2013-07-15T08:28:15.427

2

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:

it requires computing time
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!!!!

edited Jul 15 '13 at 08:28

answered Jul 15 '13 at 05:51

Andrea

26,120
10
85
131

Hey Andrea, thanks for the answer. Just to test it, I just used a set of images I created for retina display and ran it in both retina and normal displays. In normal screen, it uses the retina images and I don't see any problem or change. Is it hard to detect the difference in iPhone emulators? Do I have to test it on actual devices? – Isuru Jul 15 '13 at 10:41
Well there aren't notable changes, if you provide one kind of image for each resolution without redrawing them, images are simply strecthed. Since simulator has the same hardware of your mac, you won't also notice memory problems. The problem could happen running on real device, on iphone 3g o 3gs loading retina images can fill RAM pretty soon and in some cases it could lead in crashes – Andrea Jul 15 '13 at 12:17
I see. Thanks for all the info. :) – Isuru Jul 15 '13 at 12:26

App size is too big because of too many images

2 Answers2

Linked