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

Solution 1:

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.

Solution 2:

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

Solution 3:

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

Solution 4:

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.

Solution 5:

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.