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.

Answer 2

PNG does have the ability to store pixels/meter, separately for the X and Y direction, in the PNG "pHYs" chunk. Unfortunately this does not allow exact conversions (72 dpi is 2834.64566929 pixels per meter which is stored as 2835 pixels/meter and when converted back to DPI becomes 72.009); some people find this disturbing.

JPEG also can store X_density and Y_density, in units pixels/inch or pixels/cm.

Answer 3

DPI is rarely significant except when doing print layouts. If you have a blueprint, DPI information is essential for proper scaling on the page.

JPEG has no support for DPI. However, the various JPEG file formats do.

Software like Photoshop is part of a larger page layout package (Creative Suite). So it (and Illustrator, and InDesign) take advantage of the DPI information to tell how to lay out a page.

You could have a 100x100 image a 100 DPI and a 500x500 image at 500 DPI that would be the same size on the page.

Answer 4

The other answers are correct but may carry too much detail. All that matters is the number of pixels. The dpi will affect how Photoshop or other app might display them but in the end, full screen in non retina is 1024x768 and in retina is 2048x1536. Keep in mind that the iPhone 6 Plus added Retina HD which is 3x.

IF you have enough RAM and a fast enough machine, you may want to create graphics at 3x so you can re sample and save for all three sizes.

Answer 5

They are NOT EXACTLY the same. File 1 has double the width, and double the height, therefore 4 times as many pixels as picture number 2. Both files, no matter what DPI have dimensions in pixels, therefore the DPI does not matter on PC because a computer just uses these px.

The DPI is indeed for print. It's to assure better quality without changing the size (which would be in inches for example) DPI only tells us about the pixel to inch ratio when displayed on paper or different computer screens.

You should tell your client to send another picture with the desired resolution.