Web Graphics Formats

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 colors: charts, graphs, or text set as graphics. The fewer colors you use, the more efficient GIF files are. GIF files...

• can contain up to 256 colors.
• support a feature called transparency, in which one color out of the 256 colors 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 colors, such as photographs or scanned artwork. JPG files...

• can contain up to 16 million colors.
• 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 colors, such as text set as graphics or images with areas of flat colors. 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 website 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 colors.
• are still not widely used, mostly because they're not supported by older browsers.

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 take forever to download.

The most common graphics mistake people make on the Web is to use the wrong graphics format for their images. But the choice is really quite simple...

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

See also...

Web Graphics
The best Web graphics tools, usable by the beginner, but packed with plenty of higher-end features for the expert.

Web Graphics Tips
Creating images that look good and are as compact as they can be.

Free Web Banners
Creating your own banners from scratch or by using free banner generators.

• Overview
• Site Content
• Search Engine Optimization
• Web Design
• HTML Codes
• Web Graphics:
• Web Graphics Formats
• Web Graphics Tips
• Free Web Banners
• Domain Names
• Web Hosting
• Online Website Builders