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?

我刚刚从我们的设计师那里收到了一个视网膜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.

但是这一次设计师被指示以1024 D768 @ 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是图像的像素尺寸与其在显示时出现(或应该出现)的物理尺寸之间的关系，而与如何无关它会显示(屏幕，打印等).没有图像 format 本质上没有DPI，但是任何由像素构成并应以一定物理尺寸显示的实际 image 都具有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的图像应在显示时显示一英寸宽，但是显示为DPI为72的144像素宽的图像应在显示时显示为两英寸宽.

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)?

如今，常规(非视网膜)显示器的BTW通常为96到100 DPI，而不是72.例如，我的20英寸Dell 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屋！