Using less Images for non-retina, retina and retina HD (@1x, @2x, @3x) for Universal Apps

4
votes

To support iOS 7 to 8 on universal devices, I have to make 4 copies of the same image in different size.

For the iPhones [email protected] (iphone 4s,5,5s,6) [email protected] (iphone 6+)

For the iPads image.png (ipad 2, ipad mini 1) [email protected] (ipad 3, 4, ipad mini 2, ipad Air)

The images are really bloating the app size.

Is it ok to just use 1 image size, the largest one of the set and scale to fit in the uiimageview and use the image view to scale down the image on the smaller screens?

imageView.contentMode = UIViewContentModeScaleAspectFit;

or is it absolutely necessary to have all 4 copies at different sizes?

It works on all the devices on the simulator and on a retina iPad 3, but I have no way of actual testing on other devices and am afraid that the images may not display.

Has anyone tried using 1 large image instead of the set of copies?

1
iosxcodeuiimageviewuniversal
You're misunderstanding the point of the higher sizes. Retina devices have a higher resolution screen - there's more pixels per inch (ppi). That means that just scaling the image to fit into the desired frame doesn't actually make it look like it should on different screens. What you're saying would work, but it's a lower standard than you should accept for something you're putting your name on as a developer. If you're having app size issues, I would look at which icons and whatnot you can reuse and maybe verifying that all of the image assets you have are indeed the correct resolutions. – kpsharp
Have you run your images though a crushing tool like ImageOptim? – Jon Shier
If the images are vector art, you might be better off drawing them in code at run-time. A tool like PaintCode can help with this. – rob mayoff
Thanks for the tip about ImageOptim, it reduces the size by about 50% without loss of quality. But if I just use the largest set of images (made for iPad retina), and name them without the @ 2x, @ 3x, they still load in the simulator for all devices (including non-retina) and the final image size is 60% smaller than having 4 sets. – theMouse

1 Answers

5
votes

Yes, you can theoretically use the largest resolution image and have the UIImageView scale the image down using mode Aspect Fit.

The only drawback is the older phones that don't support retina also are less performant. For example, when using images on cells of a UITableView and scrolling, the device has to load the large image, then scale the image down, and scroll it at the same time, and it will stutter on old, slower devices.

So, perhaps just use multiple images in list views (should just be thumbnails and are tiny anyway, or just use the smaller images here), but don't worry about larger images that stay on the screen and don't scroll.

Make sure you load images in list views using methods that allow caching like imageNamed:.

As long as you take into consideration the performance penalties involved in scaling down the images, you can use just the largest image and scale it down to fit.

By the way, yes I've used this technique in real live apps in the App Store.

Another technique I've seen is to include lower quality images (1x or 2x) and if you run it on a higher resolution device (2x or 3x), automatically download high resolution images from the web. Maybe be nice about it and only download them on wifi.