Working with File Formats

One of the main concerns for any Web page designer is download time. The simple fact is, if your Web page takes too long to download to a user's computer, that user might get bored and simply jump to some other place on the Web. One way in which you can ensure that your page takes a reasonable amount of time to download is to compress your images. Compression is a process that shrinks a file down to essential data only. As you might suspect, compression also takes a bit of the clarity and detail away from the graphic imagealthough some images are affected very little by compression. As we continue through this chapter, you'll learn to identify the compression method you should use for each image (yes, there is more than one method).

So how do you compress a graphic image? Well, basically, you just save the file in a file format that uses compression. During the saving process, however, you can make some small changes to the way in which the file's compressed. This allows you to retain some additional clarity (while in turn , making the file bigger than it might normally be when fully compressed in that particular format.) Due to the current limitations of Web browsers, only two formats are available for Web graphics: GIF and JPG. Each of these two formats goes about compressing an image in its own way, and as you'll see in this chapter, each format is is a viable choice given a particular type of image.

Okay, okay, there is another format available for Web graphics, called "ping" or PNG. However, although the two most popular Web browsers display PNG files, only the latest version of Netscape (version 6.0) fully supports the file format. Internet Explorer (versions 4.0 to 5.5) fully supports the PNG Gamma feature, but only semi-supports the Transparency feature (Internet Explorer supports simple transparency only in paletted images). In non-paletted images, Internet Explorer displays the transparent areas as opaque . Because you can't depend on any given user having the current version of Netscape or Internet Explorer, you might not want to use PNG graphics on your Web pages.

In case you're interested, however, Paint Shop Pro 7 allows you to save images in PNG format, preserving even the gamma and transparency settings (which were not saved when PNG format was used in earlier versions of Paint Shop Pro). And PNG format does preserve a lot of the detail of photographic images while also providing a certain amount of compression. Given the current level of support for PNG on the Web, though, it is not the best choice for your Web graphics.

GIFs

GIF, or Graphical Interchange Format , is an image compression format originally developed by CompuServe. This format is one of the most popular formats for computer images. It also has a couple of features that make it appealing for Web graphics. Like any other format, though, it also has some shortcomings. In addition to lacking some desirable features, GIF has recently been surrounded by copyright infringement problems. The mathematical algorithm used to compress the image information, called LZW (for Lempel-Ziv & Welch, the mathematicians who developed it), is patented by Unisys. (An algorithm is a mathematical formula that can be programmed in computer language to perform a set of steps.)

GIFs: The Good, the Bad, and the Ugly

Although somewhat limited, GIF has some really good properties. For example, it can compress cartoons, illustrations, and images with large areas of similar color very well. Even with these types of images, though, GIF yields different results because of the way that the GIF compression algorithm works. You can see what I mean by looking at Figures 42.1 and 42.2.

Figure 42.1. Thick horizontal stripes : 1,292 bytes.

Figure 42.2. Thick vertical stripes: 1,540 bytes.

The figures are similar except that Figure 42.1 has horizontal bars and Figure 42.2 has vertical bars. Aside from that, both are the same size and have the same number of colors. Note the file sizes, though. Figure 42.2 is 248 bytes bigger than Figure 42.1. That's almost 20 percent bigger. Take a look at a few more images (Figures 42.3 and 42.4), and then you can examine why this size difference occurs.

Figure 42.3. Thin horizontal stripes: 1,299 bytes.

Figure 42.4. Thin vertical stripes: 2,679 bytes.

Wow! There's an even bigger difference between the file size of Figure 42.3 and that of Figure 42.4. The difference is 1,380 bytesa whopping 106 percent. What's interesting, as well, is that there is only a very small difference in file size between Figure 42.1 and Figure 42.3only seven bytes.

The way that the GIF algorithm compresses information explains the difference in file size. Large blocks of identical information that read from the top left and go across toward the right are well compressed. On the other hand, when information changes (for example, a color change), the GIF compression method starts to lose its power.

A GIF image in one solid color the same size as Figures 42.1 through 42.4 is 1,146 bytesnot much smaller than Figures 42.1 and 42.3. You can see the losses that happen, though, when you start breaking up the horizontal runs of a single color. Imagine how much room a vertical gradient would take up!

What all this means to you as a Web graphic designer is that there are no hard-and-fast rules when it comes to image compression. Sometimes GIF will be the method of choice and sometimes it won't. You'll really have to examine each image independently. For the most part, though, GIF works well with images that have a limited color palette.

There also are some cases when the only choice is to use GIF. One of these is when you want some of the image's information to be transparent.

Transparent GIFs

Transparent GIFs are handy when you have a background pattern on your Web pages. Without the Transparency option, you're limited to having a rectangle around your images, as in Figure 42.5.

Figure 42.5. Example of a nontransparent GIF.

Figure 42.5 shows a Web page with a GIF at the top. The GIF wasn't saved with the Transparency option activated. As a result, a dark rectangle appears around the word Nontransparent . Figure 42.6 shows the same Web page; in this example, however, the GIF was saved with the transparency option turned on.

Figure 42.6. An example of a transparent.

Notice how the background pattern is visible around and even through the letters . This Transparency option is available in most of today's graphics programs, including Paint Shop Pro 7.

Saving Transparent GIFs with Paint Shop Pro

Paint Shop Pro provides a wizard that makes it easy to save a transparent GIF. Follow these steps:

1. Open the image whose background you want to make transparent. I'm using the Giant Frog Supermarkets logo (a fictitious supermarket chain) shown in Figure 42.7.

   Figure 42.7. You don't see giant amphibians these days.

   

   

   You might want to make sure that you've saved a copy of your file in the native Paint Shop Pro format before you reduce the colors and save the file as a GIF. That way, you'll have the original file with its layers and channels intact, should you need to make changes in the future.

2. Choose File, Export, GIF Optimizer. The GIF Optimizer dialog box is displayed (see Figure 42.8).

   Figure 42.8. The logo being transformed into a transparent GIF.

   

3. Select the option you want from the Transparency tab:

   • None Use this option to remove transparency from a GIF.

   • Existing Image or Layer Transparency Use this option if your image already contains a transparent layer or background, and you want to use it when converting the image to GIF.

   • Inside/Outside the Current Selection Use either of these options if you've made a selection on the image, and you want either the selected or non-selected area made transparent.

   • Areas That Match This Color If you choose this option, click the button to select a color. All pixels matching the color you select will be made transparent. You can select a color from the image directly by simply clicking on the image. After choosing the color, set the Tolerance level as wellthis level determines how closely a color must match the color you select before it is made transparent.

4. If your image contains partially transparent pixels (you reduced the opacity of a layer, inserted a mask, feathered a selection, or brushed or erased parts of the image using a reduced opacity level), click the Partial Transparency tab and tell Paint Shop Pro how you want the partially transparent pixels handled:

   • Use Full Transparency for Pixels Below X% Opacity Use this option to change partially transparent pixels into fully transparent ones. The lower the value you enter however, the lower the number of partially transparent pixels that will be converted.

   • Use a 50% Dither Pattern Use this option to blend the partially transparent pixels with a color you select. This is perhaps the best dithering method for a small color palette (256k colors).

   • Use Error Diffusion Dither Use this option to blend the partially transparent pixels with a color you select. This is perhaps the most effective dithering method, especially for larger color palettes.

     If you choose anything other than the first option, select how to blend the partially transparent pixels:

   • Yes Select this option to blend the pixels with the selected color.

   • No Select this option to keep the partially transparent pixels their original color, but to make them opaque.

5. Reduce the size of the file with the options on the Colors tab:

   • Colors Select the maximum number of colors you want to use. You can reduce the file's size by selecting a smaller number of colors.

   • Dithering Select the amount of dithering (blending) you want used.

   • Palette Choose whether to use an existing color palette, or to reduce the size of the file by optimizing your colors. You might want to choose the middle ground and go with a standard set of Web colors (which will ensure that the graphic will appear the same on most Web browsers) instead of selecting one of the two optimizing methods . To do that, choose Standard/Web-safe.

     You can increase the intensity of selected colors by boosting them. To do that, prior to opening the Optimize GIF dialog box, select an area of the image that contains the colors you want to boost (make more intense ), and then use the Boost Selected Colors By option to increase those colors by the factor you select. You can also include the standard palette of Windows colors, which is a good option to use if the graphic will not be posted on the Web, but will be used in some Windows application.

6. With the Format tab, you can select how you want your Web graphic downloaded to the user's system:

   • Interlaced The file is downloaded to the user's machine in a quick format, with details filled in a little at a time. This option allows the user to see the image quicker, but fuzzier (at least, initially).

   • Non-interlaced With this option, the image is downloaded to the user's system one line at a time.

7. To see how long it will take for the user to download your file from the Web, click the Download tab. When you're through selecting options, click OK to save the file.

You might have noticed the Use Wizard button on the Transparency tab. Clicking this button displays a wizard that can help you use some of the more esoteric options of creating a transparent GIF. These include choosing a background color that will closely match the background you intend to display your GIF image against. This can be important if there is a lot of anti-aliasing in your image. I encourage you to explore the wizard to see what it has to offer.

JPGs

JPGs or, more properly, JPEGs (pronounced "jay-pegs;" it stands for Joint Photographic Experts Group ), is a somewhat misunderstood compression method. Images compressed using the JPG algorithm often get a bad rap from users who view the resulting images with 256-color systems ( otherwise known as 8-bit systems, for the amount of memory used to store individual colors). Because JPGs are 24-bit images, they often dither badly on 8-bit systems. On a 16- or 24-bit system, however, a JPG saved with a high-quality setting can be a fairly high-quality image. In addition, the JPG image can often be much smaller than the same image saved with another compression method.

In Windows, you can change from an 8-bit to a 16- or 24-bit "system" by simply changing the color depth you use. To do that, click the monitor icon that appears on the Taskbar, or open the Control Panel and double-click the Display icon. Then make the change in depth on the Settings tab, from the Colors list. To change from a lower color depth (8-bit) to something higher (such as 24-bit), the graphics card in your computer must support it. (A higher depth displays graphics with more detail, since there is a bigger array of colors from which to choose.) In addition, your monitor must be capable of displaying this larger palette of colors. Luckily, in Windows, you'll only see color depth settings that are supported on your system. I'll discuss the factors surrounding color depth in more detail later in this chapter.

Did You Lose Something?

Another misunderstood aspect of JPG files is that the compression algorithm used is known as a lossy compression method . In other words, some information is discarded during compression. Losing information might seem like a problem but, in fact, it saves a lot of space while changing the quality very little. With an appropriate compression setting, the lost information is not readily visible to the human eye. The savings derived from compressing an image might work against you, though, as you can see from Figures 42.9 through 42.11. (You'll learn how to change the compression factor you use when saving JPG images in a moment.)

Figure 42.9. Cliff in Clouds wallpaper saved with 1 percent compression.

Figure 42.11. Cliff in Clouds saved with 90 percent compression.

Figure 42.9 was saved at 1 percent compression and is 243,712 bytes. It closely resembles the original file, which is 252,576 bytes.

Figure 42.10 was saved in the same manner except that the compression setting was changed to 55 percent. I'm not sure what the final print will look like in the book, but on my screen it was very difficult to see any difference. This version, though, takes up only 43,008 bytes. Quite a large savings.

Figure 42.10. Cliff in Clouds saved with 55 percent compression.

The final JPG (Figure 42.11) was saved with a setting of 90 percent compression. Although this image will take the least amount of time to download from the Web, I think you'll agree that the last little saving in disk space (and download time) wasn't worth it. (Look at how chunky the clouds appear.) This file, which now takes up 13,312 bytes, isn't the best quality.

You can see, though, that the JPG format typically enables you to save a lot of space and bandwidth without compromising the quality of your Web graphics. Even so, you should be aware of a problem that can occur because of what the lossy compression method does to images that are edited and resaved in the JPG format. Figure 42.12 is a 300 percent blowup of the GrafX Design logo. Figure 42.13 shows the same logo edited and resaved as a JPG five times.

Figure 42.12. GrafX Design logo saved as a JPG.

Figure 42.13. GrafX Design logo edited and resaved as a JPG five times.

Notice the marks around the image in Figure 42.13. They're in Figure 42.12, as well, but they're not as noticeable. These marks are called artifacts and are a result of the way that the JPG compression algorithm works. Artifacts can appear in JPG images as a result of several things:

• A high compression factor used in saving a JPG image.

• Saving and resaving a JPG image.

• Any JPG image that contains sharp edges, such as a border, line, or large text. In such a case, the artifacts (square blocks of the wrong color, or color bleeding) will appear along the sharp edges.

Along with the added artifacts, resaving a JPG many times can actually add to the size of the final image. Luckily, in Paint Shop Pro 7, you can remove these artifacts from an image easily, restoring its quality. You'll learn this technique later in this chapter.

Lossless compression formats use a method of compression that assures that no information is lost. An image can be compressed and uncompressed many times with no changes to the image. Compared to lossless compression formats, lossy compression methods achieve much higher compression ratios, but they do so by discarding some of the information that makes up the image. Normally, the fact that these methods discard information is not a problem. The compression algorithms discard information in such a way that the changes are too subtle to be picked up by the human eye. The changes can become apparent, though, at very high compression rates or after successive compressions.

Why Use JPG?

After reading the last bit about JPGs and how this method discards some information, you may be wondering why you should use this format for your Web graphics. Take another look at Figures 42.9 and 42.10. Figure 42.9 is more than 243,000 bytes, and Figure 42.10 is just over 42,000 bytes! I doubt that you can really tell the difference between the two. I normally save with a much lower compression setting and was rather surprised at the quality of Figure 42.10.

Remember, too, that Figure 42.9 is a JPG that is already much smaller than the original 24-bit image. The bottom line is that if you have an image with a subtle blend of color, such as a portrait or a gradient, JPG is a good format.

Adjusting the Compression Factor on a JPG Image

When saving (or resaving) an image in JPG format, you can select the amount of compression you want to use. Compressing an image will reduce its size and, therefore, the time needed to download that file from the Web and to view ithowever, with higher compression levels, you might lose some of the image's definition. So play around with the compression factor until you find something with which you can live. Paint Shop Pro 7 contains a JPG optimizer that will let you easily play with your compression settings until you achieve the results you're looking for. Follow these steps:

1. Choose File, Export, JPEG Optimizer. The JPEG Optimizer dialog box appears, as shown in Figure 42.14.

   Figure 42.14. With the right compression factor, there's little difference between the original and the compressed image.

   

2. Select the compression factor you want from the Set compression value to box. You can use the before and after views at the top of the dialog box to gauge the best compression factor to use.

3. To quickly review download times for the current compression factor, click the Download Times tab.

4. Normally, JPG files are displayed over the Web in Standard format, one line at a time. To display them using the Progressive format (as a complete, but fuzzy image that's gradually updated), click the Format tab and select the Progressive option.

5. When you're through selecting options, click OK to save the file.

You might have noticed a button called Use Wizard in the JPEG Optimizer dialog box. Clicking this button displays the JPEG Wizard that walks you through the steps of optimizing your graphic. However, unlike the same wizard that is accessible through the GIF Optimizer dialog box, this wizard seems to muck up the options and actually make it more difficult for you to select the compression factor you want. Heed my advice, and this time, skip the wizard.

Removing Artifacts from a JPG Image

As you learned earlier in this chapter, if you save and resave a compressed JPG image, you'll eventually end up with artifacts. Artifacts can also appear if you compress an image too severely, or if you try to save an image with sharp edges in JPG format. Artifacts appear as a blocks or color bleeding on the image. Before you follow these steps, you need to remove any selections in the image. In addition, the image must be grayscale, or 24-bit, for this command to be available. So change the color depth if needed, and then follow these steps to remove the artifacts:

1. Choose Effects, Enhance Photo, JPEG Artifact Removal. The JPEG Artifact Removal dialog box appears, as shown in Figure 42.15.

   Figure 42.15. Restoring some quality to a JPG image.

   

2. Select the strength you want to use. The strength level determines how aggressively Paint Shop Pro removes artifacts from the image. Here, a higher strength value might give you a lesser number of artifacts, but it might also reduce a certain amount of crispness (contrast) in the image.

3. Select the amount of crispness you want to restore to the image. The crispness factor tells Paint Shop Pro to restore contrast to the image, where there might have been contrast in the uncompressed image. It does this while maintaining the small file size. The downside here is that adding crispness back to an image can generate anomalies that have the same adverse effect as artifacts. Use the before and after pictures at the top of the dialog box as your guide. Keep in mind that the better you make the image, the larger the resulting file will be.

4. Choose OK to apply your changes.

GIF or JPG?

The debate over which format is better still rages every so often on Usenet. My opinion is that each format has its place, just as the native formats of the various image programs do. Under some circumstances, a JPG beats out a GIF file in terms of quality and size; at other times the best choice is GIF. Personally, I take the time to view my images in both formats. I also take the time to play around with the number of colors when previewing my images as GIFs, as well as to try out the different palettes.

When I'm previewing a JPG, I try different compression settings. There really is no hard-and-fast answer. Even after creating more computer graphics than I can count, I still play around with each new image to get the best quality/size ratio that I can.