Unit 5: Introduction to Graphics
Lesson 5.4: Photoshop Image and Color Basics
Changing Image Size
One way to help optimize images for the Web is to reduce the overall size of the image. This may or may not be appropriate, based on the image and its intended use on the Web.
You met Kara in the Photoshop Basics lesson, so let's use her again to help us understand the relationship between image size and file size. The original photo of Kara was taken with a digital camera and (by default) saved as a JPEG image. Its original dimensions were 8.889 inches by 6.667 inches (640 x 480) and its file size was 73 kb. It would take approximately 22 seconds to download using a 28.8k modem and 11 seconds to download using a 56k modem. Most people aren't going to wait that long for an image to download unless they know in advance that they really want to see the image. One way to deal with this is to make the original image size smaller and thereby make the download time shorter.
To change the size of an image in Photoshop, start with these menu selections:
The Image Size dialog box will pop up (see Figure 5.4-1):
- Pixel Dimensions & Document Size -- The image size can be changed by adjusting either the pixel dimensions or the document size dimensions in inches (or other unit of measurement). Adjusting one will automatically adjust the other.
- Constrain Proportions -- Notice the bracket and the link symbol to the right of the dimension fields. This indicates that the Constrain Proportions checkbox below the fields has been checked. Unchecking the Constrain Proportions checkbox could end up distorting the image, based on the numbers used in the dimensions fields. Ultimately, this can wreak havoc with your image if you aren't careful.
- Resolution -- As mentioned previously, Web graphics should be set to a resolution of 72 pixels per inch.
- Resample Image -- When an image is resized, Photoshop uses one of three possible interpolation methods to deal with missing pixels. For now, use the default option, i.e., Bicubic. It is typically a good choice for Web graphics.
Figure 5.4-1: Photoshop Image Size Dialog Box
Resizing the original image of Kara to 4 inches by 3 inches (288 x 216 pixels) brought the overall file size down from 73k to 28.8k. That still seemed a bit excessive, given the purpose of the image on this page, so we resized it even more. The image of Kara above is 2 inches x 1.5 inches (144 x 108 pixels) and the file size is 1.87k. That's quite an improvement!
Demonstration or Practice Activity
- Open the flag.jpg file in Photoshop. (See the Image Thumbnails page.)
- Select Image > Image Size.
- Verify that the Constrain Proportions checkbox has a check in it.
- Change the Width field to 400, then click the OK button. What happens to the image?
- Select Image > Image Size again.
- Uncheck the Constrain Proportions checkbox.
- Change the Width field to 800, then click the OK button. What happens to the image?
- Select Edit > Undo Image Size to undo the last change.
- Select Image > Image Size once again.
- Check the Constrain Proportions checkbox.
- Resize the image to a desirable size.
- Save the image with the name "flag_resize.jpg."
Copyright © 2002-2005 Adobe Systems Incorporated. All rights reserved.
