Understanding DPI, Resolution and Print Vs Web Images

First, why should you worry about understanding DPI & Resolution? In a nutshell, if you are planning to print something (particularly of quality) and therefore are every tasked with optimizing images for that web it's important to know just a couple basics about how exactly images focus on the web. More to the point, if you're ever likely to hire someone to build up collateral (a brochure, flyer, ...) for you personally, they'll have in all probability requirements you won't necessarily understand and never everyone is good at explaining them. What exactly follows is a very simple explanation of the items you need to know to create the whole process easier.For a lot more details, you really should check out: Web-to-Print

Several definitions to start with:

DPI: Dots per inch. The number of dots or pixels in a single inch. The greater dot's the larger the excellence of the picture (more resolution, more sharpness and detail,... )

Resolution: The easiest way I can explain resolution is to state that more resolution means a picture displays more detail (or is capable of displaying more detail). Higher DPI means higher resolution.

Print: 300dpi is standard, sometimes 150 is suitable but never lower, may go higher for many situations.

Web: 72dpi, always.

Ok, so how do you apply this new found insight?

If you are sending someone images for print (again, that brochure you are having made) and they tell you the images are extremely small chances are the resolution wasn't sufficient. The image might look wonderful and big on your pc but is actually really small when printed out. To increase the confusion, your monitor resolution will also figure out how big the image appears to you when viewing it on your pc. Exactly the same sized monitor set to 800x600 while show an 800 wide by 600 tall image as a full screen image. On the monitor that's 1600x1200 the image will only occupy 1/4 the screen.You might have thought it might occupy half but it's going to become 1/2 as wide and 1/2 as tall (so 1/2 times 1/2 = 1/4). Long story short, the image will appear much smaller on that screen however the image is still the same size. Since print displays at 300dpi the look looks still that much smaller.

Listed here are a couple of quick examples to show you the main difference, no matter what your monitor resolution, it's all regulated relative!

The first example below has a lot of detail and it is at 300dpi (although the web is 72dpi this works for example purposes)

The 2nd example is at 72dpi but scaled as much as the same size to help you see the difference at length. The actual image could be about 1/4 the dimensions when you are from 300dpi to 72dpi, but in the same height and width is where you can actually see the difference.

300dpi example

72dpi example

Hopefully this has helped you get a little clearer around the differences between DPI, resolution and why if you have someone do something for you personally in publications you will see different requirements than for the web. It's also why that digital camera with higher megapixels takes better pictures than a single with lower, it gives you more resolution to capture more detail.

Another essential note about monitors, despite the fact that 72dpi is standard for the web monitors have slightly different resolutions depending how you possess the monitor set and how big the monitor is. For instance, a 19in monitor set to 1024x768 will show 70ppi (pixels per inch, monitors use pixels which are square not round but pixels and dots for the sake of this conversation are otherwise analogous). In comparison a 19in monitor set to 1280x1024 may have a resolution of 87ppx and that means you fit more about the screen and get more detail.

Side bar: image files with higher resolution (dpi) can also get a bigger quality because they contain more data. Begin with the biggest images you can but when putting images on the internet they should be set to 72dpi, it'll help you save a ton of bandwidth and they're going to load faster. Yes they will be small compared to the initial but should in most cases be plenty big due to monitor resolution (ppi) sizes.

Ok, one further thing, don't confuse image size with quality. Image size refers back to the dimensions of the image (pixels, dots, width, height, ...), quality is when many kilobytes or megabytes the image is. Anymore questions about DPI, PPI, Resolution? Ask in the comments and we'll attempt to clarify.