为什么我需要@1x,@2x 和@3x 的 iOS 图像?

为什么我们需要这3种特殊的图像类型?

如果我的应用程序上有一个带有背景图像的按钮,比如说,50像素 x 50像素,为什么我需要这个图像的3个版本?是什么阻止了我制作一个高分辨率的图像,比如说700x700,这样当它在任何 iPhone 上缩小时,它就不会达到设备想要的最大分辨率?

我唯一能想到的是它只是占用更多的空间,但对于简单的应用程序/简单的按钮,它似乎不会造成任何问题。我已经在一些设备上试过了,当我模拟它并使用这种方法时,没有发现它们之间有什么不同。然而,随着我对应用程序和其他东西的深入研究,我确信这项技术背后是有实质内容的。

77076 次浏览

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.

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.

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

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.

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

enter image description here

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? :)