I often hear people asking questions about 'screen resolution' in relation to images and design work; Just as many times I hear the universal answer, '72 DPI'.
The actual answer is that you shouldn't usually use a resolution quoted in DPI for artwork which is intended for use on screen.
DPI stands for 'Dots Per Inch' - a term which has its roots in the print world to define the number of dots of ink a given printer is capable of squeezing into the space of an inch. This works very well for the print industry. Take, for example, a digital photograph which is 1,200 pixels wide and 900 tall. If you print this image at 300 DPI, it will be 4 inches wide and 3 inches tall. Print it at 600 DPI and it will shrink to 2 inches wide and 1.5 inches tall.
So - how does DPI fit in the world of computer screens?
Once setup, computers have a fixed number of pixels ('dots') in each direction which get displayed on-screen. Typical screen dimensions include 800x600, 1,024x768 and 1,280x1,024. At a basic level, the computer only knows how many pixels it has to play with. It has no idea what size screen you have plugged into it.
Similar to the world of printing, the physical size of the image on a computer screen depends on the number of dots your screen can squeeze into the space of an inch. The screen on an iPhone 4 can display a stunning 326 PPI (pixels per inch). I have a projector which is capable of displaying a 300 inch image at a somewhat less impressive sounding 7 PPI!
Taking our sample 1,200x900 image, this will appear to be 3.7 inches wide on the iPhone and 171.5 inches wide on the projector.
The good news for fans of the mythical 72 DPI is that it can indeed be achieved. If you can find someone who still has a 14 inch monitor running at 800x600, you will be able to see your image at 72 DPI!
So what is the answer?
The answer is that most design work created for use on a computer screen is based on the total number of pixels available on the entire screen, not the size of the screen it will be viewed on. As such, the resolution of the image (in terms of DPI) is simply irrelevant.
When designing websites it is common practice to design a layout which looks good on a screen which has enough room to display, for example, 950 pixels in width. This is based on the fact that many users run screen sizes a little larger than this. Little thought is given to the physical size (in inches) of the resulting image.
So why do image files have a 'DPI'?
When you create an image file, you can specify both the dimensions of the image (in pixels) and a resolution value (in DPI). You could, for example, create a 1,200x900 image with a resolution of 300 DPI.
How big will this image be if you view it on-screen without resizing it? Well - who knows? If the person viewing the image has a monitor capable of displaying 1,280 pixels in width, the image will take up most of their screen, regardless of the physical size of the image.
Does the quality of the image improve if the resolution were increased to 600 DPI? Well - not really, no. There are still only 1,200x900 dots. You haven't created a more detailed image or obtained any more information to provide extra image clarity.
The DPI setting in an image file is mostly used as an instruction to desktop publishing software to help reproduce images at the intended size. Print designers have the luxury of knowing that, for example, they are working on a poster which will be 30 inches wide and will be printed at 150 DPI. When placing an image file into this artwork, the software will compare the resolution of the source image, and the final artwork, and adjust the resulting physical size of the image accordingly.
When designing for the screen, you have no knowledge of the physical size of screen the user will be viewing it on. Most of the time all you will have to go on is the number of pixels you have to play with. So - forget about the physical size of your images, and their DPI - just think about the number of pixels.