For an iPhone only, iOS 7+ app, can we include only @3x images?

Question

In an effort to reduce bundle size, is it possible (and a good idea) to only add @3x images?

To clarify, I'm not referring to the app icon, launch image, etc. But images that are internal to the app, like UIButton background images.

I saw Image resolution for new iPhone 6 and 6+, @3x support added? , but it didn't answer my question.

Answer 1

Yes you can, but you shouldn't.

If you only add @3x images it will both reduce your bundle size and be compatible with all screen densities.

Update: As of iOS 9, Apple has introduced App Thinning which means that including more image sizes will no longer increase your bundle size. The App Store automatically generates a thin binary for each specific device and only includes the appropriate @3x or @2x image sizes.

I do not recommend only @3x if you need to support older devices. Embedding only @3x images will cause your images to be scaled down each time the app is run. This approach has the following downsides:

• You have no control over the image scaling mode that iOS uses. Certain images may see significant pixelation and/or artifacts after being scaled automatically.
• Scaling images can potentially slow app performance. This is especially true on older devices, which will be doing lots of scaling. Using only @3x images will increase the processing time of these scaling operations even more than scaling down from @2x.
• You will have no opportunity for pixel perfect exporting of assets. Many designers take the time to manually scale their image assets to ensure that fine strokes and textures are not disrupted. This results in the best experience across all device types.

If you care about your apps looking clear and crisp on most devices, I would highly recommend that you at least export your images @2x and @3x screen densities. Depending on the compatibility needs of the project, I sometimes choose not to export @1x.

If you are only aiming for iPhones running iOS 7+, then you definitely do not need to export @1x. All @1x iPhone devices do not support iOS 7+. The only @1x devices that you will need to worry about are the iPad 2 and iPad mini (non-retina).

Another note: in researching your question I heard rumors that Apple may reject your apps for not having images at every density. I have never experienced this. The only thing that I could find in the developer guidelines was this rule.

2.10 iPhone Apps must also run on iPad without modification, at iPhone resolution, and at 2X iPhone 3GS resolution

To me this seems to imply that as long as it works, you are good. But c'mon man, make it beautiful!

Answer 2

In my testing, I've found @3x isn't recognized on iOS 7 and below. So if you plan to support iOS 7 & 8, you'll definitely want to include @2x images.

As for the resolution of said images, I haven't found a satisfactory answer yet. For the app I'm working on, taking the example of a fullscreen jpg (likely a photo), I would save at 1242x2208 for @3x and 750x1334 for @2x to match the highest resolution those images will be displayed at on an iPhone. It's not a pixel perfect solution since the images will need to be scaled down on non-iPhone 6(+)'s but I think it's a good middle ground that doesn't involve too much extra work with if statements dictating which image based on the screen size (ugh) and 5 different images.

One thing to note about performance concerns dfmuir brings up is that these images are going to end up being scaled down in a lot of cases, 4/4S, 5/5S, 6/6+ in display zoom mode, even if you go with apple's preferred method of including 3 images at @1x, @2x, and @3x, since we now have 5 (or 6 including 3gs) different resolutions (See the rendered pixels row in this chart for more info: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions )

The only way you don't get these issues with photo-like images (so not considering UI elements), is if you design it such that your images are in relation to points (so staying the same size relative to say your thumb instead of relative to the phone's screen size), but that doesn't always make sense for the app's design. An example would be cropping on the lower resolution phones instead of being scaled down.

Answer 3

One thing to note is that @3x is already downscaled by the device. 3 is UIDevice scale whereas the screen is actually at, in some sense, nativeScale. So, if the argument holds, it should do a proper job for other densities as well from @3x.

Of course, if the image has quite a few sharp corners with just a single pixel sitting at the corners, one may want to precisely position it instead of letting the OS pick it via applying whatever continuous filter it is going to apply to downscale.