4

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 image@2x.png (iphone 4s,5,5s,6) image@3x.png (iphone 6+)

For the iPads image.png (ipad 2, ipad mini 1) image@2x.png (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?

theMouse
  • 317
  • 5
  • 15
  • 2
    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 Dec 11 '14 at 20:04
  • 1
    Have you run your images though a crushing tool like ImageOptim? – Jon Shier Dec 11 '14 at 20:08
  • 1
    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 Dec 11 '14 at 21:07
  • 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 Dec 12 '14 at 15:33

1 Answers1

5

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.

Community
  • 1
  • 1
Marcus Adams
  • 53,009
  • 9
  • 91
  • 143
  • Thank you for answering, I am supporting the only non retina devices I am supporting form iOS 7 upward is the iPad 2 and iPad mini 1. And I am loading the images as you suggest with imageNamed: Thank you for confirming that the technique works. – theMouse Dec 12 '14 at 15:17
  • 1
    Also, Apple upped the maximum app size that you can download over cellular. It's now 100MB (was 50MB). – Marcus Adams Dec 12 '14 at 21:28
  • Much easier just to upload the highest res image and be done with the 2x and 3x business. If you use minimum size 2208x2208, it should cover all devices. Run your images through some compression software and you'll reduce size. Here's some info: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions – Johnny Rockex Feb 10 '15 at 17:58