html - Do PNGs (or JPGs) have a DPI? Or is it irrelevant when building for retina?

Question

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?

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.

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.

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.

Answer 1

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.

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.

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.

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, 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.