• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Creating Web Images > Making Images Smaller

Making Images Smaller

Perhaps one of the most important improvements you can make to your page is to reduce the physical size of the images. This makes the images load more quickly and also helps visitors focus on what's really important.

Figure 4.7. Choose the crop tool in the upper-left box of the tool palette. It may be necessary to click and hold a selection tool and then choose the crop tool from the pop-up menu.


To make images smaller by cropping:

1.
Select the crop tool (Figure 4.7). (You may have to click the Selection tool to find it—or just press the letter C.)

2.
Use the crop tool to outline the important area of your image (Figure 4.8).

Figure 4.8. Use the crop tool to select the area of the image that you want to keep. Then double click in the center of the selection.


3.
If desired, adjust the area to be cropped by dragging the boxes around the selection border.

4.
Double click in the center of the selection. The area around the selection disappears and all that's left is a lean, focused image (Figure 4.9).

Figure 4.9. This image is less than one third the size of the larger image and thus will load more than three times faster. In addition, it focuses the visitor's attention on what's important.


Tip

Cropping does not change the proportions of the image. It simply gets rid of the parts of the image that you (or your visitors) don't need.


To make images smaller by changing the image size:

1.
Choose Image > Image Size.

2.
In the Image Size dialog box that appears, make sure the Constrain Proportions and Resample Image options are both checked (Figure 4.10).

Figure 4.10. Make sure both Constrain Proportions and Resample Image are checked. Notice the original file size was 338K (uncompressed)!


3.
Make sure the resolution is set to 72 (Figure 4.11).

Figure 4.11. Change the resolution to 72 and the width to 400 or less. The new file size is 43K (uncompressed), which is much better.


4.
Enter the desired final dimensions for the image.

5.
Click OK. The image is resized.

Tip

Adjusting the resolution automatically adjusts the width. If you want to create an image of a given width, adjust the resolution first and then type in the desired width.

Use these techniques to create icons or miniatures that point to oversized or external images (see page 86). Just remember to save the icon with a different name so as not to replace the full-size image (Figure 4.12).

Figure 4.12. The original oversized image is shown at the top of this window. The new reduced image is shown below.



  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint