Posted on February 8, 2010 - by Lisa Nalewak

Resolution

This is the 5th in a series of articles on Graphic Design specifically written for Business Professionals.

The topic of “Resolution” is probably the most common area of misunderstanding among people when dealing with graphics, even more so than color formats. Resolution of an image refers to the density of color information found within a certain area of the graphic. The higher the density of color information, the sharper and more clear the image. The lower the density of color information, the lower the sharpness and detail of the image.

Measurement Terms

There are two ways to communicate resolution. One is using a DPI value, or dots per inch value. (A dot is equal to a pixel on your screen, which displays at 72dpi). The more dots per inch in an image, the higher the image’s resolution. If you can envision this it makes sense: squishing 600 separate color dots in an inch of space gives you more precise control on the color in that area than if you had only 100 dots. DPI is the standard that most people use because it quickly communicates the image’s overall quality and its intended use.

Another is by using the width and height of an image in pixels or it’s Pixel Dimensions, and it’s actual size in inches. “Actual Size” refers to the intended physical dimensions of the image when it’s displayed, either electronically, or in print.

For example, a 900 pixel x 900 pixel image that is 3 inches x 3 inches in actual size is going to be a higher quality image than a 300 pixel x 300 pixel image at 3 inches x 3 inches in actual size. If you have acute math skills, you can probably already see that you can use this information to determine an image’s DPI, and that they are in fact two ways to measure the same value. For those that don’t see, we’ll touch upon how to do that in a few paragraphs.

Another measurement of a graphic is its “File Size”. This will be reported in kilobits, or megabits, and sometimes even gigabits. This is the actual amount of memory the image’s file takes up on a computer. File Size is different from DPI, Pixel Dimensions and Actual Size values, so don’t get confused. The only relation File Size has to resolution is that higher resolution images take up more memory space, because there is more color data to remember. File Size is not needed to determine DPI or to alter image resolutions.

Resolution of an Image

Resolution is important because different types of graphic applications require different resolution values for graphics. This ensures they are viewed correctly and look their best in their different applications.

Web based (or electronic) graphics need to be 72dpi at actual size. This is for two reasons, 1) so that the image’s file size is as small as possible for good load times and 2) because your average monitor’s resolution is 72dpi and it will generally display graphics at 72 dots per inch, and no more.

A printing press needs much more color information to make type and other small details clear and crisp when viewed at arm’s length. So, graphics for printed material need to be a minimum of 300dpi at actual size. Graphics printed at a lower resolution than 300dpi will look “fuzzy” or pixilated.

The formula for determining DPI is:

DPI = height in pixels / height in inches OR width in pixels / width in inches.

You can use either dimension, because graphics are proportional, and the width’s DPI will always be the same as the height’s DPI.

Determining DPI of an existing graphic

Let’s say we have a graphic on our system for which we’d like to determine the DPI value. We open up our graphic in a software program like Photoshop, and check the Image Size. This will give us the dimensions of the image in pixels, for both width and height. In our example, the image is 900 pixels wide x 900 pixels high.

Next, we use the rulers in our software to determine the actual size of the image. Since we are interested in a dots per inch value, and not a dots per centimeter or millimeter value, I set inches as my ruler unit. I open up my ruler and I see that my image is 3 inches wide by 3 inches tall.

Next, to determine the DPI of this image, I solve the following equation:

DPI = 900/3, or 300 pixels/inch. Simple enough!

Our image is 300 dpi at the actual size of 3” x 3”. This means that if we were to print this image, it would print out at 3” wide x 3” wide at 300 dots per inch.

Don’t Mix and Match!

Now, if we were to display this image on a monitor, what do you think would happen? Since monitors are set to display images at 72dpi, and not 300dpi, the monitor would display our image at 72 dpi, meaning that the physical size of the image would need to increase to get all 900 pixels of information along each side to display. So it would end up being a much larger physical size than 3” x 3”. In fact, it would display that image at 300/72nds the physical size of our print image, or at 4.17 times the size of the original image, or at approximately 12.5” x 12.5” inches on our monitor. This is why images that are set up for print look so much bigger on a monitor than they do when they are printed.

The reverse is true as well. If we have an image that is 3” x 3” in actual size, but it’s been created to display on a monitor, and its resolution is 72dpi, what do you think will happen when it’s printed out on paper at 300dpi? Yup, it will print at 72/300ths of the size it appears on a monitor, or just under 25% of it’s actual size, which is .75” x .75”. This is actually smaller than most postage stamps! A little hard to see, no doubt.

This is why it is terribly important that a graphic is created using the correct DPI measurement for whatever use it’s intended.

File Size and Resolution

As mentioned above, the File Size of a graphic is affected by its resolution. The higher the DPI, and the larger the actual size of the graphic, the more color information the file needs to incorporate, so the bigger the actual file size.

Another factor is the amount of color, and the amount of color difference in a graphic. White does not take up much memory, because it is basically void of color to a graphic program. Black is actually a mix of many colors, particularly in process printing, so it takes up a lot more memory than white. If you have a broad range of different colors and lots of color detail, and colors change in almost every pixel of your graphic, the file will be much larger than if there are big areas of the same color and less color diversity.

Once you become familiar with resolution and graphics, you can sometimes get a feel for a file’s DPI and Actual Size by just viewing the graphic to see what it looks like, and then by checking its file size, but this comes with practice and is NOT meant to be a way to determine true DPI or Actual Size. It’s merely a way to just eyeball an estimate before you begin your actual measuring.