iOS 应用非视网膜和视网膜图像概念

Posted 2023-03-08

【中文标题】iOS 应用非视网膜和视网膜图像概念

【英文标题】：iOS app non-retina and retina images concept

【发布时间】：2013-07-19 04:45:55

【问题描述】：

我问这个问题只是为了提供信息并澄清我对ios 应用程序（Retina 和non-retina 设备）中图像的概念。

我目前做的是

当我开发一个iPhone 应用程序并且我必须在UIButton 上使用Interface builder 显示图像时，我拍摄了两张图像，假设submit.png 按钮图像具有以下尺寸

100x100 像素 (submit.png) 200x200 px ([e-mail]) 用于视网膜显示

在Interface builder 中，我将UIButton 的大小设置为100x100 px，它可以完美地工作。

问题：

我们为什么不只放置单个图像，比如说 submit.png

200x200 像素 (submit.png)

并在interface builder 中设置UIButton 大小为100x100 像素，retina 和non-retina 设备将使用相同的图像。

使用两张图片而不是一张视网膜大小的图片的真正原因是什么？

另一个类似的问题，

iPhone 5 仅在retina 显示中可用，但我们必须将其Default 图像放置为[e-mail]。为什么是 2 倍？

【问题讨论】：

您是否尝试过删除普通图像并直接在界面生成器上提供视网膜图像。即通过界面生成器直接在 UIButton 上分配 [e-mail]。我们通常会这样做，并且它可以在正常设备中正常工作，因为我猜 UIButton 的大小会相同

是的，我通常会像你提到的那样做，但我想知道为什么 Apple 文档说要使用两个不同的图像，但我仍然无法获得任何真实的来源信息。

【参考方案1】：

如果您阅读此文档Custom Icon and Image Creation Guidelines，则在 ios 中图像的概念也很清楚

例如，如果你想创建图像

100 x 100 像素 所以它必须具有 163 分辨率 ppi submit.png NON-retina device

200 x 200 px 所以它必须具有 326 分辨率 ppi [e-mail] Retina device

对于 iPad：-

400 x 300 px 所以它必须具有 264 分辨率 ppi submit@2x~ipad.png Retina iPad device

200 x 150 px 所以它必须具有 132 分辨率 ppi submit~ipad.png Non-retina iPad device

看看这张图片：-

图片来源来自This

当我们想为 iPad 和 iPhone 指定不同版本的图像时，我们反复灌输 @2x。为高分辨率图像包含 @2x 修饰符是新的，它让系统知道该图像是标准图像的高分辨率变体。

这是操作系统调整窗口大小以填充 iPhone 5 显示屏所需的关键更改。已发布 writeup 来说明此调整以及您可能需要进行的其他与大小相关的调整。

希望这是对图像分辨率及其大小有用的信息。

【讨论】：

您能告诉我您从哪里获得有关分辨率的信息吗？比如 iPhone 的 163 和 326 分辨率。正如我的设计师设计的视网膜尺寸为 72 DPI，然后使用相同的 DPI 缩小图像并将图像转换为非视网膜尺寸。

apple.com/iphone/specs.html 看看这是苹果 iphone5 产品 1136 x 640 像素分辨率，326 ppi 所以非 Ratine 将其限制为 163 的一半

这是什么意思？我们应该为视网膜设计 320x480 像素大小、326DPI 和 320x480 像素大小、普通设备 163 DPI 的应用程序？或者我们应该为正常设计 72DPI 尺寸为 320x480 像素，为视网膜设计 72DPI 尺寸为 640x960 像素？

我在讨论 ** PPI ** 我们应该设计 320x480 像素大小的应用程序，视网膜 326 ppi 和 320x480 像素大小，163 PPI 你知道 DPI 和 PPI 有什么不同吗... ?检查这个：-imagescience.com.au/kb/questions/31/… 向您的设计师询问有关 DPI 和 PPI 的更多信息

【参考方案2】：

使用非视网膜图像的主要目的是由于所需的缩小操作，在旧设备上提高性能和图像质量。

因此，对于旧设备的性能，您应该使用非视网膜图像。

【讨论】：

有什么解决方案可以让我们只能将一个图像用于旧版本和新版本。我的意思是我们可以用任何类型的代码或其他东西来做吗？？

我认为没有。因为我们需要旧设备的非视网膜图像。如果我们使用视网膜图像，性能就会下降。

这意味着我们必须有两种类型的图像，一种是非视网膜图像，另一种是视网膜，如果应用程序需要在旧设备中支持。

这两张图片有什么区别。只是分辨率不同。但是对于今天的新设备。我们真的也需要非缩放图像吗？

【参考方案3】：

之所以必须提供 2 张图像，是因为仍有人在运行不支持视网膜显示的早期设备。由于运行视网膜的人，它们缺乏像素数量，因此我们提供正常数量。 iphone 5 要求图像文件中的@2x 是因为@2x 文件名是处理视网膜显示图像的标准约定。

这就是为什么当你问我们为什么不把 200x200 的图像放在 100x100 按钮中的原因。好吧，如果你正在运行一个视网膜设备，那个按钮中的图像看起来就像你画的那样；但是，如果您运行的是没有视网膜的 3gs 之类的东西，那么您在该按钮中的图像很可能会变得非常块状或模糊，因为像素与设备的比例不匹配。

希望这有助于清除任何问题！

【参考方案4】：

是的，您可以只将视网膜图像用于视网膜和非视网膜设备。如果您在imageviews、按钮等中使用它们，请将它们设为scaletofill/aspectfill/aspectfit 或任何您想要的。

但这样做的问题是，不必要的大尺寸图像会被加载到内存中，并且图像的大小调整也需要一些处理。

使用单独的图像确实会增加 App Bundle 的大小，但会减少应用程序在运行时的实际内存使用量。

【参考方案5】：

1- 如果您想支持您的应用程序同时支持 Retina 和非 Retina 设备，您需要遵循文件名标准。如果您只想支持视网膜设备，则无需添加默认图像（button.png）。如果您想同时支持 Retina 和非 Retina 设备，则需要添加两个图像以及在界面生成器中不需要添加像 @2x 这样的全名。您只需添加图像的名称。主要的基础是两个图像的名称应该相同。 Ex: Non retina-->Button.png、Retina-->[e-mail]、IE-->Button

2 - iPhone5 仅具有视网膜显示屏。因此，如果您为 iPhone5 添加默认图像，它会自动在 iPhone5 设备中运行。苹果正在遵循这些标准。所以我们需要跟进。

注意： Xcode 会自动处理所有这些类型的图像。