Resolution for print and web is an incredibly complex (for me) series of disparate concepts. It took me a very long time to acquire the basic understanding I have, because it is so difficult to get definitive answers about resolution! I survived 4 years of undergraduate graphic design study without a clue on the topic. It simply wasn’t taught. The knowledge is completely esoteric- and to make matters worse, there exist many ubiquitous falsehoods that exist purely to lead people astray. So here’s my resolution primer.There are many types of resolution: scanning resolution, screen resolution, ppi, lpi, and dpi. (There are more, but my focus is print and web design.)
Resolution is the amount of detail captured in an image. Vector graphics and fonts are resolution-independent, so we’re really just talking about raster graphics here. We always want to capture the greatest amount of detail, but real-world constraints limit this in various ways. So we study resolution to understand how much we need, how little we can get away with, etc.
First we have screen resolution, which is measured in pixels. This refers to output devices like your computer monitor. Your monitor is set to a standard screen resolution, given as the number of horizontal pixels by the number of vertical pixels (ie. 800 x 600 pixels, 1280 x 1040 pixels, etc.) These values refer to the number of pixels displayed on your screen’s total area. To derive a “per inch” effective resolution, you’ll need to divide your screen resolution setting by your screen’s physical size in inches.

example: 1280 pixels / 15″ = 85 displayed pixels/inch

1024 pixels / 12″ = 85 displayed pixels/inch
(if both numbers didn’t match, your pixels aren’t square!)

Moral of story and Reality #1: “72 dpi” is a rule of thumb, if not a complete joke. Displays range from roughly 40 to 170 apparent pixels per inch, and you can build your raster images at any resolution without affecting file size- it’s the pixel dimensions that matter. Again: Resolution does not matter at all for web graphics. Only the pixel dimensions matter. So calculate the apparent resolution for your own display settings, and use that figure. Now, an inch on your photoshop ruler will equal an inch on a real-life ruler. For an excellent, thorough and highly accessible article on this topic, please visit http://www.scantips.com/no72dpi.html.

Next is Working Resolution. As we just discussed, working resolution does not matter for web graphics, just the printed variety. We measure working resolution in pixels per inch, or ppi. Reality #2: The image you’re working on in photoshop is NOT 300 dpi. It’s 300 ppi, and this is not insignificant because dpi (dots per inch) means something COMPLETELY DIFFERENT. Oh, and one more thing: ppi refers to pixels per linear inch, not square inch. A 1″ square image at 100 ppi contains 10,000 pixels (100 times 100). Now this is where it gets complicated. We need to get from ppi to dpi, with a stopover at lpi. Understanding this is almost a holy grail for graphic designers. Abandon all hope, ye who enter here. You’ve been warned.Various factors in the printing process determine the working resolution that we can use. Perhaps the greatest factor is the stock on which we’re printing. Uncoated stock and thin stock (ie. newsprint) require coarser line screens than coated stock and heavy stock. But let me back up.

Line screen, or LPI, is the density of halftone dots that are created from an image. In order to be printed, an image is broken up into (usually) 4 composite images: cyan, magenta, yellow and black.

These images combine to create the illusion of full-color, but not before another visual trick is employed: the halftone dot. Combining 4 inks in various ways will yield 16 color combinations. We’d like to represent more than that, so we employ the white of the page to create “halftones”. If you fill a square with black ink, it will appear 100% black. If you fill it with little dots that spread out to cover 50% of the square, the square will apear 50% gray. Capisce? So we take our image, separate it into 4 monochrome images, and then reduce each of those into halftone dots of varying sizes.

The pattern of dots follows a grid pattern, and that grid is the elusive line screen. A higher line screen generates more dots, and a coarser line screen (like we must use for newsprint) fewer dots. Line screens range from about 65 (cheapest paper imaginable) to 200 (fine art books). Cheap paper soaks up ink, so it needs those bigger dots, hence the coarser line screen (more on line screens in a minute…) Now we know how printers create the illusion of full-color by using just four inks, but how do they create halftone dots of varying sizes? By making them out of smaller dots, which don’t even have an agreed-upon name! This is the final frontier, folks. People call these things spots, printer dots, splops, whatever. They are the smallest unit of ink that a printer can print. THIS is dpi: The amount of these little dots that a printer can fit in a linear inch. (See how different this is from ppi?) We call this Output Resolution. Dpi range from 300 (or lower, but that’s just crappy) to about 4000. It takes lots of printer dots to simulate full color and reproduce smooth line art!
Relationships:
Working res. (ppi) should be the same as still another type of resultion, Scanning Resolution. Scanning resolution (spi) is measured as samples per inch. Samples end up as pixels, so there is a 1:1 relationship. By the same reasoning, digital photographs should be taken at high resolution, then downsampled. Spi and ppi should be 1.5 to 2 times lpi. This is a printing industry standard, and it effectively means that 1.5 to 2 pixels are averaged out into 1 halftone dot per channel. The relationship between dpi and the rest is more variable. The effect of changing the dpi factor is a change in the possible color variations per channel. This is the reason: Printer dots are a fixed size. They make up halftone dots. Bigger halftone dots mean more possible sizes of those halftone dots- smaller dots mean less possible sizes. The result: higher line screens mean less variation in color. Less variation in color means greater potential for banding. Here’s an excellent explanation of this phenomenon:

Really Good Halftone Tutorial

Here’s the formula for calculating the total shades of an image channel to be output:(dpi/lpi)²+1= Total possible shades per channel

There you have it, folks. I didn’t even touch on video resolution (ie. HDTV) or temporal resolution (frames per second). I just wanted to create a basic resolution overview for those interested in print and web design. Hopefully this can help someone understand this really complex topic.