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

【问题标题】：Why do I need @1x, @2x and @3x iOS images?为什么我需要@1x、@2x 和@3x iOS 图像？
【发布时间】：2015-11-28 00:55:18
【问题描述】：

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

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

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

【问题讨论】：

Need an explanation on the images in Xcode 的可能重复项
虽然这是一个重复的问题，如上所述（并且链接的答案非常好），但值得注意的是现代版本的 Xcode 允许在 xcassets 中使用 pdf 文件。这背后的想法是您提供（矢量）pdf文件而不是png，其大小就像@1x图像一样（这是pdf文档的尺寸，因为我们正在谈论矢量）并将其标记为“单个矢量” '。然后 Xcode 将在后台生成任何设备所需的任何@Nx png。

标签： ios image resolution pixels

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

升级

@3x 或@2x 可以从@1x 放大，但通常视觉效果模糊，线条粗，看起来不太好。从@2x 升级@3x 可能会更糟，因为必须使用子像素。

缩小

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

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

【讨论】：

我明白了。这一切对我来说都很有意义，但它带来了另一个问题......如果我要基于设备拥有这 3 种图像类型......当我有一个同时使用 iPhone 和 iPad 的应用程序时会发生什么，以及iPad 的图像双倍缩放并看起来不错？那么我必须为 iPhone 准备 3 张图像，为 iPad 准备 3 张单独的图像……那么您如何区分使用哪些图像而不是 1x、2x 或 3x？
@CodeMark22 您混淆了比例和分辨率，但是是的，您可以为 iPhone 和 iPad 指定单独的资产。
这里缺少的重要一点是，我们需要 3 种尺寸的图像，因为我们不希望具有小分辨率 iPhone 5 的用户下载 iPhone 6s 图像。 iPhone 5 用户不会注意到质量上有太大差异，但他会不必要地下载高分辨率 iPhone 6 尺寸的图像。
@Muhammad 这不一定是真的。 10x10 像素图像和 20x20 像素图像的大小差异不必很大 - 几个字节，更高分辨率的图像甚至可以小于更高分辨率的图像。请注意，压缩在 png 图像中起着重要作用。为每个资产添加 1x 变体可能是过度优化。
按照苹果的说法，有一个应用切片的概念，它确保用户从应用商店下载 iPhone 5 变体上的应用将获得 2 倍分辨率的资源。并且用户在 iPhone 6 变体上下载该应用程序将获得 3 倍分辨率的资产。所以@Muhammad 不用说苹果玩得很聪明，只根据设备变体下载应用程序的资产。希望这能消除一些疑虑。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

补充 Sulthan 所说的话：

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

【讨论】：

【解决方案5】：

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

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

支持4 pixels(2 x 2) = 1 point@2x (iPhone 4+) 的 Retina 设备

Retina iPhone6 和 iPad 符合 9 pixels (3 x 3) = 1 point@3x (iPhone6+)

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

编辑

【讨论】：

这意味着如果 1x 中的图像是 320px，那么在 @2x 中它将是 1280px，你确定吗？？
否如果图像为 320 px X 480 px，则图像在 1x 中只能有 1 个维度，那么在 2x 中它将是它的两倍长 x 宽。他们加倍。
哦，您考虑了二维并给出了总像素。好的，知道了！我刚刚进行了编辑以增加清晰度。
根据en.wikipedia.org/wiki/Retina_Display 看来，第一批 Retina 设备似乎是 iPhone 4，而不是这个答案中提到的 iPhone 5。
@SahebRoy 这不正确。 iPhone 4 配备 Retina 显示屏。

【解决方案6】：

如果你只提供一张大图，你会遇到几个问题：

缩小尺寸会导致质量损失（即使不是很大）
缩小图像比显示已经预渲染的图像需要更多的计算能力
二进制文件的大小增加了，您无法从 iOS 9 引入的应用精简中受益。

如您所见，仅生成一张图片会影响应用的性能和质量，并且会严重影响使用旧设备的用户。这是因为：

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

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

【讨论】：