If you are adding photos to your website, you might wonder what resolution your images should be. Some designers might use the term dpi, or dots per inch; some would say 300 dpi, and some might say 72 dpi. I say neither one is correct. Dots per inch, by definition, relies on an inch as a unit of measurement. So I pose the question: How large is one inch on your website? The answer is that it depends on your device.
Modern screen resolutions are measured in pixels as well as in inches. Your phone may have a 4"-wide physical screen, but your screen's resolution would be measured as 1136 x 640 pixels if you're on an iPhone 5. It would be more important to have an image that is 1136 pixels wide because that is enough to fill your screen. If you were to measure in dpi, a 4" screen at 300 dots per inch would require a 1200-pixel-wide image. A 4" screen at 72 dpi would still require a 1200-pixel-wide image. As you can see, dpi has relevance not on a computer screen, but rather on the pixel dimensions of the device.
If you were to print at 300 dpi, that 1200-pixel-wide image would physically measure 4" wide. If you were to print that same image at 72 dpi, it would physically measure 16 2/3" wide. However, there would be no greater clarity in the image from one size to the other because you're using the same information - you're only increasing the size of the pixels used.
So what bearing does dpi have on file size? The answer is none. If you have an image that is 300 x 300 pixels, you have exactly that much data. If you were to print it at 300 dpi, it would physically measure 1" x 1". If you were to print it at 72 dpi, it would measure at 4.16"; however, you still only have 300 x 300 pixels of data.
This also has a correlation to digital cameras. Modern digital cameras have an optical zoom, but beyond that will have a digital zoom. With an optical zoom, the lenses in the camera tighten and telescope in on the subject of your picture, restricted by the physical limitation of the lenses. A digital zoom then interpolates (see last month's design blog) additional information to further zoom in on the image. This explains why sometimes when you zoom in on a subject with your camera, the picture you get is somewhat inaccurate from what is seen with the naked human eye.
Author: Marc Steffensen
Position: Creative Director
Marc Steffensen is the Creative Director at Business Promotion and has been with the company since 2009. He has been a professional graphic designer since 2005 and a graphic artist since the mid '90s. Marc's interests are eclectic within all things "nerd" culture, from music and movies to games and collectables. He is an amateur barbeque chef and likes to "fire up" his smoker, even in the middle of winter.