Understanding Graphic Formats

If you are going to place graphics and images on the Internet, you need to understand the different graphics formats and how each of them are used. This is, honestly, an issue independent of FrontPage but belongs in a book such as this in order to provide a complete overview of the Web design process.

The Web and most browsers support three pixel-based formats GIF, JPEG, and PNG. Subtle differences exist between each of these formats, and understanding these differences can have a big impact on the final look of the graphic.

For example, the GIF format supports only 256 colors, so if you use this format to represent a scanned photo of a forest scene, the image will look like a cartoon because all the colors will be changed to one of the 256 colors the format supports. This can be tragic to the images on your Web pages. A better choice for scanned photographs is the JPEG format, which supports 16.7 million colors.

In addition to color ranges, the formats differ in how they are compressed. To reduce the file size of graphic images to download more quickly over the Web, these Web-based formats compress the image information using compression algorithms.

In this chapter, we'll examine the popular Internet graphic and vector formats and how they work from within FrontPage. We'll also briefly discuss graphic optimization and the conversion between final formats. At the end of the chapter is a section about standards and how they should affect your design process.

Graphic Interchange Format

The Graphic Interchange Format (GIF) is a file format that uses a lossless type of compression, which means that none of the image quality is lost during the compression process. The GIF image compression algorithm works by scanning the image row by row to find sections of color that are the same and storing them as a block instead of as individual pixels.

This compression algorithm works because the GIF format is limited to a total of 256 colors. With only 256 unique colors, the chance of having similar colors appear next to one another is fairly high. Suppose that you have an image of a flag. The information read for this image could be something such as pixel number 1, blue; pixel number 2, blue; pixel number 3, blue; and so on. The long stretch of redundant colors could be more efficiently represented with this: The next 31 pixels are blue. This method of compression is built in to the GIF format.

You can increase the compression ratio even more by limiting the number of colors to less than 256. For instance, images containing only black and white pixels can be compressed to a very small file size.

NOTE

A bit of confusion exists over the pronunciation of GIF. Many people say it with a hard "g" because logically, if the G stands for graphic, it would follow that GIF (as in GIFt) would be the proper pronunciation.

However, many people, including myself, pronounce the G like a J, or JIF as in JIFFY.

GIFs have been the longest supported graphic file type on the Web, and they are extremely useful for a number of graphic file applications.

When to Use GIF Files

Several types of graphics can be saved using the GIF format, including

• Line-drawn images Any graphic that uses few lines, such as a cartoon, is a good choice for the GIF format.

• Logos Company logos created with a drawing package typically use a minimum number of colors.

• Images with few, flat colors With only a few colors and no light sources or gradations in that color, there's not going to be a lot of competition for those 256 colors in the compression method.

Figure 44.1 shows the single color graphic for FrontPage World, which is an excellent choice for the GIF format. Figure 44.2 shows the image bar for FrontPage Talk, with a couple of basic colors, with no light sources or gradations; it also makes the image perfect for the GIF format.

Figure 44.1. The single color FrontPage World logo is the perfect choice for the GIF format.

Figure 44.2. The FrontPage Talk header graphic is also a good choice for the GIF format.

Joint Photographic Experts Group (JPEG)

Frustrated with the limitations of GIF images, a group of photographic experts went to work on compression methods that would allow high-quality compression while retaining millions of colors. The results are what is known today as Joint Photographic Experts Group (JPEG or JPG).

NOTE

The appropriate file extension for JPEG files is .jpg. A lot of confusion surrounds this issue because of the JPEG name. Always follow standard filenaming conventions and use the .jpg suffix for all JPEG images.

The compression algorithm used with the JPEG format is by nature more complicated than the GIF format. JPEGs use a lossy compression method, which means that some image quality is sacrificed during the compression process. The algorithm focuses on removing data that is considered unimportant, instead of first mapping out areas of information that should be saved.

The JPEG method does this by dividing the image data into rectangular sections before applying the algorithm. On one hand, this method gives you a lot of control in terms of how much information you're going to toss away; at high compression ratios, however, you can end up with a blocky, blurry result.

These blocky sections are known as artifacts. Artifacts occur when you've overcompressed an image. You will look at this a bit later when you step through the optimization process. Working with JPEGs, just as with GIFs, requires a bit of skill and a fine hand to achieve the best results.

The JPEG format enables you to set the amount of compression that is applied. The greater the compression setting, the smaller the file size, but the poorer the image quality.

When to Use JPEGs

Because the JPEG format was specifically designed to manage files with a lot of color, certain types of images best lend themselves to JPEG compression. The following list is a helpful guide to use when determining whether JPEG is the best format for your image:

• A lot of colors, such as with color photographs (see Figure 44.3)

  Figure 44.3. Pictures, particularly when in full color, contain a lot of gradation and will normally be processed via the JPEG format.

  

• Graphics using gradient fills

• Graphics using light sources

Portable Network Graphics

Another file format supported by most newer Web browsers is the Portable Network Graphics format, PNG for short. This format is newer than the other formats, but it is widely supported by all the latest graphic tools. It is felt that PNG offers even better compression than a GIF while allowing for 16.7 million colors.

Using a lossless compression method, the PNG format offers the color range of JPEG images without the image destroying lossy compression. Another major difference between the PNG and JPEG formats is that PNG images, like GIF images, can be interlaced, making it a very attractive option for the future. Interlacing causes the image to appear line by line as it is downloaded. This gives users an idea of how the image looks as the it downloads.

NOTE

Older browser versions don't support PNG.

FrontPage as well as many graphic imaging programs, such as Photoshop includes PNG support for file development and optimization. For more information on the PNG format, visit the World Wide Web Consortium's specification for PNG at http://pngspec.frontpagelink.com.

When to Use PNGs

The PNG format is best when you find yourself in middle ground, in need of a lot of colors, and still desiring lossless compression. Interlacing images with a lot of colors is another reason to use PNG. This isn't an option with standard JPEG images.

If you are still having a hard time deciding if you should use the PNG format, see "Use of the PNG Format" in the "Troubleshooting" section at the end of this chapter.

Keep in mind that users who view Web pages with older browsers might not be able to see your PNG images. This format is better used on an intranet with a homogenous browser base. It can be used for the following:

• Line-drawn images with more than 256 colors

• Interlaced graphics with a lot of colors

• GIF images in need of better compression rates