Shrinking Digital Photos to Screen Size
By "For Dummies" February 21, 2008
![]() | |
| Excerpted from Shooting & Sharing Digital Photos For Dummies* | |
Have your friends ever e-mailed you photos that exceed the boundaries of your computer monitor, such as the photo in Figure 1? Or worse, have your friends complained about the size of photos that you've sent? Either way, the problem is caused by an overabundance of pixels.
In addition to producing pictures that don't fit on-screen, having too many pixels creates another problem for Internet photo-sharing. Every pixel adds to the picture file size, which increases the time that it takes for your photos to make their way through the Internet pipeline. Large files not only eat up your time when you send them out into cyberspace, but also try the patience of anyone who receives your pictures or visits your Web site.
Your camera's resolution setting determines how many pixels a photo contains. Even if you shoot a picture using your camera's lowest resolution setting, you probably will need to dump some pixels from your photo to shrink it to an appropriate size. The next two sections explain how to determine the right number of pixels for your Internet photos and how to trim the pixel count to that number.

Figure 1: Photos with too many pixels are too big to fit on the screen.
How many pixels are enough?
To figure out how many pixels your e-mail or Web picture needs, you first need to understand how a computer monitor displays what you see on-screen.
Like your digital camera, a monitor displays text and images using pixels. And just as you can select from different resolution settings on your camera, you can choose from a variety of monitor resolution settings, each of which results in a specific number of screen pixels. For example, on your monitor, you may be able to choose from screen resolution settings of 640 x 480 pixels, 800 x 600 pixels, 1024 x 768 pixels, 1280 x 960 pixels, and so on.
When you display a digital photo, the monitor uses one screen pixel to reproduce one photo pixel. This one-to-one relationship between screen and picture pixels means that if the pixel dimensions of your picture – pixels wide by pixels tall – match the screen resolution, your photo fills the screen.
As an example, take a look at Figure 2. A 640-x-480-pixel image was created to use as the Windows wallpaper (desktop background). Then the screen resolution of the monitor was set to 640 x 480. At that screen resolution, the picture consumes the entire screen (with the exception of the Windows taskbar).

Figure 2: A 640-x-480-pixel photo consumes the screen when the monitor resolution is also 640 x 480.
Now compare Figure 2 with Figure 3. For this second figure, the monitor's screen resolution was changed to 1280 x 960. At this screen resolution, the 640 x 480 photo consumes only 25 percent of the screen.
The upshot is that to set the screen display size, you simply decide how much screen-pixel territory you want your photo to consume and then change the image pixel count to match. Keep in mind, though, that people who view your pictures have control over the screen resolution setting on their monitors, and so ultimately have control over the display size of your images. Most people use a monitor resolution setting of 800 x 600, but some users will view your photos on screens using a lower or higher resolution.

Figure 3: At a monitor resolution of 1280 x 960, the 640-x-480-pixel photo covers one-fourth of the screen.
Given that you can't predict the monitor resolution that will be in use when your pictures are viewed, here's some advice:
- Size your pictures with the lowest common denominator in mind. Keep the image small enough that someone viewing the photo at a screen resolution of 640 x 480 can see the whole picture without scrolling the display.
- Remember, too, that the Web browser and e-mail window themselves eat up some of the available screen space.
- For pictures that you plan to attach to an e-mail message, limit the picture height to 300 pixels and the picture width to 400 pixels. This allows enough room for the picture to display in the message window even on a monitor set to a resolution of 640 x 480, as shown in Figure 4.
- For Web pages, the same pixel dimensions work fine as long as your page has only one image. If you have multiple photos on a page, you should keep your pictures even smaller. Each photo you put on the page adds to the page download time, and you don't want visitors to your site to have to wait several minutes to display the page.
![]() | These guidelines assume that you're preparing your picture for on-screen viewing only. If you want people to be able to print a good copy of a picture, you need to provide them with a much higher pixel count. Unfortunately, you then have to accept the fact that the picture will take longer to download and may exceed the viewable area of the screen. |

Figure 4: Limit e-mail photos to 300 pixels tall by 400 pixels wide to ensure that they fit on the screen.
Trimming the pixel count
Your photo-editing software should offer a command that enables you to check the pixel count of your photo and eliminate any excess pixels. The following steps show you how to get the job done in Photoshop Elements, but the basic concepts apply no matter what software you're using:
- With your picture open, choose Image --> Resize --> Image Size.
- Select the Resample Image check box, as shown in the figure.
- Select Bicubic from the drop-down list next to the Resample Image check box.
- Select the Constrain Proportions check box.
- Enter the desired horizontal pixel count in the Width box at the top of the dialog box.
- Click OK to close the dialog box.
- Choose View --> Actual Pixels to see the image displayed at its new size.
- Save your resized picture file.
The Image Size dialog box, shown in Figure 5, appears.
When the box is selected, the Width and Height options in the Pixel Dimensions area at the top of the dialog box become available.
Or enter the vertical pixel count in the Height box, again using the box in the Pixel Dimensions area at the top of the dialog box. When you change one value, the program automatically adjusts the other value to keep the original image proportions intact.
Remember that the picture will display at a different size when viewed on a monitor that doesn't use the same screen resolution that you're currently using.
If you don't like the new size, choose Edit --> Undo and try again.
If you want to make additional changes to the picture, choose File --> Save As and save the photo in a non-destructive file format, such as PSD or TIFF.
If you're ready to take the final step to get your photo in Internet shape, keep reading to find out how to save your picture in the JPEG file format.

Figure 5: Adjust the pixel count in the Image Size dialog box.
Copyright © 2008 & Trademark by Wiley Publishing, Inc. All rights reserved. Please read our Privacy Policy.


