It’s surprising how often I see a call-out, a request, for a digital image intended for use on a website like “2000 x 3000 @ 72 dpi”.
That’s actually nonsense.
But first, here’s how dots per inch (dpi) works with images:
Lets say you have a line made up of exactly 100 dots. That never changes:
……………………………………………………………………………………….
Now, if you print that whole line using 1 of those dots every inch, then the print will obviously be 100 inches long.
If instead you use 2 dots every inch, then the print will be 50 inches long.
If you use 10 dots per inch, the print will be 10 inches long, and if you use 20 dots per inch (DPI) the print will be 5 inches long.
Finally, if you use all 100 dots in a single inch, the print will be, of course, 1 inch long.
Here’s the rule: The size of your print will depend on the TOTAL length of the side DIVIDED by the DPI you choose to use.
If you have an image that is 2000 pixels long, and you print it at 300 dpi, then the resulting print will be 2000/300 or 6.6 inches long.
Cut to the chase:
These make sense: “send me an image that’s 5″ x 7″ @ 300 dpi” or “send me an image that’s 2000 x 3000.”
This does not make sense : “send me an image that’s 2000 x 3000 @ 72 dpi” (Keep reading to see why it’s nonsense.)
A digital image’s size is its size, period. “2000 x 3000 @ 72 dpi” or “2000 x 3000 @ 300 dpi” is not going to change the size of the file. The file is 2000 x 3000, now and forever.
What it does do is say “If I print this 2000 x 3000 pixel image at 72 dpi, the resulting print will be 27.7″ x 41.6″, (but if I print it at 300 dpi, the print will be 6.6″ x 10″.)”
Web browsers have no concept of “dots per inch” or “pixels per inch” because computer screens may have different sizes, but each one has a fixedresolution. Some screens are over 220 PPI, while others are 140 ppi or 120 ppi or… So specifying an inch-size in an image destined for the web won’t work. What is 300 dpi on a screen that is 120 ppi? To do that, the display would be throwing away pixels in the image.
Expressing DPI for a screen image serves no purpose, as DPI only applies to printing.
Here is proof:
This image is 955 x 651 pixels, and is set to 72 dpi:
and here is the exact same image with the dpi set to 360:
See any difference?
Nope? That’s because Dots Per Inch is a choice that is only possible when PRINTING an image. Your -web browser- cannot change resolution like a printer can.
If you PRINT the top image however, it will be 13 inches wide at 72 dpi, but the bottom one will be about 2 1/2 inches wide (not 13 inches) because it’s using 360 dpi.
Here’s another good comparison and explanation, just in case you want a second opinion: https://daraskolnick.com/image-dpi-web/
However, it does make sense to use “dpi” if the size specification is in inches instead of pixels (as in dots per inch): “send me an image that’s 5″ x 7″ @ 300 dpi.” That file will be 1500 x 2100 pixels. (5 x 300 = 1500; 7 * 300 = 2100). Equally, if someone asks you to send them an image specified as just “5 x 7” – then you have no idea at all what to send (unless perhaps you send them an actual 5×7 print instead of a digital file.)
Digital files are specified by either pixel dimensions OR by inches and dpi. Mixing one with the other makes no sense.
And finally, the proverbial “72 dpi” – which is wrong on a couple of counts, unless you’re printing a huge image, meant to be viewed from a great distance. It would never work for a printed photograph.
The person specifying “72 dpi” is probably thinking of a computer monitor screen, but as far as I know, no computer monitor has been made at 72 ppi (notice: PIXELS per Inch, not DOTS per inch) in well over a 30 years. Today’s monitors pretty much begin at 94 ppi and go up from there. And even then, specifying a ppi for a monitor is meaningless, since the pixels per inch of a monitor is fixed, and cannot change (whereas one can print at any chosen dpi.)
PPI (Pixels per inch) is used for displays, such as monitors and TVs; dots per inch (DPI) is used in the printing process. (It is usually true, with rare exceptions, that 1 ppi = 1 dpi.)
And that is why only these make sense: “send me an image that’s 5″ x 7″ @ 300 dpi” or “send me an image that’s 2000 x 3000”
Don’t feel bad, this confuses a lot of people.
Hey Tracy, I’ve bumped into posts of yours all over the web – I think maybe Macintouch, Rapidweaver, InDesign type sites. Just wanted to say this is one of the best explanations on the topic I’ve read 🙂
Thanks for the kind words, Kim. You have inspired to try once again to get the images uploaded… 🙂