In order to place an image in your Web document, it needs to be saved in an appropriate file format. HTML has long supported two graphics file formats: GIF (pronounced "jiff") and JPEG ("jay-peg"). There is a newer format called PNG ("ping"), but older browsers do not support this.

If you are creating your own images, you need to save them (or convert them) to one of the supported formats. Most graphics programs available for Windows (such as PhotoShop and PaintShop Pro) will save or convert graphics files to GIF or JPEG.

While any image can be saved in either format, there are times when it is better to use one or the other. In general, JPEG is preferable when saving photographs and GIF works better with drawings and images of text. Because of the type of compression used, GIF creates much larger files for photographs without any greater quality. On the other hand, JPEG can provide poorer quality for some types of drawings. Here's the same image saved in each format:

Saved as JPEG	Saved as GIF

If you look closely at the JPEG version, you can see splotches around the letters in an area that should be solid color. The GIF version does not have this. In this case, the size of the GIF file is 3 KB while the JPEG is 5 KB.

Now look at these two photos in each format:

Saved as JPEG	Saved as GIF

In this case, the quality of the JPEG is slightly better than the GIF. In addition, the GIF file at 34 KB is over twice as large as the JPEG (15 KB). Having a number of large photo files can dramatically increase the amount of time it takes your page to download, so try to use JPEG when appropriate.

There are some other differences between GIF and JPEG files. GIF can be used to created animated images, and it also can be used for transparent images. For example, to have a background image or color show through, you would have to use a transparent GIF:

Regular JPEG file

Transparent GIF file

If you have the appropriate software, you can also create an animated GIF file. An animated GIF is basically a sequence of images combined into one. Here is the beginning of an animation sequence:

An animated GIF created from these images would look like this:

Choosing the right format for an image is an important step before placing it on your web page.