How important are non-retina images?

Question

I'm releasing a new update for one of my apps and I was disappointed to see that it just barely surpasses 20MB estimated size (20MB is the point where it can no longer be downloaded over cell data).

My app contains a lot of images, so I could greatly reduce the size if I didn't have all those non-retina images. I know that there are some non-retina devices that will be running my app. So here are my questions:

• How will a non-retina device react if I have an image with the @2x suffix but no non-retina image without it.

• If I use a retina sized image without the @2x suffix and scale it down to the size I want to display it at programmatically and/or through interface builder, will it still maintain full quality on retina devices? Will the quality be worse on a non-retina device than using an image I downscaled from the original using GIMP instead?

Answer 1

How will a non-retina device react if I have an image with the @2x suffix but no non-retina i image without it.

I use that approach on a couple of apps of mine and it works flawlessly. I am not able to detect any performance or visual issues on non-retina display devices (concretely, iPad 1/2 and mini).

I am not sure what can happen on older iOS version, since I only support iOS5+ on those apps.

If I use a retina sized image without the @2x suffix and scale it down to the size I want to display it at programmatically and/or through interface builder, will it still maintain full quality on retina devices? Will the quality be worse on a non-retina device than using an image I downscaled from the original using GIMP instead?

This comes down to how you set interpolation options while doing the scaling. See this other question for more details on how interpolation quality affects scaling down an image. In GIMP or Photoshop you also have control on the interpolation to be used for scaling, btw.

But in the end I don't think you need to go this way.

Most importantly, that bandwidth limit has been raised to 50MB.

Answer 2

OK.

If you only provide one image then you have one of two possibilities.

1. The image is a non-retina image. This will look fine on the non-retina. It will look identical on a retina device. But will look low quality next to a retina image.

2. The image is a retina image. On the retina device it will still load as a retina image. It will look fine. However, on the non-retina device it will have to scale down the image. This takes extra cycles of the CPU so could affect performance and it may not look how you want. It may shrink the image using a different method than you want and so may make the image look odd.

This is the same with or without a suffix.

The best solution is to create retina images and then use your editor of choice to create the standard versions. Nothing will stop you only providing one image but it may lead to a look and performance that you don't want.

On a side note. The size for downloading over cellular data was increased to 50MB.

Answer 3

Try these things using the simulator and find out for yourself.

I think the answer is that UIImage will ignore the @2x choice if you're relying on [UIImage imageNamed:@"without2xSuffix.png"] and not find anything, but I haven't tried it. Deliberately requesting the @2x file will work, but whether the image will be scaled, tiled, stretched or centered (or something else) is up to the place where it's used.

Note that the documentation says that unless you use the name without the @2x suffix and let iOS find the 2x version for you, it will set the scale of the image to 1.0 rather than 2.0, which complicates drawing. You'd have to load the image using imageWithData:scale: to fix this.