FrontPage 2003 in 24 Hours: Work with Graphics in Different Formats

HOME / ORDER THE BOOK / OTHER BOOKS / THANKS

ROGERS CADENHEAD

Work with Graphics in Different Formats

This is part of Chapter 3 of the book Sams Teach Yourself Microsoft FrontPage 2003 in 24 Hours by Rogers Cadenhead, published November 2003 by Sams Publishing

Before you start working with graphics, it's important to learn what kind of formats you should be using. Visual imagery can be represented on a computer in dozens of different formats, but the budding Web designer needs to be familiar with only three: GIF, JPEG, and PNG.

You probably have some of these files on your computer already: Look for anything with the file extensions .gif, .jpg, or .png.

Most images on the World Wide Web are in either Graphics Interchange Format (GIF) or Joint Photographic Experts Group (JPEG) format. A newer format that's becoming popular is Portable Network Graphics (PNG).

GIF Graphics

The GIF format holds images that are limited to 256 colors. This is ideal for simple images with lots of solid color (menu buttons), small graphics (icons, ads), and other images that don't require much fine detail.

If a photo is to be displayed as a GIF, it must first be reduced so that no more than 256 different colors appear in the image.

Caution: GIF files can become prohibitive to use on the Web if an image is large or complex. Even if a photo was reduced to 256 colors, it might still be too large for publication on your site -- visitors wouldn't want to stick around until it finishes loading.

The GIF format supports two special effects that are popular on the Web: transparency and animation.

Transparency is a technique that makes a portion of a graphic blend in with the background of the page, which can be a solid color or a graphic. Transparency works by designating one color in a GIF graphic as the transparent color, which will not be displayed when the graphic is shown on a Web page. To see this in action, look at two GIF graphics on a page in Figure 3.1.

Viewing nontransparent and transparent graphics.

Figure 3.1
Viewing nontransparent and transparent graphics.

The Web page shown in Figure 3.1 has a striped background. The trumpet on the left does not have a transparent color, so you see the entire graphic, which includes a white square around the instrument. The trumpet on the right has been created with that particular shade of white chosen as its transparent color, so you can't see it -- the stripes on the page show through.

A GIF graphic can be animated by displaying several related GIF images in sequence. These images are stored together in a single file with information on how long to display each image, the order of display, and the number of times to loop through the sequence.

You've undoubtedly seen hundreds of animated GIF graphics as you browse the Web; they are a favorite technique of advertisers.

You'll learn how to select a background and create your own transparent and animated GIF graphics in Hour 10, "Make a Site Look Great with Graphics."

JPEG Graphics

The JPEG format holds photo-quality graphics that may contain thousands of different colors. To make the file size reasonable, making the graphics faster to download on the Web or be transferred by other means, JPEG uses a data-compression technique that makes the file size smaller at the expense of image quality.

When a JPEG file is created by a digital camera, scanner, or software, a balance is struck between size and quality. The higher the clarity and color depth of the image are, the larger the size of the file is.

Because of compression, JPEG is usually the best choice for complex images with a large number of colors. JPEG files are good at displaying scanned photographs that don't have large areas of solid colors.

JPEG is often a poor choice for images with large areas of a single color. Because of how compression is handled, wavy lines (often called "jaggies") will appear along the edges of any solid blocks of color, making the image appear more blurry.

PNG Graphics

The PNG format was introduced to be a replacement and enhancement for GIF and JPEG graphics. It can be used to display images with 256 or fewer colors, like a GIF (PNG-8 format), and images with thousands of colors, like a JPEG (PNG-24 format). PNG graphics also can support transparency and other special effects.

Web site designers have been slow to choose PNG because it wasn't always supported in Web browsers. Internet Explorer 4 and Netscape Navigator 4 were the first editions of either program that could display PNG graphics without the help of a plug-in (a program that extends the browser's capabilities).

Today, the current versions of the five most popular browsers -- Internet Explorer, Netscape Navigator, Mozilla, Opera, and Safari -- support PNG, although most do not support all of its features.

Selecting the Right Format

Using FrontPage, you can add graphics to a site in several other formats with which you might be familiar: BMP (Windows bitmap), EPS (Encapsulated PostScript), RAS (Raster), TGA (Truevision Targa Graphics Adaptor), TIFF (Tagged Image File), and WMF (Windows Metafile).

When you add one of these graphics to a page and then save it, FrontPage converts it to GIF format if it contains 256 or fewer colors, or JPEG format if it contains more.

The software encourages you to use only GIF or JPEG, offering the following recommendations on one of its dialog boxes:

"GIF: Best for line art and computer-generated drawings. Only 256 colors. Insufficient color for many photos."
"JPEG: Best for photos. Accurate color and small file size. Bad for line art and computer-generated drawings."
"PNG-8: Similar to GIF but with better color support. This format isn't very common and isn't supported by all browsers."
"PNG-24: Similar to JPEG but with lossless compression and usually larger file size. This format isn't very common and isn't supported by all browsers."

My own rule of thumb is to use JPEG for photos and use GIF or PNG for everything else. When a GIF graphic is so visually complex or large that its file size is 30K or larger, I make the graphic simpler or replace it with something else. This keeps the graphic from taking an excessive amount of time to appear when a Web user on a dial-up modem connection views it on a page.

Chapter 3:

Teach Yourself Microsoft FrontPage 2003 in 24 Hours

HOME / FEEDBACK / ORDER THE BOOK / OTHER BOOKS / THANKS