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