Skip Top Navigation

Optimize Images for the Web

See also:
  • Size images
  • Add images
  • Format images
  • Optimizatizing images improves the way your Web page will perform.


    How to optimize a JPEG

    1. Open image editing software.

    2. View at magnification to see entire image.

    3. Crop out any parts of image not needed. Set to 100% magnification.

    4. Check image size by going to Image > Image Size

      Note
      Project page images are 185 pixels wide for the thumbnail and 510 pixels wide for the full-size image.
      Files should be no larger than 510 pixels wide for larger images and 200-250 pixels wide for smaller images.

    5. Go to File > Save for Web.

      Settings: JPEG
      Preview:Choose 2-Up or 4-Up
      Click on preview windows – experiment with quality settings
      (note: usually 35 good setting).

    6. Click on Optimized and leave Progressive box unchecked.

    7. Take note of file size (30-40k for 510 pixel images, under 15k for 200-250 pixel images).

    8. Click OK
       

    How to optimize a GIF

    1. Open File in PhotoShop.

    2. Select File > Save For Web.

      Settings – should be set to:
      GIF
      Adaptive
      Select Number of Colors
      Lock in each color that must be preserved. Select the eyedropper at the far upper left, click on the color in your image that you want to lock in, and you will notice a small white square appear in the color cube for that color in the Color Table. Then at the bottom of the color table, click on the "lock" icon to lock in that color. You can do this for each color you want to preserve.

    3. Click OK.

      Your image is optimized and ready to be added to your resource manager.

    More about GIFs

    In a typical situation, when you’re optimizing an image to be a GIF file for the Web, you would select the Adaptive palette, and then choose the number of colors you want to use for your image, experimenting until your colors are reduced to the point that your image still looks good, but the file size is reasonably small.

    To make sure you preserve your most important colors, lock them in when you use Save for Web in Photoshop.


    Different Palettes that can be used in Save for Web Dialog Box

    Adaptive
    The Adaptive palette is used most frequently since it will let you reduce the number of colors to 32 or fewer. It yields more detail overall throughout the color spectrum. This palette adapts to the colors in the image. It picks the most frequently occurring colors in the image for the Color Lookup Table.


    Selective
    Favors broad areas of colors and the preservation of Web colors.
    Perceptual: Gives priority to colors for which the human eye has greater sensitivity.
    Web: Equates to saving your image in the worst possible color mode just to be sure it will look good on 256-color monitors.


    Other Settings

    Dither
    Dithering takes two colors from your color table and calculates a missing intermediate color. An example would be the spray of pixels you see making up a gradient or blend. There are several styles to choose from. Besides diffusion, noise dither is also a good choice. The advantage of diffusion is you set the amount of dithering using the slider. Since reducing colors is the key to smaller file size, reduce number of colors just before you see major drop in quality, then use the dithering slider to improve how the image looks as your keep an eye on file size. Dithering increases file size but also improves image quality. You can counteract this file increase using Lossy slider.
     
    Lossy
    Uses patterns of color and stores them in a compression table. The Lossy slider setting determines how much you want to reuse those patterns. The result is better image compression.

    For more information on graphics and optimization contact Web Help.