为什么我需要 @1x、@2x 和 @3x iOS 图像？

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

提问by CodeMark22

Why do we need these 3 particular image types?

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

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 image? What's stopping me from just making one image that's much higher in res, say, 700x700 so when it shrinks down on any iPhone it won't fall under the max res the device would want?

如果我的应用程序上有一个带有背景图像的按钮，例如 50 像素 x 50 像素，为什么我需要此图像的 3 个版本？是什么阻止我制作一张分辨率更高的图像，比如 700x700，所以当它在任何 iPhone 上缩小时，它不会低于设备想要的最大分辨率？

Only thing I can think of is it just takes up more space, but for simple apps / a simple button it seems like it wouldn't cause any issues. I've tried it on a few devices and see no difference between them when I simulate it and do this method. However, as I dive more into apps and stuff I'm sure there is substance behind this technique.

我唯一能想到的是它只会占用更多空间，但对于简单的应用程序/一个简单的按钮，它似乎不会引起任何问题。我已经在一些设备上尝试过，当我模拟它并执行此方法时，它们之间没有区别。然而，当我更多地研究应用程序和东西时，我确信这种技术背后有实质内容。

采纳答案by Sulthan

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

如果您没有确切的尺寸，可能会发生两种情况：

Upscaling

升级

@3xor @2xcan be upscaled from @1xbut usually the visual result is blurry, with thick lines and doesn't look good. Upscaling @3xfrom @2xcan be even worse because subpixels must be used.

@3x或者@2x可以放大，@1x但通常视觉效果是模糊的，有粗线，看起来不太好。倍增@3x的@2x甚至可能更糟，因为子像素必须使用。

Downscaling

缩小规模

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

一般来说，结果比放大要好得多，但是，这并不适用于所有图像。如果图像1px上有边框，将@3x其缩小到@1x边框后将不可见（0.33 像素）。这同样适用于图像中的任何小物体。缩小会破坏所有细节。

In general - for an image to look perfect, you want to avoid both downscaling and upscaling. You can always go with only @2xor @3ximages 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 @1xwon't create better results than downscaling from @3x.

一般来说 - 为了使图像看起来完美，您希望避免缩小和放大。您始终可以只使用@2x或@3x图像并仅在您看到视觉问题时添加其他比例。使用更高的分辨率不会改善缩小。高分辨率仅用于避免放大。从高比例（例如@100x）@1x缩小到不会比从 缩小产生更好的结果@3x。

回答by Saheb Roy

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

您需要图像资产中的 3 种图像，因为在缩放或像素方面有 3 种 Apple 设备（iPhone 和 iPad）

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

符合1 pixel = 1 point@1x 的普通设备（较旧的 iPhone 和 iPad 设备）

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

符合4 pixels(2 x 2) = 1 point@2x 的Retina 设备（iPhone 4+）

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

Retina iPhone6 和 iPad 符合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.

因此，为了以 3 个比例提供相同的图像，iOS 决定为哪些设备显示哪个图像。希望可以帮助您理解这一点。

EDIT

编辑

回答by Julian Król

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.

这是因为如果您提供一张高分辨率图形，那将浪费用户设备上的空间。由于应用程序切片，设备将（从 App Store）仅下载实际适合设备的部分（因此视网膜设备不会下载非视网膜图形）。这就是 Apple 创建资产目录和遵循此类规则的原因。他们在他们的会议中描述了它。

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

简而言之，它是为了减少内存/磁盘使用量，因此一切都是为了提高性能和用户体验

回答by Stefan

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 = 2x2pixels depending on screen size, and 1point=3x3pixels, 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.

首先，您需要了解点与像素的行为。在非视网膜设备上，点与像素之比为1point=1pixel。在 Retina 设备上，有两种比率：1point = 2x2像素取决于屏幕大小，1point = 3x3像素，因为像素密度，在非视网膜上观看时是四倍。
这就是为什么你需要这 3 种类型的图像，以最高分辨率显示。

回答by NSPunk

Complementing what Sulthan said:

补充 Sulthan 所说的话：

Because you didn't propitiated proper images for a specific device, it has to downscale or upscale. These processes willuse 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.

因为您没有为特定设备提供适当的图像，所以它必须缩小或放大。这些过程会耗尽您的内存和处理能力，可能会导致性能下降，具体取决于您一次处理的图像数量和图像大小。

回答by Andriy Gordiychuk

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.

1. 降尺度导致质量损失（即使不是很大）
2. 缩小图像比显示已经预渲染的图像需要更多的计算能力
3. 您的二进制文件的大小会增加，并且您无法从 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.

1. 他们需要进一步缩小规模。此外，他们设备的性能不如新设备，因此他们更有可能注意到您的应用程序的滞后
2. 他们没有那么多的存储空间，所以你真的希望能够使用应用程序瘦身来帮助他们
3. 质量损失对他们来说是最高的，考虑到他们设备的分辨率很低，他们会注意到这一点。

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

因此，用户可能会不高兴，这对您不利。因为，根据我的经验，不满意的用户对您的应用进行评分的可能性是满意用户的 10 倍。你不想要那个，是吗？:)