Why do I need @1x, @2x and @3x iOS images?

Question

Why do we need these 3 particular image types?

If I have a button on my app with a background image say, 50 pixels x 50 pixels, why do I need 3 versions of this imag

Answer 1

If you provide only one big image you encounter several problems:

1. Downscaling leads to the loss of quality (even if it is not huge)
2. It takes more computational power to downscale the image than to display the already pre-rendered image
3. The size of your binary gets increased and you are not able to benefit from app thinning which is introduced with iOS 9.

As you can see, producing only one image will impact the performance and quality of your app and it will disproportionately hit those with older devices. This is because:

1. They need to downscale more. Also, the performance of their devices is not as good as that of the new ones, so they are much more likely to notice the lags with your app
2. They do not have as much storage space so you really want to be able to use app thinning to help them
3. The loss of quality will be the highest for them and considering the fact that the resolution of their devices is low, they will notice it.

Due to this users are likely to be unhappy and this is bad for you. Because, from my experience, unhappy users are 10 times more likely to rate your app than happy users. You don't want that, do you? :)

Answer 2

If you don't have the exact size, there are two things that can happen:

Upscaling

@3x or @2x can be upscaled from @1x but usually the visual result is blurry, with thick lines and doesn't look good. Upscaling @3x from @2x can be even worse because subpixels must be used.

Downscaling

In general, the results are much better than with upscaling, however, that doesn't apply for all the images. If you have a 1px border on a @3x image, after downscaling it to @1x the border won't be visible (0.33px). The same applies for any small objects in the image. Downscaling destroys all details.

In general - for an image to look perfect, you want to avoid both downscaling and upscaling. You can always go with only @2x or @3x images and add other scales only if you see visual problems. Using higher resolution won't improve downscaling. High resolutions are used only to avoid upscaling. Downscaling from a high scale (e.g. @100x) to @1x won't create better results than downscaling from @3x.

Answer 3

First of all, you need to know points vs. pixels behaviour. On non-retina devices, point vs pixels ratio is 1point=1pixel. On retina devices, there are two ratios: 1point = 2x2 pixels depending on screen size, and 1point=3x3 pixels, because of pixels density, that is quadrupled watching on non retina.
That's why you need this 3 types of images, to be shown on its highest resolution.

Answer 4

Complementing what Sulthan said:

Because you didn't propitiated proper images for a specific device, it has to downscale or upscale. These processes will use up your memory and processing, resulting maybe in a decrease of performance, depending on how many images at a time you're doing it and the size of image.

Answer 5

You need 3 kinds of images in Image Assets because in terms of Scaling or Pixels There are 3 kinds of Apple Devices (iPhone and iPad) that is

Normal device which terms to 1 pixel = 1 point@1x (Older iPhone and iPad devices)

Retina device which terms to 4 pixels(2 x 2) = 1 point@2x (iPhone 4+)

Retina iPhone6 and iPad which terms to 9 pixels (3 x 3) = 1 point@3x (iPhone6+)

Thus for providing same image in 3 scales iOS decides which image to show for which devices.Hope could help you understand this.

EDIT

Answer 6

It is because if you provide one high resolution graphic it would be waste of space on a users' device. Thanks to app slicing the device will download (from App Store) only the parts that actually fits the device (so retina device won't download non retina graphics). This is why Apple created assets catalogs and this kind of rules to follow. They describe it in their sessions.

In short it is to decrease memory/disk usage so it is all about increasing performance and user experience