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. Read Optimizing Graphics for Web Sites for information on how to make your graphics files small for quick downloading.

What's the difference?

Using JPEG File Format

Normally, consider .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

Consider .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

Choose the smallest acceptable image

Experiment with different compression on .jpg files to find the smallest, acceptqble quality image (smaller the image becomes, the worse it looks). A good rule to follow for selecting between a .jpg or a .gif - "Unless there is a requirement for one of the special features, choose the format that is smallest file size for acceptable image quality."

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. Read Using Color on Web Sites for more information on using color.
• 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 (and in fact requires 24 bits to represent 16.7 million 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 people work at high screen resolutions, such as 1024 x 768 or higher. 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 unless the image has a small number of colors. Many imaging programs will show both the size of the image, and estimate time to download with a specified modem.

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, 2000 and 2002 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, or to highlight critical content. As a general rule, try not to have more than one thing moving on a page at a time, and avoid gratuitous animations.

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 (div tags) 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.

Send e-mail to RandySmith@mpc.edu