The main Web graphics formats are GIF, JPG, and PNG. It's important to know the differences and choose the best format for each image, so that pictures look good and are as compact as they can be so they appear quickly on your site visitor's screen.

GIF - Graphic Information Format

GIF graphics format is best for images with only a few colours: charts, graphs, or text set as graphics. The fewer colours you use, the more efficient GIF files are. GIF files...

• can contain up to 256 colours.
• support a feature called transparency, in which one colour out of the 256 colours is set to be transparent. This keeps your graphics from looking as if they're in boxes, because the background of the file is invisible, letting the Web page's background show through.
• can be animated. Inside a single file is stored many picture frames and an index telling how long each frame should be shown. Animated GIF is treated as a standard image file, so it is loaded with the standard <IMG> tag.
• are lossless, which means the image quality is not degraded by the compression process.
• can be interlaced so they appear to fade in, from lower to higher quality, while loading. This gives your visitors something to look at while they're waiting.
• are not good for photographs - you lose quality and the files won't be compact. Use JPG graphics format for photos.

JPG - Joint Photographic Experts Group

JPG graphics format is best for images with many colours, such as photographs or scanned artwork. JPG files...

• can contain up to 16 million colours.
• support variable compression. You can apply more or less compression to each individual image. The more compression you apply, the more quality you lose. While file sizes can be made quite small with this graphics format, you often have to compromise between file size and picture quality. Newer graphics software gives you a preview before you save - this allows you to experiment with various levels of compression to choose the best compromise between quality and file size.
• come in three types: baseline or standard, baseline optimized or standard optimized, and progressive. Baseline was designed for browsers that we'd consider to be ancient these days (such as Internet Explorer version 1). Baseline optimized offers more compression over standard baseline, and practically every browser today can read such an image. A progressive JPG, like an interlaced GIF file, builds as it downloads, going from a crude representation of the image to its finished look. While this is a nice Web graphics format, older browsers don't all support this format.
• are not good for images with only a few colours, such as text set as graphics or images with areas of flat colours. If you use JPG for these graphics, they will be larger than necessary, and look "mottled."

PNG - Progressive Network Graphics

PNG is the newest Web graphics format. PNG files...

• are supported by all modern browsers. These files may not appear in older browsers, so using this graphics format may cause some of your Web site visitors to be unable to see your images.
• are compact and versatile and can combine the best features of GIF and JPG, such as the ability to have transparent backgrounds or the ability to contain images with millions of colours.
• not supported by older browsers but patent-free compression algorithm.

When to use which?

Choosing the right Web graphics format can ensure that your images look good and appear quickly on your visitor's computer. Choosing the wrong format makes your images look bad and can take a long time to download.

The most common graphics mistake people make on the Web is to use huge images straight from their high powered digital camera and upload them directly without resizing them. Also they forget to change the format or the file name to include a keyword e.g. from img1209.jpg to blue-ball.jpg.

Your Options

• If your graphics have a lot of colours (such as a photo), choose JPG or PNG.
• If your graphics have few colours such as a logo, choose GIF. When using GIF, try optimized palettes that contain only the colours used - they can cut file sizes in half.