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

Hour 8. Posting Your Work on the Web > Task: Optimize a Graphic

Task: Optimize a Graphic

In this task you will optimize a simple graphic for the Web.

Either open a graphic from your own collection, or to work on the same graphic as I am working on, you can download Healthcat.psd from the book’s Web page at www.samspublishing.com.

Make sure the picture is ready for “prime time.” Crop, adjust colors, retouch.... Do whatever is necessary to make it as good as you can. You’ll find step-by-step directions for making image improvements in upcoming chapters, so you don’t have to try them out now, but you won’t harm anything if you play around. If you’d rather just optimize the picture right now, choose File, Save for Web, or click the Save for Web button in the shortcuts bar. That opens the window shown in Figure 8.1.

The dual windows show both the original and optimized images in the Save For Web dialog box. Thus, you can compare the two images and decide which optimization settings work the best. If the whole picture isn’t visible in the view area, use the Hand tool to move the rest the image into view. You can also use the Zoom tool to magnify or reduce the view.

Decide which format to use. In a limited color environment like this one, GIF is the obvious choice. Use the Settings pop-ups to select GIF and 8 colors (because there are obviously no more than that used in the picture). See Figure 8.2.

Figure 8.2. The changes you make in the Settings box determine how your picture will be saved.

Now look at the information in the box at the bottom of the pictures. The notes for the original image show the file name and file size. The notes for the optimized image show the optimization options you chose, the size of the optimized file, and the estimated download time using the selected modem speed. (You can select a modem speed in the Preview pop-up menu.) In this case, we’ve reduced the file size from 355K to 3K, or by nearly 100%. It will load in considerably less than a second, no matter what the estimate says.

If you think you’ve found the right combination, check it out for yourself by clicking on the Preview In tab at the bottom of the screen. The pop-up menu will detect all the browsers installed on your computer. Choose one from the menu and open it by clicking on the browser logo. You’ll see your full-size picture, along with the HTML tags to place it on the page. Figure 8.3 shows an example.

Figure 8.3. If you’re concerned about color accuracy, check your picture on both Mac and Windows platforms, if possible.

You can simply copy these lines of HTML code and paste them into the text version of your HTML page, after you add the image to the appropriate folder and upload everything to the Web host, or you can use your favorite Web page editor and let it do all the work.



Not a subscriber?

Start A Free Trial

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