Choosing the best Web graphic types

A description of the graphic types available to Web designers

Generally, graphic files are identified by their file extension: GIF graphics have a .gif extension, JPG graphics have a .jpg extension, and PNGs have a .png extension. These three formats are popular because they are compression-based formats — meaning that they take up less space and require much less time to download than other uncompressed formats, such as Windows BMP files.

Remember: JPG and GIF graphics are the two most widely used image formats on the Web. PNG is a third format that's becoming popular for Web use, but it still lags behind in overall support across browsers.

VYou can think of JPG, GIF, and PNG formats as something like trash compactors. They take a normal-size image and compress all the "extra air" out of them so that they take less space. For example, a BMP file of 1.5MB can be reduced to a JPG of just 2.4K!

JPG omelet: A photo's "breakfast" of choice
JPG (short for JPEG, or Joint Photographic Experts Group) is an ideal format for photo-quality and other high-resolution images containing millions of colors. JPG is what is known as a lossy compression format, because it works to remove redundant and unneeded graphical data that doesn't impact the look of the image. However, as good as JPG is for photo-like images, it doesn't do nearly as good a job on simple line graphics, clip art, and text.

Choosy mothers (with simple graphics) choose GIF
GIF (Graphic Interchange Format) can often be shrunk to a smaller size than JPG, though its compression ratio is dependent on the colors used in the image. GIF also supports only a maximum of 256 colors (far less than JPG), but it provides support for transparency (clear portions of the image) and animation (which JPG does not).

GIF is known as a lossless method of compression, meaning that it squishes the original image but doesn't throw out any of data in the process. As a result, simple graphics that include text and line drawings are often ideally represented in GIF.

PNG pong
PNG (Portable Network Graphics) is a third compression format that has started to become popular over the past few years. It also uses a lossless method of compression but does so at a higher quality, with more colors, and at a smaller size than does GIF. PNG supports transparency (like GIF) and opacity adjustment (which neither GIF nor JPG handles). Opacity adjustment is the percentage to which the image is visible relative to image or background underneath it. A 100 percent value would show the image normally, but 10 percent would show the image faintly.

Deciding the right format to use
So which format is better? As good as PNG is, the format is still not universally supported by all browsers, so it's not the best choice at this time for your Web site. When you examine the other two, each has advantages and disadvantages to think about when you're deciding which format to use.

Tip: GIF is often the best option for graphics with text; graphics that require transparency; and diagrams, clip art, and other line-based images that have a small number of colors. JPG, on the other hand, is top down the best choice for true color photos, as well as images with shadows or gradations.

Fortunately, SiteBuilder takes much of this decision making process off your hands. If you use any other graphics format besides GIF, SiteBuilder automatically converts the image to JPG format for you. As a result, you can even insert BMP and TIFF images into your Web site. SiteBuilder handles all the details of conversion.

	Choosing the best Web graphic types This article is excerpted from Yahoo! SiteBuilder For Dummies by Richard Wagner (For Dummies - A Branded Imprint of Wiley Publishing, Inc., 2005). Used by arrangement with Wiley Publishing, Inc. Buy the book