First, why should you care about understanding DPI & Resolution? In short, if you are going to print something (particularly of quality) and are every tasked with optimizing images for the web it’s important to know just a few basics about how images work on the web. More importantly, if you are ever going to hire someone to develop collateral (a brochure, flyer, …) for you, they’ll likely have requirements you won’t necessarily understand and not everyone is good at explaining them. So what follows is a very simple explanation of what you need to know to make the whole process a little easier.
First of all, it begins with a good picture, no matter what the source. I use iStockPhoto.com for stock and take a lot of my own pics. If you are looking for resources to help you improve your own pictures even just basic ones shot with a point and shoot camera take a look at Photo Nuts & Bolts.
A few definitions to start with:
DPI: Dot’s per inch. The number of dots or pixels in a single inch. The more dot’s the higher the quality of the picture (more resolution, more sharpness and detail,… )
Resolution: The easiest way I can explain resolution is to say that more resolution means an image displays more detail (or is capable of displaying more detail). Higher DPI means higher resolution.
Print: 300dpi is standard, sometimes 150 is acceptable but never lower, may go higher for some situations.
Web: 72dpi, always.
Ok, so how do you apply this new found insight?
If you are sending someone images to use for print (again, that brochure you are having made) and they tell you the images are “too small” odds are the resolution wasn’t high enough. The image might look great and huge on your computer but is actually really small when printed out. To add to the confusion, your monitor resolution will also determine how big the picture appears to you when viewing it on your computer. The same sized monitor set to 800×600 while show an 800 wide by 600 tall image as a full screen image. On a monitor that is 1600×1200 the image will only take up 1/4 the screen.You might have thought it would take up half but it’s actually going to be 1/2 as wide and 1/2 as tall (so 1/2 times 1/2 = 1/4). Long story short, the image will look much smaller on that screen but the image itself is still the same size. Since print displays at 300dpi the image looks still that much smaller.
Here are a couple of quick examples to show you the difference, no matter what your monitor resolution, it’s all relative!
The first example below has a lot of detail and is at 300dpi (even though the web is 72dpi this works for example purposes)
The second example is at 72dpi but scaled up to the same size so you can see the difference in detail. The actual image would be about 1/4 the size when you go from 300dpi to 72dpi, but at 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 on the differences between DPI, resolution and why if you have someone do something for you in print there will be different requirements than for the web. It’s also why that digital camera with higher megapixels takes better pictures than one with lower, it gives you more resolution to capture more detail.
Another important note about monitors, even though 72dpi is standard for the web monitors have slightly different resolutions depending how you have the monitor set and how big the monitor is. For example, a 19″ monitor set to 1024×768 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). By comparison a 19″ monitor set to 1280×1024 will have a resolution of 87ppx which means you fit more on the screen and get more detail.
Side bar: image files with higher resolution (dpi) will also have a bigger file size because they contain more data. Start with the biggest images you can but when putting images on the web they should be set to 72dpi, it’ll save you a ton of bandwidth and they’ll load faster. Yes they’ll be smaller than the original but should in most cases be plenty big because of monitor resolution (ppi) sizes.
Ok, one last thing, don’t confuse “image size” with “file size.” Image size refers to the dimensions of the image (pixels, dots, width, height, …), file size is how many kilobytes or megabytes the image is.
Any more questions on DPI, PPI, Resolution? Ask in the comments and we’ll try to clarify.
