Saving Images for the web using Adobe Photoshop

The following tutorial will show how to save images for the web in a few popular formats using Adobe Photoshop.  These instructions apply to several versions of Photoshop, but this tutorial was created using Adobe Photoshop CS2 (version 9.0), the latest version of the software. We won’t use Photoshop to perform any image manipulation in this tutorial.

 

  1. Opening an Image in Photoshop
    1. To open an existing file, click the File menu located in the upper left corner, and click Open.  Locate your file within your computer and click OK.


  1. Saving For the Web
    1. After opening the file you wish to save into a different format, click the File menu, and click Save for Web.

 


  1. This will bring up the “Save For Web” screen.  You should see several tabs in the following order: Original, Optimized, 2-up, 4-up.  For simplicity’s sake, click 2-up to compare images.

    1. Once you click 2-up, you should see the image you loaded earlier alongside a reproduction of it.  The image on the left is the original, there for you to compare visual quality and file size (as indicated by the text in the bottom left corner of the window pane on the left half).  Compare the file size of the original with the new file (as highlighted below), as well as the resultant image quality in the new file, to see if the file size and format is appropriate for your needs.


    1. In the box on the right, you will see the options available for saving in different formats.  Clicking the drop down box labeled “Preset”, you will see several options including “.GIF”, “.JPEG”, or “.PNG”.  Generally, saving your file in each format depends on what looks best and has a relatively small file size. 

     


      1. Typically, you would use each format for different things: “.JPEG” for photographs, “.GIF” for line-art or limited palette images (like the image shown above), and “.PNG-8” for images with opaque layers.  “.PNG-24" is rarely used for lossless image reproduction and should not be used with websites too often, as the files may be quite large and require the QuickTime plug-in to run in Internet Explorer.
    Prepared by the ET Partners Program, IET Mediaworks and UC Davis