PNG（或 JPG）有 DPI 吗？还是在构建视网膜时无关紧要？

Posted 2023-02-16

【中文标题】PNG（或 JPG）有 DPI 吗？还是在构建视网膜时无关紧要？

【英文标题】：Do PNGs (or JPGs) have a DPI? Or is it irrelevant when building for retina?

【发布时间】：2015-02-04 01:49:29

【问题描述】：

一个我一直很难找到明确答案的简单问题：PNG 文件有 DPI 吗？或者更重要的是，它在构建支持视网膜的网站/应用程序时是否相关？

我刚刚从我们的设计师那里收到了一个视网膜 iPad 应用程序的 PSD 资源，我必须将其转换为 html 以便在应用程序中显示。通常，我会收到诸如 2048x1536 @ 72 DPI 之类的文件——双倍尺寸但标准屏幕 DPI。然后我通常使用 CSS 来告诉浏览器如何显示它。

但这次设计师被指示以 1024x768 @ 144 DPI（标准尺寸，但双 DPI）提供他的 PSD。我认为这是不正确的，因为 Photoshop 中的 DPI 设置用于打印目的。另外，当我将 144 DPI PSD 中的某些内容保存为 PNG 或 JPG 格式时，它与从 72 DPI（或 30,000 DPI）PSD 中保存的内容完全相同。 DPI 似乎没有反映在我可以在结果文件中看到的任何设置中，也没有反映在不同的文件大小中。它似乎充其量只是元数据。

因此，我的理解是，DPI 与此处无关，我们应该只是为视网膜项目要求双倍大小的资产，但在要求新资产之前，我想对这个问题进行一些确认/澄清。我与许多从印刷背景过渡的设计师一起工作，所以这是我遇到的常见问题，我希望能够在未来根据我们的要求提供更好的指导。

【问题讨论】：

没有证据，只是有相当多的成像经验，但我也觉得 dpi 在您来打印之前是无关紧要的。显示器具有像素宽度和高度，而图像具有横向和向下的多个像素，这将决定它将覆盖多少显示器。

【参考方案1】：

它们并不完全相同。文件 1 的宽度加倍，高度加倍，因此像素数是图片 2 的 4 倍。无论 DPI 是多少，这两个文件都具有以像素为单位的尺寸，因此 DPI 在 PC 上无关紧要，因为计算机只使用这些像素.

DPI 确实是用于打印的。这是为了在不改变尺寸（例如以英寸为单位）的情况下确保更好的质量 DPI 仅告诉我们在纸张或不同计算机屏幕上显示时的像素与英寸的比率。

您应该告诉您的客户发送另一张具有所需分辨率的图片。

【参考方案2】：

DPI 是图像的像素尺寸与其在显示时出现（或应该出现）的物理尺寸之间的关系，而与它的显示方式（屏幕、打印等）无关。没有图像格式固有地具有 DPI，但任何由像素组成并应以特定物理尺寸显示的实际 图像都有 DPI。

您说得对，就图像文件而言，DPI 只是元数据。图像本身是一个没有固有物理尺寸的像素网格，但 DPI 值表示预期物理尺寸。例如，144 像素宽且 DPI 为 144 的图像在显示时应显示为 1 英寸宽，但 144 像素宽且 DPI 为 72 的图像在显示时应显示为 2 英寸宽。

当图像显示在 DPI 已知的设备上时，存储在图像中的 DPI 值可用于将其自动缩放到正确的物理尺寸。例如，在 72dpi 显示器上显示的 144dpi 图像应在每个维度上缩放 50%，以便将 144 像素（一英寸）的图像映射到 72 像素（一英寸）的显示器表面。然而，Web 浏览器通常不会这样做。图像像素只是直接映射到屏幕像素，因此您必须手动缩放图像以使其像素尺寸适合显示它们的显示器。

您提到以 2048x1536 @ 72 DPI 和 1024x768 @ 144 DPI 获取图像，但它们根本不等效。 2048x1536 72DPI 图像应显示约 28.4 英寸宽 (2048/72)，但 1024x768 144DPI 图像应显示约 7.1 英寸宽 (1024/144)。您确定您不是指 2048x1536 @ 144DPI 和 1024x768 @ 72DPI（两者都是 14.2 英寸宽）吗？

顺便说一句，如今的传统（非视网膜）显示器通常为 96 到 100 DPI，而不是 72。例如，我的 20 英寸戴尔 2007WFP 的像素尺寸为 1680x1050。对角线上大约有 1981 个像素，也就是每英寸大约 99 个像素。 CSS 中的“px”单位实际上定义为 1/96 英寸，在高 DPI 屏幕上可能对应多个物理像素。

【讨论】：

这是一个信息丰富的答案，但这一位可能会产生误导：“当图像显示在 DPI 也为知道。至少在 Mac（2014 MBP 和 2017 iMac）上，显示具有 72dpi（元数据）的 PNG 和具有 300dpi（元数据）的其他相同的 PNG 预览显示完全相同的大小。在 GIMP 中打开时相同。我想不出任何将 DPI 解释为屏幕显示指示的应用程序。当您从预览打印时，预览大小当然会以不同的方式显示它们。

可以使用，不一定被使用。使之成为可能的信息就在那里，即使许多/大多数应用程序不使用它。 （尽管您提到的打印和打印预览是其中的一个示例——“显示在设备上”包括打印到纸上。）

感谢您的回复。这就是我引用“可以使用”的原因；我不是在争论。我的观点（确实是一个问题）是任何现代应用程序（我主要在 Mac 上）是否完全尊重（费心利用）屏幕显示上的 DPI 元数据。当前的做法（至少在我在 Mac 上使用的应用程序）似乎是按照使用 Web 图形的方式对待它们，完全以像素为导向，并在屏幕上忽略任何 DPI 指示。

更多上下文：我并不是说您在“误导”，DPI 的指示可能会在在许多工具中“误导”。例如，在 Mac 上的 Pixelmator Pro 中，当您调整图像大小时，会提供一个（名称不佳的）“分辨率”框，您可以在其中为 PNG 选择 72 或 300 像素/英寸等。除非您打算打印 PNG 图形（可能仍然会这样做），否则如果应用程序不关心该元数据，则至少在 Mac 平台上是“误导性的”。以 72 或 300 DPI 导出它，它似乎对任何 Mac 应用程序在任何地方都没有影响，除非您打印。 （分辨率实际上是宽x高。）

DPI 仍可用于缩放，即使不是直接由显示应用程序进行。例如，如果您将 200dpi 的图像上传到基于 Web 的内容管理系统，服务器可能会将其按原样发送给具有 ~200dpi 显示器的客户端（如 MacBook），但会生成一个 100dpi 缩小的副本以发送给具有常规~100dpi 屏幕。我注意到 Facebook 似乎在做这种事情，以节省带宽 - 有时我在 Mac 上浏览时会看到比在 PC 上更高分辨率版本的照片。

【参考方案3】：

PNG 确实能够在 PNG“pHYs”块中分别存储 X 和 Y 方向的像素/米。不幸的是，这不允许精确转换（72 dpi 是每米 2834.64566929 像素，存储为 2835 像素/米，转换回 DPI 时变为 72.009）；有些人觉得这很令人不安。

JPEG 还可以存储 X_density 和 Y_density，单位为像素/英寸或像素/厘米。

【讨论】：

感谢您提供的信息！只是自己看了一下，因为我发现这很奇怪，并且首先认为它在我使用的软件中。但是经过一些测试和查看其他带有 GIMP 的 DPI 单位后，我也得出结论，它使用的是 px/m。我只是“用谷歌搜索”看看它存储的单位是否可以更改。请注意：我大多看到它向下取整，结果为 71,984 dpi，这也是有道理的，因为它只是将浮点数转换为一个整数，我会说。

感谢您实际回答了这个问题（或者至少是第一个问题）。接受的答案忽略了这一点。

【参考方案4】：

其他答案是正确的，但可能包含太多细节。重要的是像素数。 dpi 将影响 Photoshop 或其他应用程序如何显示它们，但最终，非视网膜全屏为 1024x768，视网膜为 2048x1536。请记住，iPhone 6 Plus 添加了 3 倍的 Retina HD。

如果您有足够的 RAM 和足够快的机器，您可能希望创建 3 倍的图形，以便您可以重新采样并保存所有三种尺寸。

【参考方案5】：

DPI 很少重要，除非在进行打印布局时。如果您有蓝图，DPI 信息对于页面上的正确缩放至关重要。

JPEG 不支持 DPI。但是，各种 JPEG 文件格式都可以。

像 Photoshop 这样的软件是更大的页面布局包 (Creative Suite) 的一部分。因此它（以及 Illustrator 和 InDesign）利用 DPI 信息来说明如何布局页面。

您可以有一个 100x100 的图像、一个 100 DPI 和一个 500 DPI 的 500x500 图像，它们在页面上的尺寸相同。

【讨论】：

这为我清除了一些东西（我不使用 Photoshop，但正在与使用 Photoshop 的人合作）。如果有人通常使用以打印为中心的页面布局 - 而不是 Web 图形 - 他们很可能会有“更大的 DPI 会导致更大的文件大小”的印象（对于相同的明显图像大小在 Photoshop 页面布局中)。而对于典型屏幕显示或 Web 图形上的 PNG 光栅图像，DPI 根本不会改变文件大小，它完全取决于 X x Y 像素的数量和每个像素的位深度颜色通道（也可能是 Alpha 通道）。