It's the final step, but arguably the most important one of all. If you're using the Save for Web dialog in Photoshop, clicking the Save button opens a second dialog box titled Save Optimized As. Directly below the title is a field in which you enter the title of the picture. Below that is a pop-up menu with the following choices: HTML and Images, Images Only, HTML Only. If you're a wizard at hand-coding web pages, you may decide to choose either HTML Onlywhich gives you the script (in your preferred browser format) for inserting the file into a pageor Image Only, which saves just the picture in a folder called Images. Choosing HTML and Images obviously gives you both the hypertext and the image.
When you open the image you've saved, it opens in the browser rather than in Photoshop or ImageReady. If you then choose View Source from the browser's View menu (typically accessed with the shortcut key combination Shift- on the Mac or Ctrl+V in Windows), you see a batch of HTML text something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Bokkie</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body bgcolor="#FFFFFF"> <!-- ImageReady Slices (Bokkie.psd) --> <img src="/books/3/139/1/html/2/images/Bokkie.gif" width="710" height="600" alt="" /> <!-- End ImageReady Slices --> </body> </html>
To place this image into a previously coded web page, copy and paste the code where you want the picture to appear. If you are working in a program that generates pages, such as Adobe GoLive, place the picture on the page, and the program generates the code.
If you have other plans for your picture, such as posting it on a forum or sending it in email, don't bother with the HTML file. All you need is the picture.
A shortcut for saving your work is to let ImageReady make arbitrary decisions for optimizing the photo and choose File, Save Optimized. The dialog that appears looks like the one in Figure 11.16.
Figure 11.16. When you're in a hurry, let the computer do the work.