Gifs, jpegs and animated gifs?

Two of the best image compressing formats used on the web are GIF and JPG. Here is a table that summarises the differences:

GIF is the best choice for line drawings, clip art and pictures with lots of solid colours. JPG is better for most photographs.

Note the following:

• If you save a photograph as a GIF file, you will notice that it is much larger than the equivalent JPG file. You may also notice that the file appears flattened. However, if you save a picture with solid colours, the GIF file has the better compression
• If you save a solid colour picture as a JPG file, you will probably see all the variations of hue
• Every time you save a JPG file, you lose some quality so you should store your original picture in another format (Adobe Photoshop perhaps?)

The other major difference is that GIF files can be transparent; JPEG files cannot. To add transparency to a gif, you need a graphics package that supports GIF89a files. Not all browsers display transparent images properly, especially older ones.

You can also interlace images; this allows the system to draw the image in a series of passes rather than in one go. The first pass skips a number of lines and the subsequent passes fill in the gaps. You get an image that starts off blurred and then gradually comes into focus.

Two reasons to use interlaced files?

• Users have something to look at rather than a space. You may get their attention, who knows?
• Users get a preview as the image fades in so they can decide whether to wait for the image to load or not

Interlaced files are bigger than non-interlace files.

Animated gifs contain several images; to create them you put together several frames and set delay times between the display of the frames. The most effective use is probably for small icons and logos.

Two drawbacks?

• Large animated gifs are very big
• Browsers that do not support then just display one frame so be careful how you create the file

Useful information about animated gifs:

• Gif Animation on the WWW at http://members.aol.com/royalef/gifanim.htm
• How to make an animated GIF at http://www.webreference.com/dev/gifanim