Exploring Graphics File Types

As you learned in article 6, three graphics file types are in common use on the World Wide Web:

- GIF (Graphics Interchange Format)

- JPEG (Joint Photographic Experts Group)

- PNG (Portable Network Graphics)

Each provides its own advantages and disadvantages. With each file type, you must consider, of course, some technical details, but there are also some legal pitfalls to watch out for. article 6 provides more details on these graphics formats.

GIF

GIF, the old standard, is a lossless file format, meaning that every single pixel in the image is always preserved when it is saved. There are tradeoffs with every method of saving images, and the drawbacks to GIFs are a fairly large file size for photographs and that the format is limited to a paltry 256 colors. Nonetheless, even though the GIF file format is pretty old, it remains one of the most common ones. Part of the reason for this, other than plain old inertia (it’s supported by every graphics program), is that GIF provides a fast and easy method of adding animation to a Web site, and it is ideal for compressing text and solid shape, low-color images.

Back in 1989, the GIF format was beefed up to include the capability to hold more than one image in a single file, and to display those images in sequence. Voil`a instant cartoons. Although each new image in the file added to the size of the file, of course, it was still the smallest kind of animation file.

GIF leads to PNG

GIF may have inadvertently been the father of PNG. In brief, the compression algorithm for GIF was patented in 1983. This compression algorithm was named after its three co-inventors Zev, Lempel, and Wallace (LZW) The rights to this patent were granted to Unisys. It was a wildly popular compression technology and CompuServe chose it as their compression algorithm for their implementation of GIF (in 1987 and a revised version in 1989). In 1993, Unisys sought to enforce its legal rights by licensing agreements with several large commercial information service companies (such as CompuServe) at very reasonable rates. In addition, it was offered free for private and nonprofit organizations. Nonetheless, something of a grassroots rebellion began among Web developers who sought to develop and implement alternatives to GIF. This reaction against GIF (although not very successful) and the unjustified image of Unisys as a corporate bully going after the little guy did much to propel the subsequent growth of PNG.

JPEG

The JPEG format (commonly seen with the .JPG file extension) was an improvement in many ways over the GIF file format. In most cases, it allows for much smaller file sizes. The tradeoff is that there is some degree of information loss. However, JPEG images are generally much more than merely satisfactory, and the ‘‘loss’’ in most cases is only apparent in a mathematical formula.

To the naked eye, the lossy image is as good as the original in almost every case. PNG

One of the results of some legal difficulties with GIF licensing was the creation of a competing file format totally free of all legal complications. The PNG format was designed specifically to replace GIF images by a group of people who wanted to free the World Wide Web of the licensing problem. While PNG files, in general, are competitive with GIFs, they do lack one major attribute you cannot do animation with PNGs. However, a newer version known as Multiple Network Graphics (MNG) files is in the works that will include a GIF-like capability to include several images in a single file and play them back sequentially.

Comparing the three

JPG has compression and 16.7 million colors. GIF 89a has animation, transparency, and interweaving. It does not have compression but can be made to seem compressed by deleting certain colors from the image before transfer across Internet. PNG provides the best of both worlds in that it has everything GIF has and more specifically multiple transparencies and the old JPG standby, compression. The only drawback to PNG is that it is not well supported by older browsers.

Choosing Image-Editing Tools

Unless you’re going to totally abandon all pretense of having anything to do with Web page graphics and hand all that mysterious stuff over to someone else, you need to have some notion of what needs to be done to make your Web pages work. Even if you don’t ever touch an image yourself, you’d better be aware of what is going on under the hood so that you have an idea of what can and can’t be done. It is impossible to do more than scratch the surface of such a complex topic in a single article. Thus, this is an overview. There are three graphics programs that anyone seriously interested in Web design should be familiar with Adobe Photoshop and Adobe Fireworks, Corel Suite (which includes Corel Painter and Corel Paint Shop Pro), the GNU Image Manipulation Program (GIMP), and an impressively fast graphics design suite, Xara Extreme. At least one of these (and perhaps all of them) belongs in your Web page creation toolkit. article 2 provides more details on Adobe’s Creative Suite 3 (CS3), which includes Photoshop and Fireworks.

Photoshop

Adobe Photoshop is the old, venerable workhorse of the graphics industry, familiar to every serious digital artist. Adobe Photoshop is important, not only because it has long been the industry standard but also because of the features it lacks features that can be extended with plug-ins. When you get right down to it, all of the major graphics programs are fairly similar, and the choice of one over the other is largely a personal matter of user comfort. When it comes to adding features, however, you need to pay attention to whether or not the program you’re using can handle Photoshop-compatible plug-ins. All four of the paint programs discussed here can handle these plug-ins.

Fireworks

Adobe Fireworks is one of the most impressive programs we’ve ever used. It is similar to Photoshop in layout and function. Fireworks, however, is a child of the Web, and was deliberately designed for the purpose of making graphics for Web pages, rather than having such functionality tacked on as an afterthought. It was planned to be used in concert with its companion program, Dreamweaver, the premier Web page-creation tool, but it is also a perfect standalone graphics program.