We hear this question often. Essentially, it has to do with the size of the image and how a monitor displays an image versus how a brochure is printed. When you look at a monitor, you are seeing an image made up of pixels. If you zoomed in very closely, you would see a tiny square of color. Add all of these squares of color together, zoom back out, and our eye interprets these squares as an image. Retina displays aside, the monitor can display so many pixels per inch (PPI) – typically 72 or 96. To our eyes taking in a monitor, this is enough pixels for our eyes to interpret an image. Retina displays will use a greater density of pixels per inch to display an image. Our eyes take it in as a more vibrant image. There are more pixels blended to make a richer image.
In printing, an image will be printed by thousands of tiny little dots, called rosettes. These tiny dots of color overlap and are laid out in such a way that our eye interprets them as a whole image. A typical offset printer will print at 300 dots per inch (DPI). If we use DPI and PPI interchangeably, which we can for the purposes of this short explanation, if you looked at an image on screen versus looking at the same image in a brochure, you’d be seeing one image made up of 72 PPI and one image made up of 300 PPI.
Easter Kitty is clearly visible on a mid-size monitor screen at 400 x 300 px.
So, why can’t you use that image from your web site? Well, to keep the file size down on your web site, so it loads more quickly, that image has been saved at the correct size at 72 PPI. So, to fit next to the text on your site, it may be 400 pixels wide x 300 pixels tall (A mid-range 15″ laptop monitor might have have a resolution of 1280 px x 800 px, so that 400 px image would take up almost a third of the screen) It will show up fine and large enough to view on your screen because your monitor is showing it at 72 PPI.
Easter kitty looks small at 300 dpi on an 8.5″ x 11″ (standard U.S. letter) piece of paper.
But what happens if you try and print that image? It would have to be much smaller because a printer will need 300 PPI to print it. That same image that took up almost a third of your horizontal screen space will only have enough pixels to print at 1.3″ wide x 1″ tall. Not quite the nice, large attention grabbing shot you were thinking, eh?
So, can’t I just change the resolution to what I want?
In a nutshell: No. Forget for a moment what you’ve seen about rendering programs on NCIS or re-interpreting an image of a license plate from space. The number of pixels in an image are the number of pixels in an image. If you take a digital photo, you can’t add pixels to the photo that weren’t there to begin with (unless you have a crack team of pixelators aka William Gibson style). What will happen if you try to make the image larger is either you’ll see the pixels because your program will make them larger, or your program will try and interpret what’s in between the existing pixels and you’ll end up with a very blurry image.
For those of you more technically oriented, here’s the disclaimer: Yes, we know that pixels-per-inch and dots-per-inch are not actually the same thing. But, in the interest of simplification, we are using them interchangeably. And yes, there are linescreen issues, compression, interpolation, etc. to consider. Those are all for another time.