Understanding Image Resolution - Digital Graphics - Photoshop - Lanoie.com -

Photoshop

Digital Graphics

Image Resolution

Resolution in an image determines how many pixels per square inch that image contains. This is expressed as PPI (pixels per inch). PPI is also referred to as pixel density.

For example, an image resolution of 72 ppi means that there are 72 pixels in a one-inch row and 72 pixels in each one-inch column of an image. Therefore, theoretically there are 5,184 pixels in one square inch (72x72=5,184). The necessary resolution will differ based on the desired output for the image. An image for a Web site can be between 72-96 ppi but the industry standard for the resolution of Web images is 72 ppi.

PPI and Monitors Explained

When referring to a computer monitor, this concept of PPI can be confusing to understand. PPI is actually a very relative term when talking about monitor resolution. 72 ppi is really more of an industry standard than an actual measurement.

Different Monitor Sizes

There are many different sizes of monitors available. Most CRT monitors come in sizes such as 15", 17", 19", 21", and even 22". Modern LCD monitors come in all kinds of shapes and sizes, with "wide screen" monitors becoming very popular. (Monitor dimensions like those just listed are always measured diagonally, not across the width of the monitor.) Some of these monitors come in sizes of 20", 24", 27" and even 30" or higher.

What Does This Mean in Terms of PPI?

Imagine that you have 2 monitors on your desk. One monitor is a 21 inch display, while the other is a 19 inch display. Both have their resolutions set to 1024 x 768. Since one monitor is obviously larger than the other, the actual PPI would be different between the 2. They are displaying the same number of pixels, but the 21" is displaying them over a larger area. Therefore, since there are more inches, there would be fewer per inch. For example: The 21 inch monitor is actually displaying around 61 ppi, while the 19 inch monitor is actually displaying about 71 ppi. The more pixels you have over a smaller area, the more PPI you have. If you are running a much higher resolution such as 1600 x 1200 (which is favoured by many designers) you could be running a PPI closer to 100, but again, depending on your monitor size. As you can see, the actual PPI for a computer monitor varies quite a bit, depending on the actual monitor size and the screen resolution.

Mac VS PC

If you go looking for information on this very subject, you may find a lot of things like "Macs display at 72 ppi, and PCs display at 96 ppi". This is only partially correct. As mentioned above, PPI for monitors is a very relative measurement. However, the operating system needs to have some kind of idea what PPI it is using. Therefore, it can be said that the Mac assumes it is at 72 ppi, and the PC assumes it is at 96 ppi. These settings really only affect the operating system's handling of things like fonts and its own graphic elements. (The reasons for the difference between operating systems are too great to go into here.)

This discrepancy between Mac and PC has no effect on Web graphics however. If you're using Photoshop with your monitor set at 1600 x 1200 pixels, and you create a graphic that is 400 pixels wide, it would take up exactly 1/4 of your screen width whether you were using a Mac or a PC. In other words, 400 pixels is 400 pixels, no matter where it's being shown.

Pixels are The Most Important Thing

If you are creating graphics meant to be shown on a computer monitor (such as Web graphics), you only need to concern yourself with pixels. As mentioned above, actual PPI is a hard thing to pin down. Luckily for most of us, there's the previously mentioned standard that programs like Photoshop use: 72 ppi. Keep all your graphics at 72 ppi unless you are going to print them.

Resolution and Pixels

As already mentioned, pixels are the most important thing. You could set the PPI of an image to anything you like (more on how to do this later), but if they both contain the same number of pixels, the file size and display size won't change. In fact, most Web browsers are incapable of displaying anything other than at 72 ppi. Therefore, only pixels are considered when displaying a graphic on a Web page. If your image is 400 pixels wide, it will still be shown as 400 pixels wide, no matter what the PPI of the image is set to.

Since pixels are so important, it must also be mentioned that too many can be a bad thing. For example, let's say you are working with a 300 ppi image at 3000 by 1800 pixels. Photoshop might report this image as 10 inches by 6 inches. If you printed it, it would fit nicely onto a page at that size (see Resolution and Print below). However, if you tried to place it into a Web page, the browser displaying such a page would not show the image at its intended size. It would essentially ignore the 300 ppi part. It would only look at the pixels, and assume 72 ppi was being used. Therefore, your image would expand to the full 3000 pixels wide, which would be much, much larger that your entire monitor's display. This is why sometimes when you email a picture from a digital camera, the recipient sees a huge picture. (Most email clients work a lot like Web browsers.)

If your original graphic came from something like a digital camera, it will most likely be much too large for the Web, and you will need to bring it down to the correct size: 72 ppi, and probably a smaller amount of pixels (more on how to do this later).

The Photoshop Save for Web and Devices feature (more on this later) works hand in hand with the Web browser. It will take any image you save and automatically change it to 72 ppi, without adding or removing any pixels. However, keep in mind that like the Web browser, it will spread all the pixels out until they are at 72 ppi.

File Size

Since the file size of an image is only dependant on the number of pixels it contains (as well as its compression, but more on this later), changing the PPI of an image without changing the number of pixels it contains will not change the file size.

Consider the two images below.

Resolutions Compared
200x200px - 300 ppi, 60 kb	200x200px - 72 ppi, 60 kb

Both have pixels dimensions of 200 x 200. One is at 300 ppi and the other at 72 ppi. There is no noticeable difference in quality and the file size of the images is identical.

Therefore, PPI is really not that important for graphics meant for a computer monitor. Keep the PPI at 72 and everything will work just fine.

Resolution and Print

It is in the domain of print that image resolution makes a critical difference. Different printers have different resolutions. Printer resolution is measured in dpi (dots per inch). Printed material is literally composed of dots of ink. The size and density of these dots determine the quality of the output. An image to be printed in a newspaper will be around 170 ppi. If you've ever held a magnifying glass over a newspaper, you could see the individual ink dots. Magazines are output at 266-300 dpi. High quality books are output at even higher resolutions. So image resolution is important when you're creating images for print but irrelevant as far as Web images are concerned. Photoshop's default image resolution for print is 300 dpi.

Since this course is about producing images for the Web, we won't delve into the considerations for print too much. However, there are a couple of things to keep in mind.

PPI versus DPI

Technically, dpi applies to printer resolution but you will see it used interchangeably with ppi in different software and resource materials. For consistency, we'll stick to ppi in this course to describe monitor and digital image resolution.

Print Size

While image resolution has no effect on the size of an image displayed in a browser, it has a direct effect on the size of printed images. We'll touch on this more later when we discuss the resizing of images.

Printing Web Graphics

Since standard print resolution is so much higher than standard Web resolution (72 ppi), most Web graphics will not print very well on even a home printer. Printing uses a much higher resolution than monitor (Web) graphics, so the pixels are quite noticeable when printed. This is why Web graphics tend to look "blocky" when printed. Therefore, it's easy to understand why Web graphics are not very suitable for high quality printing.

Image Resolution Summary

• Digital image resolution is measured in pixels per inch (ppi).
• PPI is also called pixel density.
• The industry standard resolution for Web images 72 ppi.
• PPI can vary from monitor to monitor, depending on the monitor resolution.
• When creating graphics for a monitor, only the pixel size is important.
• Even though Macs and PCs report different PPI's, this has no bearing on how your Web graphics will display.
• The resolution of an image has no effect on its file size.
• Printer resolution is measured in dots per inch (dpi) which reflects the number of dots of ink printed on a one-inch line.
• Print graphics can range from 170-300 ppi or higher.
• Image resolution affects the print size of an image.
• Web graphics don't print very well, because 72 dpi is far too low of a resolution for print.

We need to understand PPI and why 72 is considered the Industry standard for the web