Saving an Image for the Web

In this lesson you will learn how to use Photoshop to resize and save an image properly for use in Dreamweaver.

1. Open any image in Photoshop (the one I'm using is just an example)
   
   
   
   Note: At present, this file is completely unsuited for the Web (both in size and format)
   
   
   
2. Looking at the Layers Palette we see a number of layers but only one is visible
   (the eye icon indicates which layers are visible)
   
   
   
   
   
3. Navigate to File > Save for Web...
   
   
   
   Note: The shortcut (in the order listed on the menu) is: Option-Shift-Command-S
   You will hear me say Shift-Option-Command-S
   
   It's only important that you press Shift, Option, and Command before you press S
   
   Try this:
   1. With your left ring finger, hold down the Shift key
   2. With your left thumb, hold down Option and Command (place your thumb in the gap between the keys)
   3. With your left middle finger, press on S
      
      With a little practice you won't even have to look at the keyboard to access that shortcut
      
      
      
4. The Save for Web dialog box opens
   
   If not already specified, click on the pull-down menu and select JPEG High (as shown)
   
   
   
   
   
5. Examine the settings and compare them with the ones in your dialog box:
   
   
   
   Note: File sizes are listed below the images in their respective preview windows. Our file is still much too large.
   
   
   
6. With the Hand selected in the dialog box's toolbar (it is by default), you can click and drag within a preview window if you want to see another portion of the graphic to determine the quality of the optimized image (as shown in the following movie)
   
   
   CLICK ARROW TO PLAY MOVIE
   
   
   
7. Click on Image Size in the lower right portion of the dialog box (see arrow)
   
   
   
   The image is far too large to be viewed in a Web browser
   
   
   
8. With Constrain Proportions checked, change the Width to 400 and click Apply
   
   (Notice that the Height setting changes automatically)
   
   
   
   Note: If Quality: is set to Smooth (Bicubic) your image will be resized with the best possible results
   
   
   
9. Photoshop resizes and reoptimizes the image as per our settings
   
   
   
   Note: The file size—both pixels and kilobytes—is now much more suited for the Web. There is more that we could do to further optimize the image but we'll stop here for now.
   
   Click OK and...
   
   
   
10. Photoshop will not automatically know where you want your file
    
    On my computer, Photoshop selected the last folder to which I saved an optimized JPEG—this is not where this particular image should be saved, so...
    
    
    
    Can you guess where we should save it?
    
    
    
11. Navigate to your Local Root Folder (if necessary) and save the image inside your (surprise) images folder (as shown in the following movie)
    
    
    CLICK ARROW TO PLAY MOVIE
    
    
    
12. A peek inside the Site Window reveals that Dreamweaver paid attention to what we just did
    
    
    
    This image is now properly optimized and saved for the Web
    
    
    
13. Save your Photoshop file (Command-S) and close the window (Command-W)
    
    Note: The original image will not be resized and its layers will be intact

Congratulations! You now know how to optimize and save an image for use on the Web.

Dreamweaver | Photoshop | Digital Art | Web Design