72 dpi myth

[moscato_images]

The most popular answer to the question "what resolution should my images be on the web?" is usually 72dpi. Let's take a look at this myth.

First, let's take a look at an image in a few different resolutions.



One thing you may notice right away is that all three images are the exact same size, yet their DPI's differ greatly. (download them and check the DPI if you would like)

--DPI--
Let’s start with DPI and remember what it is exactly. DPI stand for “dots per inch.” This term carries over from Printers who would actually be printing x-number of dots per linear inch on a substrate. (paper) But, our monitors don’t know what an ‘inch’ even is. Try this, hold a ruler up to your screen and make a one-inch line in a paint/photo program. Now go change your monitors screen resolution. (right click on desktop, Properties, Setting Tab, Screen Resolution) Now measure the line, it’s definitely not the same. This is because your monitor/computer is only concerned with how many PIXELS are in the image. Notice the above three images again. All of them are 300x200 PIXELS…all the same size on the screen.

*PIXELS= Size on monitor only*

--FILE SIZE—
So what about the file size? All three images are 65KB. So another truth is brought out that the higher the DPI of an image doesn’t necessarily mean it’s a bigger file. So, next time someone says “I need a bigger file than 180DPI to print, I need a 300DPI” you know to ask what SIZE (inches) they need for a print because the DPI is relative in size, it only counts in Quality. (this doesn’t mean DPI doesn’t matter, of course a 20x24 print at 300 looks better than a 20x24 at 72 dpi.)

*DPI= Quality of an image (on screen or printer)*

--PRINT--
So what is the different between these images? Print size. Each image will print on a printer (which doesn’t care about pixels, only INCHES) at a different size, which is labeled on each image.

* INCHES= Size on print only*

So, the net logical question would be what size should my images be uploaded as? Well, 5-10 years ago everything was pretty standard at 800x600, but I hope many are out of that dinosaur age and is at least using 1024x768. (I personally use 1280x1024 or even 1600x1280 to work, and no, my fonts are not too small to read because you can always make system fonts and icons bigger!) If you do not want your images to bleed off of the 800x600’s screen, make your images 760x420 constrained. (760x420 is usually a standard web developing idea as well) But remember, the people using 1280x1024 (and higher) are going to see a much smaller images. So, you have to compromise between what you think everyone is using. Actually it may be a good idea for a poll to be made for we can get a feel for everyone’s monitor resolutions.

--Saving in Photoshop—
I don’t know if anyone has noticed, but I can always save a Jpg much smaller than a Gif file. I think Gif has seen better days. I think their last good use is to make animation files. I always find that a Jpg quality setting between 6-8 usually produces a good looking image. And, out of habit I always type in 72 in the DPI box

DPI= Quality of an image (on screen or printer)
PIXELS= Size on monitor only
INCHES= Size on print only

Other resources:
http://www.nicholsonprints.com/Articles/dpi.htm
http://www.scantips.com/no72dpi.html
http://www.ekdahl.org/test_dpi/test2dpi.htm

-joshua
p.s. I may have made a mistake or two in my calculations, if so, please point them out for we can learn it better. thanks!

[jford]

Interesting and helpful. Thanks for taking the time to explain this.

[PhotographerC]

DPI has nothing to do with anything related to an image. It has no effect on the resolution of an image. I'm not sure how you came up with all this.

DPI is for hardware, and output devices. For example most screens are 72 or 96 dpi. Printers are 300,600, 1200 dpi etc.

The resolution of an image is determined by the width of the image by the height and is measured in (most usually) megapixels.

The DPI value is usually the result of sizing an image to fit a piece of paper and is provided for you to see if you have enough dots for your output (you usually want at least 100 DPI on a print).

As far as working with images in Photoshop, the DPI is a setting you can completely ignore. It only matters when you are going to print. Screen DPI is determined by your video mode and your screen size but again, it's irrelevant because you are generally sizing the image to fit within the video mode (800x600, 1024x768, etc.).

DPI isn't a myth but it's certainly not significant outside of printing.

[LifeIsGreatImages]

Very good topic. Thanks so much for taking the time to share your knowledge.

Now that you've carefully explained it, the concept seems clear. I guess that's called learning!

Steve

[cclesue]

Dots Per Inch with Pixels Per Inch. One relates to printers and the other relates to monitors. Monitors are rated in Pixels not dots. The old standard was 72 ppi for PC's and 96 ppi for the Mac's. And then along came better monitors and video cards. Still the web standard for most is 72 ppi.

[StuHaluski]

Originally Posted by PhotographerC

DPI has nothing to do with anything related to an image. It has no effect on the resolution of an image. I'm not sure how you came up with all this.
DPI is for hardware, and output devices. For example most screens are 72 or 96 dpi. Printers are 300,600, 1200 dpi etc.
The resolution of an image is determined by the width of the image by the height and is measured in (most usually) megapixels.
The DPI value is usually the result of sizing an image to fit a piece of paper and is provided for you to see if you have enough dots for your output (you usually want at least 100 DPI on a print).
As far as working with images in Photoshop, the DPI is a setting you can completely ignore. It only matters when you are going to print. Screen DPI is determined by your video mode and your screen size but again, it's irrelevant because you are generally sizing the image to fit within the video mode (800x600, 1024x768, etc.).
DPI isn't a myth but it's certainly not significant outside of printing.

no you cannot ignore dpi.
By your inference I can care less what the dpi is unless I print. Fine, I put up a 20dpi image at 8.5 x 12.5 inches and a 72 dpi at 8.5x12.5 inches.
which one is a good size?
And 100dpi is not a good resolution to print at, I print at 300dpi almost without exception. On certain high detail shots I might go to 600dpi to 1200 dpi.
I always work on my images with intent to print, the web is a poor place to present your work. The difference between my 11x14 prints in my book vs any web sized image I have made is awesome, no comparison.
Lastly my dual monitors are set to 1200x1600 dpi screen resolution.
Regards,
Stu

[gregkdavis]

--Saving in Photoshop—
I don’t know if anyone has noticed, but I can always save a Jpg much smaller than a Gif file. I think Gif has seen better days. I think their last good use is to make animation files. I always find that a Jpg quality setting between 6-8 usually produces a good looking image. And, out of habit I always type in 72 in the DPI box

Gif's have seen better days, but it depend on your needs. Gif format is still great
for flat webstandard colors whereas jpegs are great for reduction of continuous tone
images. Each format has it's strenghts and weaknesses and you have to know
how to make the most of them.

So, the net logical question would be what size should my images be uploaded as? Well, 5-10 years ago everything was pretty standard at 800x600, but I hope many are out of that dinosaur age and is at least using 1024x768. (I personally use 1280x1024 or even 1600x1280 to work, and no, my fonts are not too small to read because you can always make system fonts and icons bigger!) If you do not want your images to bleed off of the 800x600’s screen, make your images 760x420 constrained. (760x420 is usually a standard web developing idea as well) But remember, the people using 1280x1024 (and higher) are going to see a much smaller images. So, you have to compromise between what you think everyone is using. Actually it may be a good idea for a poll to be made for we can get a feel for everyone’s monitor resolutions.

I stick with the 800x600 or the smaller since you may have maybe 30-40% of the monitors are still at that size.

Rule: Larger monitors get it all, but the smaller montors cannot fit everything
onto their screen so it's best to go ahead and design for the average
minimum.

DPI counts in size and quality.

You can have an 8x10 inch image at 180 dpi, and need the image to be 8x10 inches at
300 dpi ( hence- your file size will increase significantly) because the image setter
itself may be set at 300 dpi- which means your print will come out smaller than 8x10
if you do not compensate.

Pixels per inch used to be 72 ppi/dpi because that was the standard in the beginning.
Things have changed between the windows and mac formats since then, but the
72 ppi has stuck and provides a benchmark for web developers.

Because people sometimes get confused about the size and resolution of the screen.
72 ppi makes it easier for all people to set up their images. I just do everything in pixels
execept when it comes to print jobs.

[StuHaluski]

Originally Posted by StuHaluski

no you cannot ignore dpi.
By your inference I can care less what the dpi is unless I print. Fine, I put up a 20dpi image at 8.5 x 12.5 inches and a 72 dpi at 8.5x12.5 inches.
which one is a good size?
And 100dpi is not a good resolution to print at, I print at 300dpi almost without exception. On certain high detail shots I might go to 600dpi to 1200 dpi.
I always work on my images with intent to print, the web is a poor place to present your work. The difference between my 11x14 prints in my book vs any web sized image I have made is awesome, no comparison.
Lastly my dual monitors are set to 1200x1600 dpi screen resolution.
Regards,
Stu

I have since realized while I made my smaller image at 20 dpi it still views as if it were 72dpi, so in that respect photographerC is correct.
However one cannot just ignore dpi because it still affects size.
It is a very confusing thing to learn.
Sorry if I added to the confusion, Im sure I did.
Stu

[PhotographerC]

Originally Posted by StuHaluski

I have since realized while I made my smaller image at 20 dpi it still views as if it were 72dpi, so in that respect photographerC is correct.
However one cannot just ignore dpi because it still affects size.
It is a very confusing thing to learn.
Sorry if I added to the confusion, Im sure I did.
Stu

I'm not sure how folks get confused on this one but they do. I've encountered several posts where folks had long discussions about dpi in images, when images don't have a dpi.
Maybe the easiest way to make that point is ask you where you set the DPI in your camera. You don't. Your camera is going to generate a certain number of megapixels. The image size coming out of my camera (when set to maximum) is 3008 x 2000 pixels. DPI means nothing because the resolution is the width times the height.
If I went to print this image at an 8" x 10" size on a 300 dpi printer, it would be okay because 10" x 300 = 3000. I.E. my image has enough resolution to cover the area. Okay but my Epson printer boasts that it has 14400 DPI. So when I go to print my image - 10" x 14400 = 144,000. Whoops. I'm about 143,700 pixels shy of maximum output. Is it a problem? No. The computer will work everything out and print the image. The quality factor is often determined by what the eye can see not what the printer can produce.
The problem comes in when I have an image that is 100x100 pixels and someone wants to print it out 16"x20" at 100DPI (or 2000 pixels on the longest side). It's going to look like crap because I don't have the resolution to print it at that size at that DPI. You can make the image bigger but the computer is inventing the information contained in the extra pixels. The image will look pixelated when you go to look at it (like looking at an image at 400% on your screen).
The reason I mentioned 100 DPI is not because that's the optimal setting. Remember most of the time the DPI is going to be the result of fitting your image to the desired output - not the other way around. 100 DPI is what most folks agree is what the eye is capable of seeing and is the minimum you should have for a quality image at all sizes, except for very large images where you can count on the natural viewing distance to compensate for lower resolution (like billboards).
So using that as a benchmark the largest image I could make from my camera would be 30" x 20" and expect to have reasonable quality. Larger than that and you run the risk of seeing pixellation if you are not at a natural viewing distance from the image. If you have a D200 which is a 10MP camera you can expect to go even higher and achieve the same quality result
So, my camera which has no DPI can print to a 30"x20" print on a printer (that prints at 14400 DPI) and still look fine because the resolution of my image works out to be about 100 DPI. The printer is still printing at it's hardware resolution - it's just resizing the image to fit.
So DPI is only significant when printing but when sizing an image for the screen - it's irrelevant. You just use the actual pixel count to determine size. Unless you have a .5 megapixel camera, you will almost certainly be downrezzing your image to fit the screen (which rarely means a loss of quality).
As far as editing your image goes, you should almost always work with the full image from the camera unless you need to crop for reasons of distortion or composition.
Checking the DPI is sometimes necessary, but setting it never is.
Hope this helps and happy shooting.

[BGPhoto]

When discussing digital files presented on the web, the number in the "DPI" box in your photo editor is completely irrelevant. All that matters are the dimensions of the image (the number of pixels) and the JPG compression ratio.


On my monitor, this image appears to be 1.7" wide...not 8.5" wide, as you indicated.




On my monitor, this image appears to be 6.25" wide...not 8.5" wide, as you indicated.





Stu (or anybody else), to make this clear...try this.

• Copy the image above and open it in your photo editor.
• Set the DPI to 300, then set the height to 600 pixels.
• "Save As" a new file called "300.jpg".
• Change the DPI to 72, and set the height back to 600 pixels.
• "Save As" a new file called "72.jpg".
• Close all images in your editor.
• Open 300.jpg and 72.jpg in your editor.

You will find that the two images look identical, and the file size is identical. The only difference you would see, is if you hit "print." 300.jpg would come out 2" tall, and 300.jpg would come out 8 1/3" tall. But on your screen, they would look identical. That's because both images are 600 pixels tall.

To reiterate...DPI only has bearing on prints. The myth that web images should be saved at some specific resolution (e.g. 72 DPI) is false. DPI has no bearing on web images.