Preparing images for output - Part Two - photographic image processing for viewing on computer screen

PSA Journal, August, 2003 by Stanley Ashbrook

Preparing images for viewing on screen When you prepare images for displaying on screen, you have different considerations. You want the best quality image with the smallest file size. To do this you save your file in a compressed format, JPEG or GIF. The GIF format is limited to Index color (a maximum of 256 colors) but supports transparency and animations. For photographs or continuous tone images, the best format is JPEG so you can show all of the colors and tones. You would also like to have your images viewable without the viewer having to scroll, so one consideration for resizing the images for the web would be a maximum vertical or horizontal dimension of 500 pixels, but this is at your discretion. If you want to size your images for viewing on screen or by projecting in a slide program, then the pixel dimensions could depend on the resolution of the monitor or projector, i.e. 800 X 600 or 1024 X 768.

For a maximum of 500 pixels, go to Image Size in the Image menu. Check Resample. Note that it is OK to resample down. Change the Pixel Dimensions so that the maximum dimension in either direction is 500 pixels. In our case, Figure 7, we have a vertical image so we change the height to 500 pixels. Note the file size is reduced from 20.6 MB to 586 KB. The reason for this is we have fewer pixels. Also note that if we wanted to print this file at 300 PPI, the print size would be 1.333" X 1.667".

[FIGURE 7 OMITTED]

If we unchecked Resample and changed the printing resolution to 72 PPI to get a larger print, we would be able to get a print size of 5.556" X 6.944". Even though this looks good on your monitor, this would yield a print of poor quality due to the low resolution. Notice in Figure 8 that the file size is still 586 KB when the resolution is changed to 72 PPI. The reason, of course, is that print resolution by itself has nothing to do with file size which is solely determined by the total pixel count (pixel width times, pixel height) and color depth per pixel.

Both the image in Figure 7, the 300 PPI image and the image in Figure 8, the 72 PPI image would appear as the same size on your monitor, 500 pixels by 400 pixels, because, as mentioned, each pixel on the monitor displays one image pixel. The Pixel Dimension is the same so they look the same in each case.

[FIGURE 8 OMITTED]

Suppose that you decide to reduce the file size by changing the resolution with the Resample box checked to something about 100 or less. When you do this, you will see that the Pixel Dimensions are reduced, and this results in a smaller file size. The reason for this is that now the Document size stays the same, but as we now have fewer pixels per inch of Document size, the file size is reduced. Document size is almost meaningless for displaying on a web page, which deals in Pixel Dimensions; i.e., 640 X 480, 800 X 600 or 1024 X 768. This is why it is best to resize your images by changing the Pixel Dimensions.

We've now resized the image so it may be viewed without scrolling, but the file size is too large for sending as an e-mail or displaying on a web page. To save the file in a compressed format, you have two options. In most applications this is done by selecting Save As in the file menu. Select JPEG as the File Format and click on OK. See Figure 9.

[FIGURE 9 OMITTED]

You are then presented a dialog box that has a slider in the middle used to adjust the quality of the final image. What you are doing is adjusting the amount of compression and hence the compressed file size. The lower the quality number you select, the higher the compression, and the smaller will be the file size. Select a relatively high number if you want the best quality image. Some applications, such as Photoshop[R], show you the compressed file size at the bottom of the dialog box. See Figure 10.

[FIGURE 10 OMITTED]

Notice that you have a file size of 57.4 KB with a quality setting of 7. At a quality setting of 3, the file size would be 29.5 KB.

It is important to point out, that when sizing images for display on-screen; we use only the image dimensions expressed in pixel width and pixel height because the screen size is expressed in pixel width and pixel height. Print resolution should be totally ignored (PPI or DPI or LPI) when calculating the file size of images destined for on-screen display because print resolution is not used in the calculation of file size, nor does it have any effect on file size, when the image dimensions are expressed in pixel width and pixel height.

What compression quality number do you pick? If you use this method of saving your images in the JPEG compressed format, you should save at various settings, open each saved image and select the one that has the smallest file size with acceptable quality.

In Photoshop, starting with version 5, there is a better way to "JPEG" your images. Instead of selecting Save As in the File menu, select Save for Web.

When you select Save for Web, you will get the Save for Web dialog box. See Figure 11. In this box you have the option to select either JPEG or GIF compression. JPEG is best for continuous tone images. Also you have the option of a 2-up or 4-up display. (In Photoshop Elements you only get a 2-up.) In the 4-up, you see the original in the left top pane and various quality settings in the other panes. You can vary the quality of each of the panes and as you do, you will see the file size and download time using various speed modems.