PNG（或JPG）有DPI吗？在为Retina屏幕构建时是否无关紧要？

Question

PNG（或JPG）有DPI吗？在为Retina屏幕构建时是否无关紧要？

htmlresponsive-designpngphotoshopretina-display

25

我一直在寻找一个明确答案的简单问题是：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并不相关，我们应该仅请求用于视网膜项目的双倍大小的资产，但是在请求新资产之前，我想对这个问题进行一些确认/澄清。我与许多从印刷背景转变而来的设计师合作，因此我经常遇到这个常见问题，我想在未来提供更好的指导要求。

- gbanks

3

没有证据，只是有一定的成像经验，但我也觉得直到打印时才会变得重要。显示器有像素宽度和高度，图像有横向和纵向的像素数量，这将决定它覆盖显示器的面积大小。 - Mark Setchell

5个回答

24

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英寸Dell 2007WFP的像素尺寸为1680x1050，对角线长度约为1981像素，即每英寸约99像素。在CSS中，“px”单位实际上被定义为1/96英寸，这可能在高DPI屏幕上对应多于一个物理像素。

- Wyzard

3

这是一篇信息性答案，但这部分内容可能会引起误解：“存储在图像中的DPI值可以在已知设备DPI的情况下自动缩放图像以使其显示在正确的物理大小上。”至少在Mac（2014 MBP和2017 iMac）上，在Preview中显示具有72dpi（元数据）和另一个具有300dpi（元数据）完全相同的PNG文件时，它们的尺寸是相同的。在GIMP中也是如此。我想不出任何将DPI解释为屏幕显示指示的应用程序。当然，从Preview中打印后，预览大小会有所不同。 - Webel IT Australia - upvoter

1

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

谢谢回复。这就是我引用“可以使用”的原因；我并不是在争论。我的观点（实际上是一个问题）是，是否有任何现代应用程序（我主要使用Mac）在屏幕显示中完全遵循（利用）DPI元数据。目前的做法似乎是（至少在我在Mac上使用的应用程序中），将它们视为Web图形的使用方式，完全以像素为导向，在屏幕上忽略任何DPI指示。 - Webel IT Australia - upvoter

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

1

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

显示剩余3条评论

2

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

如果您有足够的RAM和足够快的机器，您可能希望以3倍的大小创建图形，这样您就可以重新采样并保存三个大小的图形。

- David Berger

2

DPI在除了制作打印布局之外很少有意义。如果您有蓝图，则DPI信息对于在页面上进行正确缩放至关重要。

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

像Photoshop这样的软件是更大型的页面布局软件包（创意套件）的一部分。因此，它（以及Illustrator和InDesign）利用DPI信息来确定如何布置页面。

您可以拥有一个100x100像素、100 DPI的图像和一个500x500像素、500 DPI的图像，在页面上大小相同。

- user3344003

1

这为我解决了一些疑惑（我不使用 Photoshop，但正在与使用它的人合作）。如果有人通常使用以印刷为中心的页面布局（而不是网页图形），他们可能会认为“更大的 DPI 会导致更大的文件大小”（对于在 Photoshop 页面布局中具有相同视觉效果的图像尺寸）。然而，在典型的屏幕显示或网页图形上，PNG 光栅图像的 DPI 根本不会改变文件大小，它完全由 X 乘 Y 像素数和每个颜色通道的位深度（以及可能还有一个 alpha 通道）确定。 - Webel IT Australia - upvoter

1

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

DPI确实用于打印。它可以在不改变大小（例如英寸）的情况下确保更好的质量，DPI仅告诉我们在纸张或不同的电脑屏幕上显示时像素与英寸的比例。

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

- Nicky Smits

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Glenn Randers-Pehrson · Accepted Answer

PNG有能力在PNG的“pHYs”块中分别存储像素/米的X和Y方向。然而，这并不能允许精确的转换（72 dpi相当于2834.64566929像素每米，而存储为2835像素/米，当转换回DPI时则成为72.009）; 一些人发现这很烦人。

JPEG也可以以像素/英寸或像素/厘米的单位存储X_density和Y_density。