25

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.

gbanks
  • 433
  • 1
  • 5
  • 14
  • 3
    No evidence, just a fair amount of experience with imaging, but I feel too that dpi are irrelevant until such time as you come to print. A display has a pixel width and height and an image has a number of pixels across and down which will determine how much of the display it will cover. – Mark Setchell Dec 05 '14 at 20:08

5 Answers5

24

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.

Wyzard
  • 33,849
  • 3
  • 67
  • 87
  • 3
    It's an informative answer, however this bit could be misleading: '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.' At least on a Mac (2014 MBP and 2017 iMac), displaying a PNG with 72dpi (metadata) and an otherwise identical PNG with 300dpi (metadata) with Preview shows exactly the same size. Same when opening in GIMP. I can't think of any apps that interpret the DPI as a screen display indication. As soon as you Print from Preview the preview size shows them differently of course. – Webel IT Australia - upvoter Mar 17 '18 at 12:35
  • 1
    *Can* be used, not necessarily *is* used. The information that makes it possible is there, even if many/most applications don't use it. (Though the printing and print preview that you mentioned is an example of one that does — "displayed on a device" includes printing onto paper.) – Wyzard Mar 17 '18 at 13:30
  • Thanks for reply. That's why I quoted 'can be used'; I'm not arguing. My point (indeed a question) is whether any modern apps (I'm on a Mac mostly) respect (bother to leverage) the DPI metadata at all on screen displays. It seems to be the current practice (at least on the apps I use on a Mac) is to treat them the way web graphics are used, completely oriented on pixels, and ignoring any DPI indication when on a screen. – Webel IT Australia - upvoter Mar 17 '18 at 13:55
  • More context: I don't mean you are 'misleading', the indication of DPI can be 'misleading' *in many tools*. For example, in Pixelmator Pro on Mac, when you resize an image, offers a (poorly-named) 'Resolution' box, where you can choose 72, or 300 pixels/inch etc for a PNG. Unless you plan to print the PNG graphic (which one might still do), it is 'misleading', at least on the Mac platform, if the apps don't care about that metadata. Export it at 72 or 300 DPI and it seems to makes no difference anywhere for any Mac app, unless you print. (The resolution is in fact the width x height.) – Webel IT Australia - upvoter Mar 17 '18 at 14:10
  • For raster images, I don't know of any applications offhand that do physical size scaling for display, though I haven't gone looking. But PDF viewers, including the Mac "Preview" app, scale to physical size if you choose "actual size" as the zoom setting (assuming the OS knows the monitor's DPI, which it does on a MacBook). That's a little different since PDF is vector-based and doesn't have "dots" (pixels) at all, but its internal coordinate system has a defined relationship to physical dimensions, which is pretty much analogous to a DPI. – Wyzard Mar 17 '18 at 14:14
  • Yes, makes sense for PDF, since PDF usually/often associated with printing. BTW above I meant resolution is determined by number of X pixels by Y pixels (for a given image subject), not 'width x height' (in any sense of size). More pixels can be squeezed into, for example, a retina display, for the same subject, giving higher effective resolution on displays. Thus DPI for raster image plays no role (web case). – Webel IT Australia - upvoter Mar 17 '18 at 14:21
  • 1
    DPI can still be useful for scaling, even if not directly by the display application. For example, if you upload a 200dpi image to a web-based content-management system, the server might send it as-is to clients with ~200dpi displays (like MacBooks), but produce a 100dpi downscaled copy to send to clients with conventional ~100dpi screens. I've noticed that Facebook seems to do that sort of thing, to save on bandwidth — sometimes I'll see a higher-resolution version of a photo when browsing on my Mac than on my PC. – Wyzard Mar 17 '18 at 14:27
  • Final comment. I have ticked your very useful answer, and I am sure you know exactly what you are talking about. My misgiving is with this 'For example, a 144dpi image displayed on a 72dpi monitor *should* be scaled by 50% in each dimension'. The word 'should' seems a little strong when modern devices and apps don't seem to do that. To me, it alters the intention of your answer. It makes it sound like DPI "should" play a role for raster images on screens. Perhaps you could edit it with '*might well* be scaled by 50% in each dimension; or similar. Sincere thanks for your feedback. Webel – Webel IT Australia - upvoter Mar 17 '18 at 14:47
24

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.

Glenn Randers-Pehrson
  • 11,940
  • 3
  • 37
  • 61
  • Thanks for that information! Just took a look for myself because I found that strange and first thought it's in the Software I use. But after some testing and looking at other DPI units with GIMP I also came to the conclusion that it's using px/m. I just 'googled' to see if the unit it's stored in can be changed.. Just a note: I've mostly seen it round the number down, which results in 71,984 dpi, which also makes sense as it's just casting the float to an integer, I'd say. – Dennis98 Jan 18 '18 at 22:26
  • 1
    Thank you for actually answering the question (or a least the first quesiton). The accepted answer ignored that. – gman Apr 02 '18 at 07:05
2

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.

David Berger
  • 766
  • 5
  • 10
2

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.

user3344003
  • 20,574
  • 3
  • 26
  • 62
  • 1
    This cleared something up for me (I don't use Photoshop but am working on something with someone who does). If someone usually works with print-centric page layouts - as opposed to web graphics - they may well have the impression that "larger DPI causes a larger file size" (for the same apparent image size **in a Photoshop page layout**). Whereas for a PNG raster image on a typical screen display or for web graphics, **the DPI does not change the file size at all**, it's determined entirely by the number of X by Y pixels and the bit depth per color channel (and possibly also an alpha channel). – Webel IT Australia - upvoter Mar 17 '18 at 15:20
1

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.

Nicky Smits
  • 2,980
  • 4
  • 20
  • 27