HTML Tutorial - Optimising Gifs

Images for the web need to be optimised to bring down their filesize so that the web page containing them will load faster. The total size of a web page ( including all pictures and html code), should not be greater than 30-40 kilobytes. For this tutorial we will be using Photoshop 6.0, but it may equally be done in Paint Shop Pro, Fireworks or any other comparable graphics program.

Gif file format works best on non-photographic images composed mainly of line-art or large areas of flat colour, like logos. For photographic images , use Jpeg file format .

1. First off, start Photoshop and open your gif file. I have used the button below as my example .
   
2. Go to "File" - "Save for Web" and open that window.
3. Click the "4 - Up" tab in the window.
   
4. In the "Optimized File Format" listbox , select "GIF".
5. In the "Dithering Algorithm" listbox , select "No dither".
6. Tick the "Interlaced" Checkbox.
   
7. Have a look at what your image looks like at 200% to get a closer look at the pixels, and then return to 100%.
   
8. Choose a Number of Colours from the "Colors" listbox. Try starting with low number and gradually increasing it until the image quality is just acceptable. Notice the filesize at the bottom of the window as you change the colours.
   
9. The more colours the larger the filesize. Also notice the Color Table changes.
   
10. Now compare your 3 optimised images with the original, and work out which best. Look for the best image quality with the smallest file size and shortest download time.
11. Click "OK" and save it