UPDATE! I'm moving this site to: www.emirplicanic.com.

BeWebmaster

Resolution Revelation - Understanding image resolution and dpi in Photoshop

Ad

New to digital imaging?   Wrestling with the idea of pixels, mega pixels, pixels-per-inch, and pixel dimensions can seem like enough to make you wish you'd stuck with your old oatmeal box camera.    Don't give up yet!  Read on to learn more.

Simply put, pixels are the building blocks of an image.  They are the  "elements" of your "picture."  Any given digital image has an inherent number of pixels that it consists of, like bricks in a house.  The number of pixels an image has is initially determined when the image is digitized (either captured with a digital camera or scanned).

Similar to how a scanner lets you select a variety of different resolution settings for scanning your images, when you capture images with your digital camera, you have several resolution settings available to choose from.   The temptation many people wrestle with, is to choose the lowest setting because it allows more images to be stored on a single memory card. 

"Look Gladys,  we don't need additional memory cards.  If we set the camera on 800x600, we can fit 1,249 pictures on our memory card--  Fantastic!"

The problem is, images require a certain amount of pixels to be present in order to look good.  The bigger the image you want to print on paper or publish on the web, the more pixels you will need to have.   You can always throw away pixels after the image is created, but trying to add them later isn't a good idea (it's called 'interpolation'). 

So instead of putting 1,249 low-res pictures on your memory card during your trip to Europe, purchase a bigger memory card or two and set your camera on the highest setting it has.  Don't sacrifice resolution for image quantity!

Image resolution can be described in two ways:  In terms of pixel dimensions or physical dimensions.  Web designers talk about pixel dimensions, while print professionals want to know physical dimensions.  Essentially, it's two different ways of looking at and talking about the same thing. 

An image's pixel dimensions refers to the number of pixels that comprise its height and width.  It says nothing of physical size, simply the number of pixels that it consists of.  Thus, a web designer might say something like, "I need a jpeg that measures 300 by 400 pixels."  Because inches simply don't exist in the web world, web designers don't care about inches.  They are only concerned with pixel dimensions.  An image that is 40 pixels wide will always take up 40 pixels of screen space on the web.  What you see is what you get.

In print, the physical dimensions of an image are a bit more involved.  Instead of just a flat number of pixels for the height and width, when talking about the physical size of a printed image, print professionals express it in terms of inches, followed by the number of pixels per inch.  Thus, someone at the newspaper might say something like, "I need the photo to be 3x4 inches @ 300dpi."

The tricky part of print is, two different images can be made to have the same physical measurements, for example, 4 x 6 inches.  BUT, depending on how many pixels they contain, their pixel dimensions can vary greatly. 

For example, the printed image below measures 216 pixels wide (or 3 inches @ 72 pixels-per-inch) and 288 pixels tall (or 4 inches @72 pixels-per-inch).  Note that on your screen, this is enough pixels to produce a nice image.

In the second image, the pixels have been altered so that the image still measures 3 inches wide, but now only has enough pixels to weigh in at 10 pixels-per-inch.  Thus, the total width in pixel dimensions is only 30.  Likewise, the height still measures 4 inches, but instead of 72 pixels-per-inch, it now only has 10, therefore the total height is only 40 pixels.    Note that 10 pixels-per-inch isn't enough to convince your well trained eyes.  You can easily see the pixels here for what they truly are, building blocks of your image.

Likewise, you can have two printed images with the same pixel dimensions, but different physical dimensions, depending on their respective pixel-per-inch settings, as the two following images illustrate. 

While these may sound like two different languages, there is a simple translation (warning:  it involves doing math!!).

If we know that a given image has a dimension of 1500 pixels for its height and 2100 pixels for its width, we know it would be a big image on our computer monitor because many screen resolutions are set to 1024x768 pixels.  Thus, an image of this pixel dimension would more than fill the screen.

However, in terms of a printed image, we have no idea how big the image is physically.  If we printed it out on paper, how big would it print out to be?  This is where pixels-per-inch makes all the difference in the world.

At 300 pixels per inch, a 1500x2100 pixel image would print out to be a 5x7" photo.  If we divide 1500 pixels by 300 pixels per inch, we get 5.  Likewise, 2100 pixels divided by 300 pixels per inch, is 7. 

What about if the image only needed to be 150 pixels per inch?  Then 1500 pixels divided by 150 pixels-per-inch would be 10 inches.  2100 pixels divided by 150 pixels-per-inch leaves us with 14.  So at 150 pixels-per-inch instead of 300, the image could be printed twice as big, at 10" x 14" instead of 5 x 7".

Don't worry about the math too much.  Just know that for both web and print, the bigger you want the image to be, the more pixels you need.  The number of pixels-per-inch is inversely related to the physical size of the image.

It may help to think of pixels like water in a cup.    For example, imagine that you have a glass of water.  The water volume represents a set amount of pixels (8oz) and the glass represents the physical dimensions of the image (approximately 3x8 inches).  In a glass that size, 8oz of water fills it nicely.

Now imagine you take the same glass with 8oz of water (or pixels), and pour it into a large cookie sheet (similar to, say, a 16" x 20" photo).  What happens to the water?  Like pixels, it spreads out to fill the size and shape of its container, in this case, the cookie sheet. 

Now, instead of a deep glass of water (high resolution photo), the water has a bigger container to fill, so after stretching to cover the new bigger area, the water is much more shallow, meaning less water/pixels per inch (low resolution photo).

In the end, it's all relative.  You increase the physical size of the image, and the number of pixels per inch goes down.  You make the physical size of the image smaller, and you've made the pixel pool deeper, thereby increasing the number of pixels per inch.

Got it?  Good!  Now jump in and get your feet wet!

Khara Lintel Plicanic is a professional photographer, photoshop educator, and graphic artist.  See her work at www.kabloomstudios.com
All images and content copyright Khara Lintel Plicanic, KaBloom Studios