Image Resizing for Print and Web

Image resolution describes the detail an image holds. The term applies equally to digital images, film images, and other types of images. Higher resolution means more image detail.

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.

By: Brian Satterfield
December 19, 2006
Creative Commons Licence

Photo Jigsaw Puzzlesfrom jigsaw2order.com

Turn your favorite phototographs into high quality Photo Jigsaw Puzzles. This is a great way to enjoy your photos and makes a unique gift to give someone close to you. Ordering is easy! Select the puzzle size you want and upload your image file.
Click on a puzzle size below to order:

Kids Puzzle Sizes
30 piece Puzzle (Price $15.95)
48 piece puzzle (Price $15.95)
100 piece puzzle (Price $20.95)
165 piece puzzle (Price $19.95)
240 piece puzzle (Price $20.95)
Adult Puzzle Sizes
300 piece puzzle (Price $25.95)
500 piece puzzle (Price $35.95)
672 piece puzzle (Price $69.95)

Xtra Large Puzzle Sizes
1200 piece puzzle (Price $139.95)
1500 piece puzzle (Price $159.95)
Panoramic Puzzle Sizes
750 piece puzzle (Price $59.95)
1000 piece puzzle (Price $99.95)
Large Piece Puzzles
35 piece puzzle (Price $25.95)
70 piece puzzle (Price $69.95)
105 piece puzzle (Price $99.95)

We talked about this a little bit, but it is worth nothing that when you choose a higher resolution you also reduce the image size. Many users will conclude that by selecting a resolution of 600 or even 1200 dpi they will gain a larger and more pure image. It may indeed be a clear print, but the physical image dimensions will be smaller.

A common compromise is 300 dpi. The end result is almost as clear as a higher resolution and the end result is a larger image size.

By the way, if you start with a low-resolution photo you may be able to get a larger print, but it will not contain the clarity you will want in an end product. Whenever possible you should always work to select from the highest quality print available.

Image Resolution Table

Unlike days gone by when you simply had to decide which photo print paper you wanted, today's digital photography allows multiple photo files. Let's take a look at a few.

.jpg (Jpeg) - This file format is perhaps the most common and is easy to manipulate in a photo-editing program. You can shrink the size and crop the pictures to meet your demands. However, because it compresses the photo you can also lose information that may make the jpg file blurry or even pixilated the more manipulations the photo undergoes.

.tif (Tiff) - This is a lossless file format. What that means is that you can do virtually everything you could do to a jpg as far as editing the photo, but it does not lose information with every transformation. The file size is generally larger, which is why it is not often used in an online environment. It is, however, a better format for print clarity.

.gif (GIF) - This is a file format that can be used to develop simple animation, but is perhaps most closely aligned with the jpg file. The primary difference is the compression in jpg files makes the gif more popular with some online users. This file format can be used with our jigsaw puzzles.

.pdf (PDF) - This is a portable document file that can be used as an image. Some users will develop a photo with text using a program that can export the completed document as a pdf. Often the end result is not nearly as clear as the consumer hopes for.

.bmp (BMP) - Often called a bitmap this photo file may be most at home in a Windows based online environment. It can be manipulated in some programs and works well for online applications. It may be less useful for high quality print projects.

We've already defined the term megapixel, but we should also point out that digital photographers have the option of selecting a lower megapixel range in order to maximize space on their onboard hard drive or removable card. If you are taking pictures to use in the development of a jigsaw puzzle we recommend using a high megapixel setting.