Saving images with few colours - Images for the web - Web Team - University of Canterbury - New Zealand

Saving images with few colours

GIF is the preferred file type for images with limited colours on the web, (eg logos or graphic pictures/charts).

You need to balance image quality by reducing the number of colours. Your image needs to look good with a file size as small as possible.

This process is called optimising. GIF files can have a maximum of 256 colours. For the web the number or colours is reduced to 16 - 64, reducing the amount of information in the image.

Keep an original of the image until you are sure you no longer need it as you can't add information back.

Instructions for saving photos.

How to save images with limited colours for the web

1. To save a gif select File - Save for Web

2. Select the hand tool in the Save for Web box (this allows you to move the image). The original is viewed on the left. On the right is the image preview, showing how the photo will look using the current settings.
(NB Save for web automatically changes resolution to 72dpi)

3. Select GIF (headings) from the drop down menu

4. Gifs should be reduced to between 16 and 64 colours for the web

5. Leave all other settings on default

6. At the bottom of the Save for Web box you can compare the size of the original image and the size of the preview photo using the current settings. Watch how the size and download time changes on the preview as the number of colours is altered

7. Once you satisfied with the balance between image quality and file size save the image to the graphics folder in your site by clicking 'ok'

Tips for saving images with few colours

  • Use lower case and hyphens-instead-of-spaces-in-filenames
  • Keep a copy of the original image until you are sure you no longer need it
  • If you think you may need it again archive it on your hard drive, p: drive, K: drive or burn to CD.
    Don't store originals (large files) in your website files