Photoshop Tutorials:  Optimizing Graphics for Web Output

When saving graphics to be placed in your web pages, it is recommended that you use Photoshop/ImageReady's Save for Web option. This will ensure the best quality and smallest download time for each of your images.

Save the individual graphics from your .psd as either .jpg or .gif.  When replacing images in your web page that you have modified it is recommended that you use the same name and file format as the original image that came in your template.  (If your modified image is saved as exactly the same name/file format you will not have to make any changes to the html source code - your new image will automatically replace the original in the web page.)

As a general rule, .jpgs are best for photos or any graphics that have soft gradients or drop-shadows.  The .gif format is best for images that have text or solid colors or that require transparent backgrounds.

You access Save for Web from the top menu's File dropdown list:

In the Save for Web window that opens, click the Optimized tab at the upper left.

In the right column you will see the file format choices. Fig.1 below shows options for saving as a .jpg. Press the arrow next to Quality and move the slider to adjust the quality of your image - the higher the number, the better the quality. In the lower left of the window you will see a display of the kilobyte size and estimated download time for the image as you adjust the slider: Fig.1

Fig. 2 below shows options for saving as a .gif. Adjusting the number in the Colors field (32 colors pictured here) to heighten or diminish the quality of your .gif image. As you adjust the number of colors to decide what is the best choice, the lower left will display the kilobyte size: Fig.2

You may save individual slices from your .psd here as well. Choose the slice select tool from the toolbar at the left of the Save For Web window and click on a slice. Hold down the Shift key and click on other slices in the document to save multiple graphics at once. Choose a file format and a quality/colors setting for each one.

  Fig. 3

Then, click Save at the upper right.  The Save Optimized As window will open. In its upper portion, choose the folder in which to place your graphic(s).

In the lower portion (Fig. 4 below), specify Images Only (no html code written), Custom settings*, and Selected Slices.

Fig. 4

*for more info on Custom settings, see the "Naming and Saving Slices" section in the tutorial Using Slices.

Click the Save button and your image(s) are saved and ready to go into your web pages.

Table of Contents