Not including non-retina display images in an iPhone project

Question

I have an iPhone Xcode project that currently only contains images for retina display (twice the size as normal and with a @2x.png suffix). When I run the app on the iPhone Simulator (non retina) the images are still being displayed. Does this mean I don't need to worry about including two sets of images: retina and non-retina?

This all seems a bit odd. I would assume that no images would appear on a non retina device if there are no non-@2x files included.

Note: I have not tested my app on a non retina device. Just the simulator.

Answer 1

I'm pretty sure that iOS will just use the @2x and scale it down if you don't have a non-retina graphic. Although that's sub-optimal since you're letting iOS do the scaling at runtime which will be slower than including the non-retina graphic and also iOS might not do as good a job as scaling as your graphics editor of choice.

Answer 2

Even if it works, it's not good practice, and if you have a media heavy app definitely it would impact performance and battery life and memory foot print and ....

By the way, is it just that you don't have the 1x graphics available to you or you are concerned about your apps (download size) or ...

Answer 3

If you are assigning the images in Interface Builder, and you set the image property on a UIImageView to [email protected], for example, iOS will not know that it's a high resolution "2x" image. In fact, on a retina display, iOS will look for an image named image@[email protected]. Since it won't find it, it will set the scale factor of the image to 1.0.

The contentMode property (just "mode" in XCode) will decide if any scaling of the image occurs to fit the constraints of the UIImageView. You may wish to set the mode to "Aspect Fit" to get the high resolution image to scale as needed for both retina and non-retina displays. In general, the image will display as seen in Interface Builder.

If you are using UIImage's imageNamed or similar function to load the image, and just specify image (where "image.png" doesn't exist, but "[email protected]" does), then iOS will actually find the image on a non-retina display, though the scale factor will be 1.0. As previously, you'll need to scale it to fit your view. The image will work normally on a retina device, and the scale factor will be set to 2.0, since iOS looks for a "2x" image first, and it doesn't matter if the other file exists or not.

This is from Apple's documentation on imageNamed:

On a device running iOS 4 or later, the behavior is identical if the device’s screen has a scale of 1.0. If the screen has a scale of 2.0, this method first searches for an image file with the same filename with an @2x suffix appended to it. For example, if the file’s name is button, it first searches for button@2x. If it finds a 2x, it loads that image and sets the scale property of the returned UIImage object to 2.0. Otherwise, it loads the unmodified filename and sets the scale property to 1.0. See iOS App Programming Guide for more information on supporting images with different scale factors.

If at all possible, you really should include both retina and non-retina images. Using higher-resolution images than necessary negatively affects memory and performance.