PNG(或 JPG)有 DPI 吗?还是在为视网膜构建时无关紧要? [英] Do PNGs (or JPGs) have a DPI? Or is it irrelevant when building for retina?

问题描述

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

A simple question that I have been having great difficulty finding a definitive answer to: do PNG files have a DPI? Or perhaps more importantly, is it even relevant when building retina-enabled sites/apps?

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

I've just received PSD assets from our designer for a retina iPad app that I must convert into HTML for display within the app. Typically, I receive such files as 2048x1536 @ 72 DPI -- double size but standard screen DPI. I then typically use CSS to tell the browser how to display it.

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

But this time the designer was instructed to provide his PSDs at 1024x768 @ 144 DPI (standard size but double DPI.) I believe this is incorrect, as the DPI setting within Photoshop is intended for print purposes. Plus, when I save something from a 144 DPI PSD as a PNG or JPG, it is exactly the same as one saved from a 72 DPI (or 30,000 DPI for that matter) PSD. DPI doesn't seem to be reflected in either any setting that I can see in the resultant file nor in a different file size. It seems, at best, metadata.

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

So, it's my understanding that DPI isn't relevant here, and we should simply be asking for double-sized assets for retina projects, but I would like some confirmation/clarity on the issue before asking for new assets. I work with many designers that are transitioning from print backgrounds so this is a common issue I encounter and I'd like to be able to provide better guidance with our requirements in the future.

推荐答案

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

DPI is the relationship between an image's pixel dimensions and the physical size it appears (or should appear) when displayed, regardless of how it's displayed (screen, print, whatever). No image format inherently has a DPI, but any actual image that's made of pixels and should appear with a certain physical size has a DPI.

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

You're correct that DPI is just metadata as far as an image file is concerned. The image itself is a grid of pixels with no inherent physical size, but the DPI value expresses an intended physical size. For example, an image that's 144 pixels wide with a DPI of 144 should appear one inch wide when displayed, but an image that's 144 pixels wide with a DPI of 72 should appear two inches wide when displayed.

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

The DPI value stored in an image can be used to scale it automatically to the correct physical size when it's displayed on a device whose DPI is also known. For example, a 144dpi image displayed on a 72dpi monitor should be scaled by 50% in each dimension, so that 144 pixels (one inch) of image is mapped to 72 pixels (one inch) of monitor surface. Web browsers, however, typically don't do this; image pixels are simply mapped directly to screen pixels, so you have to manually scale your images to have pixel dimensions that are appropriate for the monitor where they'll be displayed.

您提到以 2048x1536 @ 72 DPI 和 1024x768 @ 144 DPI 获取图像，但这些并不完全相同.2048x1536 72DPI 图像应该显示大约 28.4 英寸宽 (2048/72)，但 1024x768 144DPI 图像应该显示大约 7.1 英寸宽 (1024/144).你确定你说的不是 2048x1536 @ 144DPI 和 1024x768 @ 72DPI(两者都是 14.2 英寸宽)?

You mentioned getting images at 2048x1536 @ 72 DPI and 1024x768 @ 144 DPI, but those are not at all equivalent. A 2048x1536 72DPI image should appear about 28.4 inches wide (2048/72), but a 1024x768 144DPI image should appear about 7.1 inches wide (1024/144). Are you sure you didn't mean 2048x1536 @ 144DPI and 1024x768 @ 72DPI (both of which are 14.2 inches wide)?

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

BTW, conventional (non-retina) monitors these days are typically 96 to 100 DPI, not 72. For example, my 20-inch Dell 2007WFP has pixel dimensions of 1680x1050. That's about 1981 pixels on the diagonal, which is about 99 pixels per inch. The "px" unit in CSS is actually defined as 1/96th of an inch, which may correspond to more than one physical pixel on a high-DPI screen.

这篇关于PNG(或 JPG)有 DPI 吗?还是在为视网膜构建时无关紧要?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！