Graphic Formats in Creating Commercial Websites

Graphic Formats in Creating Commercial Websites, There are two graphic formats that can be used in all three of the major current browsers without plug-ins: GIF and JPEG.

Graphics Interchange Format (GIF)

GIF was created by CompuServe as a way to compress and send image files. It presents a 256-color image in a fraction of the space required by uncompressed formats and is a very solid file, resistant to transfer errors. Although we feel it is in most ways inferior to JPEG, GIF 89a (a version of GIF) provides some very cool design options.

Transparency

 

The transparency option tells the browser not to display a certain color. Applying this option to the background of an image makes the image appear to be floating on the page, rather than being a rectangle (make no mistake, however, it’s still a rectangle). This is especially useful when you are using colored or tiled backgrounds.

This can be done in Paint Shop Pro (PSP) by making the color you wish to be transparent the selected background color (see Figure 12.1). Select the color you wish to make transparent with the dropper using the right-hand mouse button; this color will then appear in the background color box.

Figure 12.1. Selecting the background color in PSP.

When saving this GIF image in PSP, first click the Options button to bring up the GIF Transparency Options window. Choose Set the Transparency Value to the Background Color, and click OK (see Figure 12.2). Type the name of your image and click OK (just as you normally would).

Figure 12.2. Setting the transparency value in PSP.

You then simply place this GIF into your document with the <IMG> tag and abracadabra—you’ve created a transparent GIF (see Figure 12.3).

Figure 12.3. How our transparent GIF looks on the Web page.

Interlaced Files

 

GIF files can be interlaced, which means that they can be made so that the file loads in a way that makes it appear to be coming into focus, rather than loading from top-to-bottom. What’s really happening is that the browser is loading a line, skipping down a few, loading another line, skipping down a few, and so on. The browser is then filling in the empty spaces with colors based on the loaded lines. As more lines are loaded, the browser’s “guesses” are corrected, and the image appears to be coming into focus. (JPEG has a similar option, called Progressive, which is not as widely supported—see the note in the JPEG section, following )

This is semi-cool, in that the viewer can see what’s coming, but it’s not really a big deal. The big deal comes from the fact that you can “trick” the browser by loading several images into one GIF file, and then use the interlacing code to make the browser load images on top of one another in a progression. Doing this makes an animation, and that’s cool. To learn more about this, read the section on GIF 89a animations in Chapter 18, “Bells and Whistles.”

Joint Photographic Experts Group (JPEG)

 

JPEG is a very aggressive compression format that tricks the eye by omitting useless information. It’s been described as being a blueprint for an image rather than an actual image. This is to say that instead of drawing an image pixel by pixel, it paints with a broader brush,

telling the reader (or browser) to “paint this area this color, and this one that color.” This is a very simplistic way of looking at this very complex file format,

and more in-depth discussions are available in print and on the Web for those who want to know more.

Suffice it to say that JPEG is in almost all ways superior to GIF.

The color depth increases to 24-bit (16+ million colors), the file sizes are smaller, and the quality is close to that of uncompressed formats (such as TIFF and TARGA). The only time when we don’t use JPEGs are when the application requires a transparent background,

or when we want to create a GIF 89a animation. (See the discussion of GIF in the preceding section and the Quick and Dirty Guide,

“Get an Animation on Your Page in 30 Minutes,” in Chapter 18.)

JPEG not only enables you to present more colors in a smaller file,

but it also enables you to control file size with a Quality option. With the Quality option, you can control how much the JPEG will try to get away with,

or how much it will try to trick the eye. A few points difference in the quality of a JPEG may reduce the file size by 50 percent with little or no apparent effect on the quality of the image.

(This will vary from image to image, and you’ll just have to play with it to get it right.)


Note

There is something called a Progressive JPEG format that enables JPEGs to load in a similar way to Interlaced GIFs (only more smoothly). The one problem with this is that very few bitmap manipulation tools enable you to open a JPEG that is in this format, and until recently, few browsers have recognized the format at all. Therefore, working with progressive can be a pain. (On the other hand, it’s a good theft-prevention measure—once we had a would-be thief actually write to complain that they couldn’t open a JPEG we’d made!)


What’s on the Horizon?

 

The answer to this question depends on which way the WWW is turning. There seem to be two major camps here: one betting on higher bandwidth, and the other betting on more system-reliant file types.

The big-bandwidth folks believe that we’ll all have a T1 in our home in the next year or so. This kind of connectivity will enable people to download huge, complex graphics, movies, high-quality sound, and so forth at such a rate that file size won’t be as much a concern.

Although we like the idea of this brave new world, the fact that many of the bottleneck problems occur within the Net itself lead us to believe that flawless throughput is a long way off,

regardless of the speed of each individual terminal connection.

The system-reliant folks believe that we’ll all continue to buy faster and faster systems,

and that we’ll be able to rely on these monster CPUs to process heavily compressed files. A good example of this is called FIF (Fractal Image Format).

This format allows for incredible compression of graphics files because the file actually contains just the instructions for “painting” a picture. It’s somewhat similar to a vector file in this respect.

While it takes even a hot Pentium system a few seconds to decode an image,

the final product is better than most bitmap files because the image does not pixelate.

What, you want our opinion?

We feel that bandwidth will always be an issue, because everyone up the ladder (from you, to your ISP, to the telecommunications companies) will always try to get by with the least bandwidth possible. Because of this, we think that there will always be motivation for creating more and more effective means of compression. While it’s not likely that everyone will run out to buy the Schmentium-based PC just because it will decompress files a few seconds faster, it is likely that people will continue to purchase systems on the leading edge (in order to run the latest applications), and that compression and transfer strategies that are reliant on these systems will be the most cost-effective solution to increasing content and interactivity in both the short and long term.

Leave a Reply

Your email address will not be published. Required fields are marked *