GIF, JPEG or PNG?

First of all, there are 2 issues concerning images that you have to know:

1. Some web browser can't show images (in fact they are text based browser, such as Lynx)
2. Images are heavy HTML elements (a text based web page is on an average smaller than a simple image)

So you have to think about these issues. You should use the ALT tag in order to show an alternative text in place of the image. In this case, a text based browser will show the alternative text. The alternative text will explain the image content. Example:
<IMG SRC="button.gif" ALT="Click here!">
It will show 'Click here' in place of the 'button.gif' image.

Then images are heavy. When you write a text only web page, say about 5Kbyte of size, you are writing quite a long page. On the contrary an image of about 5kbyte of size isn't a big image. Just a small button for example. Photos are very heavy HTML elements. A photo maybe 10k, 100k, 200k or bigger. What's happen when a browser (that say, takes about 6 seconds to download a page of 10kbytes) meet a 'small' photo of the size of 200Kbytes? Let's see...200/10=20, 20*6=120...wow, about 120 seconds! (2 minutes to download). I don't think that visitors are happy to wait for your image!

Formats

The GIF format was developed by Compuserve and it stands for Graphics Interchange Format. This format is available for several platforms and so it is much used on the web. GIF images can use up to 256 colors only, but their big trouble don't concern colors. The big trouble with GIF files is: they use an algorithm which must be licensed (to know more take a look at the GNU organization home page). Shortly, GIFs use a compression algorithm called LZW (by Lempel, Ziv and Welch) and you should pay rights for it. However, let's talk about GIFs' features: GIF are good for images which contain a few colors (up to 256) but they aren't good for images which contain millions of colors. In that case JPEG format is better than GIF format. So, if you put a photo on a page, it should be a JPEG image, because there are millions of colors inside of a photo. However GIFs are interesting, because you can build transparent images, interlaced images and animated images. In order to build this kind of images, you need some graphics software. There are several programs, like Paintshop and Photoshop which are helpful to do this kind of job. JPEG means Joint Photographic Experts Group and it's a format for images with millions of colors. In fact JPEG uses a compression algorithm which eliminate superfluous colors. So the more colors you cut, the more loss of quality (but the more size riduction too) you get. You have to balance this situation. However you can't get animated JPEG, you can't get transparent JPEG, and you can't get interlaced JPEG (even you can get progressive JPEGs, but there are browsers that can't read those formats). What's a transparent GIF? Well, images are ALWAYS squares or rectangles, so you can't build circular images for example. For this reason transparent GIFs are really helpful. In fact, suppose you draw a red circle on a black background for example. It's ok when you put your image on a page with a black background. You will see just a red circle. But what's happen when you put that image on a page with a white background? You will see a white page, a BLACK SQUARE and, of course, your red circle...However you can save that image as a transparent GIF. In this case you have to specify that black color must be a transparent color. Animated GIFs are just images which contain a set of several images inside of them. When a browser reads an animated GIF, it reads all images contained inside of it. It's the same principle of cartoons or movies. Several images showed rapidly one after the other. Human eye retain one image for a tenth of one second, so you can't see gaps between images when you see an animation. There are programs to build animated GIFs such as GIF Construction Set, GIF Animator, GIF Builder and others. Interlaced GIFs are images that are rended little by little. These images become more and more sharp and definite during download. So you can understand immediately what an image contains, and you haven't to wait for complete downloading. Due to license problems, a special graphic format was invented: PNG. PNG stands for Portable Network Graphics and its features are the following:

• It contains an unregistered compression algorithm
• It supports 24 bit images (millions of colors like JPEGs)
• It's available for all platforms
• It supporst interlaced and transparent features
• it supports other interesting features (such as particular transparencies)

However PNG isn't a standard yet and several browser don't support it.

So, summarizing, if you have to build an icon, a button or a simple logo, you should use a GIF format. On the contrary, if you need millions of colors (the only case I can think of, is a photographic image) you should use the JPEG format. If your image contains 256 colors or less, you should use a GIF. Remember that often you can't notice the difference between an image containing 256 colors and another one containing more colors (of course, things change if you are handling photos, so , as I said, you have to use the JPEG format). If you need an animated logo, you have to use an animated GIF. If you need a trasparent image you have to use a trasparent GIF. If you need an interlaced image, you have to use an interlaced GIF. Finally, if you are handling a photo, you have to use the JPEG format.