Pixels per inch for web

What is the significance?

Simply put? Nothing.
Well, if that were all I had to say on the subject, this would have to be my shortest blogpost ever… Okay, a bit more info then:
A lot of first time DSLR users are concerned that their shiny new camera delivers files that are “only” 72dpi, while their old point and shoot delivered 300dpi files. Why is this concern unwarranted? Surely 300 is more then 72, and more is better, right?

Wrong

The old wisdom saying is that “300dpi is for printing and 72dpi is for screen”.
There are a few things wrong with that.
First and foremost, the term “dpi” stands for dots per inch. In a digital file there are no dots, only pixels. So the correct term is pixels per inch (ppi).
Also, 72ppi originated as it was the resolution of an ancient Mac monitor. Current monitors have a much higher pixel density: My old 12″ PowerbookG4 for instance has a screen resolution of about 100ppi. Most current screens are somewhere between 80 and 120ppi.

Do the math…

for your screen: Simply measure width and height and divide the number of pixels by the measured values… Tip: Once you found the figure for your screen, be sure to enter it in the PSCS4 preferences under “Units and Rulers, Screen resolution”: That way, the “Zoom, Print size” will show an accurate sized preview.
So, is a 300ppi file better then a 72ppi file?

No difference

If you hadn’t gathered as much from the above, for display on screen, only the display you’re using will determine the “resolution”.
So, a file that contains for instance 500×750 pixels will be displayed at a different size (in inches, centimeters, or whatever you prefer), depending on the screen you’re using to view it. The arbitrary ppi figure set in the file has no relevance whatsoever.

To illustrate that, here is an example: Each file is 500×750 pixels. One is 72ppi, the other 300ppi.

500x750 pixels, 300ppi
500x750 pixels, 72ppi

Notice the difference? No? That’s because there isn’t any.

Why use it then?

Because you have to put something in the box: There is no way that Photoshop will allow you to not fill in a value. However, what you put in there is pretty arbitrary. Use whatever you like basically for display on screen.
I prefer to use 300ppi for general use, since then the “image size” dialog box will quickly tell me about how large I can print an image at decent quality. For web, I mostly use 72ppi (unless I forget) since, well, that’s what some people expect…

Some more reading: here

Post to Twitter Post to Delicious Post to LinkedIn

Tags: , , , , ,

17 Responses to “Pixels per inch for web”

  1. Dave Says:
    March 8th, 2010 at 07:11

    I think you really neglected the primary issues where ppi on the web is concerned: copyright violations and space requirements. Since virtually any image posted online nowadays can be “stolen” most uploaders prefer to (1) save bytes by reducing images to 72ppi, and (2) reduce the risk of print use by only providing lower quality images.

    I know you’re primary interest is quality here, but still, these points need to be included in the discussion.

  2. René Says:
    March 8th, 2010 at 13:43

    Hi Dave!

    Did you actually read the article?
    You don’t save bytes, nor do you lower the quality by using 72ppi.
    All that matters is the number of pixels.

  3. Hybeagle Says:
    April 5th, 2010 at 21:28

    After reading the article, I get it that the PPI is only used for printing the image. Pixal Per Inch, it defines how big the prints will be with a given resolution(in Pixel).

    Say I have a image of 100 x 100 pixel,
    If I set it to 10ppi, then the prints will come out as 10inch x 10inch, big prints but very low quality when looking at it at arm length.

    If I set it to 100ppi, the prints wil lbe 1inch x 1inch, small prints but looks better at arm size.

    So after all, the PPI is useful for people, who wants to make a certain size of print, to determine the image resolution should be ?

  4. René Says:
    April 6th, 2010 at 20:04

    That’s how it works :)
    For a “decent” print, you need about 150 – 200 ppi. For a “good” print, something like 200 – 300 ppi. Depends on the printed size as well: A large print (say 40x60cm) won’t be viewed from as close as a 10x15cm print.

  5. Peter Says:
    July 6th, 2010 at 11:49

    PPI is exactly what it means–”pixels per inch.” It specifies how many pixels of the image will print in a single inch in the print output. So a 1000 x 1000 pixel image printed at 100 PPI will have dimensions of 10″ x 10″. PPI might be better described as “pixels per PRINTED inch,” but as it is sometimes used to describe the pixel density of display devices (e.g. monitors, projectors, and mobile phones), the reference to printing is not always applicable. For such displays, PPI is generally a fixed property–i.e., the display has a certain fixed number of physical pixels per linear inch, and it can be found by measuring the display as described in the above post. But when Photoshop asks for PPI in the Image Size dialog, this value is used to determine how PS converts the pixel dimensions of the image into printed inches. As such it affects how other dialogs, tools, and info palettes will show measured dimensions (if they are set to display units in inches/cm). PS can also use this PPI value to print at the desired size, or you can adjust the print size in the Print dialog as well.

    The choice of how many pixels per inch of printed output will correspond to a satisfactory result depends on the nature of the image, the intended viewing distance, the type of print media, and other subjective factors. It is premature to assume that a single “magic” value–or even range of values–is best under all circumstances. The optimal PPI must always be selected on a case-by-case basis. And this is why PS has such a feature in the Image Size dialog.

  6. Walter Says:
    January 31st, 2012 at 22:36

    I came to this page for the reason that photoshop requires input and because I am trying to figure out why it is that after I save the image/logo to a jpg the colours don’t appear the same as they do in the PS project? I thought perhaps this setting may have an affect, but now it seems it may not.

  7. René Says:
    February 1st, 2012 at 12:23

    You might want to read this blogpost: http://www.getcolormanaged.com/color-management/saveforweb/ ;)

  8. Dude Says:
    March 21st, 2013 at 21:26

    Actually, lower dpi images do use less bytes which will help images load faster when your page is accessed because they have smaller file sizes. This is important for sites that mobile devices access. dpi does use more storage space and bandwidth, i think you should say that it is wasted storage and bandwidth, not that it is the same file size.

  9. René Says:
    April 8th, 2013 at 14:46

    Go back and re-read the blogpost…
    ppi has no significance whatsoever for web images.
    Check the images in the blogpost. In this case, the 300ppi image is 102,359 bytse, while the 72ppi image is 102,759 bytes. Small difference, probably due to slightly different jpg compression or so, yet the lower ppi image actually has a slightly bigger filesize…

  10. How to Crop Images in Photoshop to Specific Sizes [Quick Tip] | Atlanta Web Traffic Says:
    October 10th, 2013 at 22:06

    [...] It doesn’t really matter what you put in the resolution box if the image is for the web, but 72 ppi should do the trick. If this image will be used in print, a higher resolution will be needed (at least 300 ppi).  [...]

  11. How to Crop Images in Photoshop to Specific Sizes [Quick Tip] | The Right Tool Kit For Your Home Bases Business Says:
    October 10th, 2013 at 22:43

    [...] It doesn’t really matter what you put in the resolution box if the image is for the web, but 72 ppi should do the trick. If this image will be used in print, a higher resolution will be needed (at least 300 ppi).  [...]

  12. How to Crop Images in Photoshop to Specific Sizes [Quick Tip] | Blackonomics Magazine Says:
    October 11th, 2013 at 01:31

    [...] It doesn’t really matter what you put in the resolution box if the image is for the web, but 72 ppi should do the trick. If this image will be used in print, a higher resolution will be needed (at least 300 ppi).  [...]

  13. How to Crop Images in Photoshop to Specific Sizes [Quick Tip] | 8x10designs™ Says:
    October 11th, 2013 at 04:46

    [...] It doesn’t really matter what you put in the resolution box if the image is for the web, but 72 ppi should do the trick. If this image will be used in print, a higher resolution will be needed (at least 300 ppi).  [...]

  14. Kilobuzz | How to Crop Images in Photoshop to Specific Sizes [Quick Tip] « KiloBuzz Says:
    October 11th, 2013 at 05:00

    [...] It doesn’t really matter what you put in the resolution box if the image is for the web, but 72 ppi should do the trick. If this image will be used in print, a higher resolution will be needed (at least 300 ppi).  [...]

  15. How to Crop Images in Photoshop to Specific Sizes [Quick Tip] — Paul Tufts - Premier Coach for Online EntrepreneursPaul Tufts - Premier Coach for Online Entrepreneurs Says:
    October 14th, 2013 at 20:14

    [...] It doesn’t really matter what you put in the resolution box if the image is for the web, but 72 ppi should do the trick. If this image will be used in print, a higher resolution will be needed (at least 300 ppi).  [...]

  16. Katie Says:
    April 6th, 2014 at 21:05

    Hey, I am a web designer and I have to disagree with you. Any pictures that you can put on the internet were converted to internet standards which is the super small, dinky image. If you take the image you posted (the 300 ppi one) and copy it back on to photoshop, you’ll see that it is now 72 ppi. Some websites let you upload your own image and it’ll take care of the resizing, but most don’t. The only thing is that if you save it as a higher ppi, it’ll look a BIT clearer on ipads. But that’s all.

  17. René Damkot Says:
    April 7th, 2014 at 11:02

    Well, it’s fine if you want to disagree, but then you’re wrong.
    Compare the two images above: they are identical.
    If you copy-paste an image into a new document in PS, the ppi setting of that document will be used. If your default is 72ppi, that will be it. If your default is 30000ppi, that will be used. Try it.

Leave a Reply

© copyright 2008 René Damkot Fotografie
Design by: styleshout     Valid CSS | XHTML