html - PNG(或 JPG)有 DPI 吗？还是在构建视网膜时无关紧要？

Question

一个简单的问题，我一直很难找到明确的答案: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 似乎没有反射(reflect)在我在结果文件中看到的任何设置中，也没有反射(reflect)在不同的文件大小中。充其量，它似乎是元数据。

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

Answer 1

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

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

当图像显示在 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 屏幕上可能对应一个以上的物理像素。