NTech Collaborative - Understanding Images

NTech Online Articles Discussion Groups Downloads Links Resources Spotlight User Groups Vendor Partners NTech Learning Labs Learning Lab Attendee Survey Technology Request Technology Survey EFSP Online Ask A Question

Understanding Images: A Guide to Resolution and Size
What you need to know about DPI, PPI, resolution, and megabytes

By: Brian Satterfield

December 19, 2006

Unless you're a graphic designer by trade, you probably have some questions about the deceptively simple concepts of image resolution and size. Is more resolution always better? How do megapixels relate to megabytes? And can you reuse printed graphics on your nonprofit's Web site?

Although image resolution and size can be a very complex subject, most nonprofit organizations will probably find it sufficient to simply grasp the basic terms and concepts. To help you find your footing, we've answered a few of the most common questions regarding image quality and size.

What Is Image Resolution?
The term "resolution" refers to the amount of information a digital or printed image file contains, typically measured in pixels. Generally speaking, the higher an image's resolution, the more detailed and crisp it will appear on a printed page or a Web site — though some extremely high-resolution images may contain more pixels than the human eye can see.

What Are Pixels and Megapixels?
A pixel is a tiny block of color and is a digital image's most basic building block. A digital image — be it a photograph or another type of graphic — is composed of thousands or millions of individual pixels. The more pixels an image contains, the greater its detail. One million pixels equal one megapixel; therefore, a 3.1-megapixel digital camera can take photographs that contain more than 3 million pixels.

Most graphics-editing applications list an image's resolution using pixel dimensions, with the horizontal measurement coming first. For instance, an image with dimensions listed at "2592x1944" would contain 2,592 horizontal pixels and 1,944 vertical pixels. Multiplying these two numbers gives you 5,038,848 pixels, or approximately 5 megapixels of resolution.

How Does Resolution Pertain to File Size?
Generally speaking, the more megapixels a digital image contains, the more kilobytes (KB) or megabytes (MB) it will consume on a hard drive or a Web site. However, the file format you choose to save the image as will also affect its size.

For example, a 3.1-megapixel digital photo saved in the JPEG format with slight image compression would consume around 600 KB of hard drive space. By contrast, that exact same image saved as an uncompressed TIFF file would consume about 9 MB of hard drive space. For more information on image compression and file formats, read TechSoup's article Understanding Images: A Guide to File Formats.

How Does Resolution Pertain to an Image's Dimensions?
A larger image not only takes up more hard-drive space, but it will also show up larger on your monitor and when you print it out. For example, a 5-megapixel image contains more horizontal and vertical pixels than a 3-megapixel image, so it will take up more space on your monitor when viewed at its full size. However, an image of this size taken directly from a digital camera will more than likely be too large for the average printer or and too big for a Web site. That means you'll have to downsample the image (make the image smaller) on a computer.

When you downsample an image using an image-editing application, it actually removes pixels from your image to make it smaller. This process will degrade the image somewhat, but it's always better to remove data than to resample (add data) to make an image larger.

What's the Difference Between Pixels Per Inch and Dots Per Inch?
Though often used interchangeably, pixels per inch (PPI) and dots per inch (DPI) are technically not the same thing. PPI refers to the number of pixels found in one inch of a digital image or a computer monitor. While PPI does not affect the actual quality of the image itself, it can affect how an image appears on the Web or in print.

DPI, on the other hand, refers to the amount of resolution a printer is capable of outputting. Printers use dots of ink to render an image; the more dots a printer can produce per square inch, the better quality its output. Though many image-editing programs — including older versions of Photoshop — contain settings for changing an image's DPI, most of these applications are really only altering the PPI settings.

What Should I Consider If I'm Putting an Image on My Web Site?
While large, high-resolution images can certainly lend visual appeal to your organization's Web site, they will also greatly increase the time it takes to load a page — and can be a problem if many of your constituents still surf the Internet using a dial-up connection.

To help keep page-load times quick, many Web designers suggest keeping the entire page under 40 KB — including all images and text. This means that not only should you use images sparingly, but that you should try to keep each image as small as possible (preferably under 10 KB). Again, the file format you use to save the graphic can help you keep your images' size under control, but you might also considering cropping the image (i.e. cutting out unnecessary parts) to minimize size.

If you seek a way to display a higher-resolution image while still keeping page-load times down, consider linking a small, thumbnail-sized image to a larger version of the image. This helps keep page-load times quick but also gives those on faster connections the option to view a more detailed version of the image.

Also, many of your site's visitors might be using older, smaller monitors, which have a maximum display resolution of 640 horizontal pixels by 480 vertical pixels. Therefore, it's wise to make sure that if are you placing larger images on your nonprofit's Web site, they are significantly smaller than 640x480 pixels.

Finally, Windows allows a monitor to display a maximum screen resolution of 72 PPI, so there's no point in saving an image at more than 72 PPI; doing so will only cause the image to load slower without giving the visitor any increase in quality. And because Web graphics generally have low PPI counts, they will probably blurry or fuzzy if you attempt to print them.

What Should I Consider if I'm Printing an Image?
When printing images, the file's size is much less important than when you're designing for the Web. What is important, though, is knowing how large you can print an image while still retaining an acceptable level of quality and detail.

The total amount of pixels that an image contains dictates the maximum size in inches it can be printed without a noticeable loss in quality. Print professionals recommend that, in order to achieve a high-quality print, an image should be saved at a minimum of 300 PPI.

For instance, you'd like to print a 3.1-megapixel image that measures 2,048 horizontal pixels by 1,536 vertical pixels at 300 PPI. An easy formula to help you find out the maximum size image you can print (in inches) at 300 PPI is to simply divide each of the pixel dimensions by 300. In this case, the 3.1-megapixel image can be printed at a maximum size of 6.8 inches horizontally and 5.1 inches vertically while still retaining photorealistic quality. Some image-editing applications will do the math for you; once you set the DPI, the program will automatically give you the maximum dimensions at which it can be printed.

If you find that printing at 300 PPI is straining your computer's resources, try dropping the number to 200 PPI and comparing the results; you might find that the decrease in quality is negligible enough so that you can safely use a smaller PPI setting.

Again, note that some image-editing programs, print shops, and Web articles use the terms PPI and DPI interchangeably, so keep this in mind when conducting additional research or speaking to a professional printer.

Whether you're adding images to your organization's Web site or preparing them for print, having a basic understanding of resolution and size decreases the chance that you'll make a time-consuming mistake. Because while not all nonprofits can afford to hire a professional graphic designer, learning the ropes won't cost you anything.