Choosing a file format for Web graphics

Overview
Nearly all graphics on the Internet are either JPEG (Joint Photographic Experts Group) or GIF (Graphics Interchange Format) format. Other file formats, such as PNG (Portable Network Graphics) exist, but to be sure that the greatest number of browsers can display a graphic, choose either JPEG or GIF.

Using JPEG File Format

Use .jpg files for:

• Photographs.
• Natural-looking images.
• A large number of colors, such as in the millions.
• A great deal of detail, such as a photograph of a house on a real estate site.
• An image with large dimensions.

Using GIF File Format

Use .gif files for:

• Images that contain transparent areas.
• A limited number of colors, such as 256 or less.
• Colors in discrete areas.
• Black and white images.
• A small-size image, such as a button on a site.
• Images in which sharpness and edge clarity are important, such as line drawings or cartoons.
• Images containing text.
• Animations.

Know Your Audience

Knowing who will be seeing the graphic will help you determine which file type to use. Among the questions you might ask about your audience are the following:

* Will the graphic be seen worldwide on the Internet? Be sure that all users can see the graphic clearly. This usually means using only 256 colors so that people whose computers display only 8-bit color can enjoy it. Keep in mind that .gif files use 256 colors or less.
* Will the graphic be seen on a corporate intranet? If you know that everyone in your company has a fast computer with a true-color display, you can use millions of colors. Find out what the minimum system configurations are for the computers on the intranet. Remember that .jpg files can contain millions of colors.
* Is the audience specialized? If your graphic is a diagram to be viewed by software developers or other technical audiences, determine what screen resolution they use. Many technical people work at high screen resolutions, such as 1024 x 768. Pictures might appear smaller at higher resolutions than they would at lower resolutions. Recall that .gif files generally display edges, lines, and details more clearly than .jpg files.

Consider the Total Size of Your Web Page

Although estimates vary, many Web page designers suggest that you keep the total size of a Web page from 40 KB to 60 KB for most purposes, and not more than 75 KB. Microsoft FrontPage® provides tools to help you determine both the total size of a Web page, and which pages in your Web are slowest to load. In general, .jpg files are smaller than .gif files for the same content.

If your Web page is devoted to a graphics product, or to other graphics-intensive subject matter, you can make large graphics files available and still have the page load quickly by using thumbnails. The thumbnails can be buttons that readers click to see full-size versions of graphics. FrontPage 98 and FrontPage 2000 both offer the AutoThumbnail tool to help you easily convert any graphic to a thumbnail.

Determine the Purpose of the Graphic

Determining the purpose of a graphic is the first step in choosing one. Graphics on Web sites can serve any of the following purposes:

• Illustrative These graphics support a statement in text, literally illustrating a point. Examples of illustrative graphics are photos of houses on real estate sites, drawings on sales sites, and cartoons on comic book sites. Use .jpg files for photos and .gif files for drawings.
• Background images These graphics are often used as textures behind the text of a Web page. They can be repeating images of a company logo, swirls of color, or other abstract images. Page backgrounds often display partially transparent images. Only .gif files can display transparency.
• Navigation images These graphics can be buttons, navigation bars, or other aids to help readers move from one page on a site to another. They are typically small and self-contained. Use .gif files unless the graphic is a photo.
• Advertising These graphics are often overlaid on a Web site, frequently above the banner of a page. Advertising graphics often change from one product to another while a reader is looking at a site. Use the smallest graphic possible. Remember that the JPEG format can produce the smallest size file.
• Animation Moving pictures are magnets for the eye. A user's eye is drawn to anything that moves. Use animations to show something that would take too many words to explain, or to show transitions. As a general rule, try not to have more than one thing moving on a page at a time.

The purpose of the graphic will help determine its size, file format, style, and appearance. Before you begin to work on a graphic, ask yourself if the graphic adds something to your site. If the answer is no, don't use the graphic.

Alternatives to Graphics

If your goal in using a graphic is to catch a reader's eye, you can sometimes accomplish the same purpose in ways that will reduce file size and download time. The following list describes some alternatives to graphics.

• Consider using a solid color that will complement the color of text on the page, instead of using background images for a Web page.
• Consider using spot color in blocks in specific areas of a page to call attention to a block of text, or to group information.
• Consider using different colors in table cells to group information or highlight specific information.