Optimizing Images for Web Pages and PowerPoint

Why optimize images?

Optimized images look better and load faster in both web pages and PowerPoint, and the faster a page or slide loads, the better.  Large, un-optimized images can slow a presentation down, and adversely affect its performance.   In addition, PowerPoint handles some file types better than others, and web browsers will only allow certain kinds of images to be displayed by web pages.  Most professional scans of slides and other media will be saved in “.TIF” format, which can’t be used for display on web pages and shouldn’t be used in PowerPoint presentations.  During optimization, files can be converted from one form to another.  For further information on file formats, consult our PowerPoint guide (make a link here please). 

The following tutorial was created using Adobe’s Photoshop CS.  These recommendations and directions apply to Photoshop versions 6.0 and above.

  1. Resizing your image
    1. Before you save an image in a different file format, you should first resize the image. 
      1. First, click on “Image>Image Size” on the Photoshop menu bar.  This will present you with a menu where you may resize your image.
        1. For Powerpoint presentations, a resolution no larger than 1024x768 is recommended, as most laptops and digital projectors used in the classroom support this resolution natively. 
        2. For web use, remember that most viewers will be visiting your page with screen resolutions between 800x600 and 1024x768.  You’ll want your images, at most, to be no larger than these resolutions.
      2. Make sure that the “constrain proportions” box at the bottom of the “Image” window is checked; this will preserve the original aspect ratio of your image file, and will prevent you from inadvertently distorting your image horizontally or vertically.
      3. Enter a new image size and click ok.

Next, click on “File>Save As”, give your edited image a new name, and click ok.

  1. Cropping an image.
    1. Cropping trims an area from an image.  Below, for example, is a screenshot of a desktop:

    2. For the sake of this example, the only part of this image needed is the upper right quarter of the screen, which contains 3 icons.  Cropping in Photoshop can isolate the useful parts of the picture, as shown below:

    3. There are two ways to get rid of unwanted borders and/or crop an image: using the crop tool located in the Photoshop tool bar, or by resizing the canvas area.
      1. Using the crop tool
        1. The crop tool is located in the upper left area of the Photoshop toolbar.  It resembles a black squared outline cut diagonally with a thinner black line (as shown below).

        1. With the crop tool selected, Click and drag your cursor to select the area you wish to keep. You will note that the area outside of your shape is shaded to identify what will be cut from your image.  To apply your crop, press “Enter”.
      1. Using canvas resizing to crop your image
        1. In Photoshop, the canvas is the entirety of your image. The canvas is the actual picture itself; if the canvas is resized, elements of the picture will be cut off, rather than making the whole image smaller. 
        2. To resize the image canvas, select “Image>Canvas Size…” on the Photoshop menu bar.  This will present you with a popup menu allowing you to change your canvas size (as shown below).

          1. It may take some experimentation to get a crop right; remember to use the undo command (ctrl+z on PC, and Apple+Z on the Mac) to step backward. 
        3. Next, save a copy of the image by clicking “File>Save As” on the Photoshop menu bar. Save the image with an amended file name, so as not to overwrite the original, unedited file. For programs like PowerPoint or for use in websites etc., save the file in JPG format in a new folder.
  1. Changing a file format
    1. Open your original image in Photoshop.  On the menu bar along the top of the Photoshop window, click on “File>Save Image as”.  This will bring up a save prompt.
    2. Navigate to the folder you wish to save the optimized versions of your images to.  Below the “File Name” field, you will find a dropdown menu listing a number of different file formats to save your image in. 
      1. If your image is black and white, then “CompuServe GIF” will be ideal. 
      2. If your image is a photograph, or visually complex color image, then choose “.JPEG”. 
      3. The “.PNG” file format is ideal in only certain circumstances, and is recommended for more advanced users.  

      4. Next, click “Save”.  Depending on which image format you chose for, you will presented with one of several dialog boxes.
        1. Saving as JPEG
          1. When you save a JPEG file in Photoshop, you’ll be presented with the menu below.  This allows you to effect the appearance and size of your image.  We recommend that you select “Progressive” under the “Format Options” sections, and leave the “Scans” field at 3.  For “Image Quality”, remember that the larger the file, the sharper the image.  Also remember that the larger the file, the more adversely your PowerPoint presentations performance will be affected, and the longer it will take your web pages to load.

        2. Saving as CompuServe GIF
          1. When saving in the CompuServe GIF format (or just GIF for short), you will be presented with the menu below.  If your image is black and white, click on the “Forced” drop down menu, and select black and white.  Otherwise, default settings will likely be fine for your gif.

          2. After clicking “OK” in the upper right, you’ll be presented with one more dialog box, shown below.  If you want your images to appear on a webpage as they load, row by row, then select “Interlaced”.  Otherwise, normal is fine. 

        3. Saving as PNG
          1. When saving as a PNG file, you’ll be presented with the dialog box below.  The above statements regarding interlaced GIFs apply here as well.  Select “Normal” or “Interlaced”, as preferred, and click “OK”.

Prepared by the ET Partners Program, IET Mediaworks and UC Davis