Popular Graphics Formats

The following are three of the most popular types of graphics file formats on the Web:

- Graphics Interchange Format (GIF)

- Joint Photographic Experts Group (JPEG or JPG)

- Portable Network Graphics (PNG)

Let’s take a look at these in a bit more detail.

Graphics Interchange Format (GIF)

The GIF graphics format is usually used to save icons, cartoons, logos, and the like. It supports 256 colors, and until it was revealed that its data compression algorithm, LZW, (named after the initials of its three co-inventors, Lempel-Ziv-Welch, in 1984) had been patented by Unisys (and that the copyright was being enforced for its use), it was probably the most common image-saving format utilized. It is still compatible with almost all browsers on the market today. There are two versions of GIF files:

- GIF 87 This is the basic, original version of GIF files originally developed by a group of engineers from various software companies and sponsored by CompuServe.

- GIF 89a This version supports transparent GIFs, animated GIFs, and a process of rendering images called interlacing.

Interlacing is a technique which loads an image through a series of alternating lines. It is a technique that improves image quality through several refreshes until the full resolution rendition comes up clear and crisp.

Non-interlaced GIF images are produced at full resolution, one line at a time from the top of the screen until the entire image is rendered. Each line of data is clear and crisp, but it takes time download the entire image. Both ways of loading a graphic can be time-consuming depending on the visitor’s Internet connection, although the advantage of interlaced GIFs is that you are able to get a preview of the whole picture. That preview may allow you to determine if you want to wait for the final download or just pass on it.

Another way to speed up the decision-making process is to use low-resolution (low-res) images to speed page download time. If you’re using a very large image that you know is going to take forever to download, you may want to consider adding a low-res image to the mix as well. Low-res images are poor-quality copies of an image. They may, for example, be black-and-white or grayscale versions of a full-color image. Because of the smaller file size of low-res images, they don’t take anywhere near as much time to download. In HTML, you can specify that a low-res image be displayed on the Web page while the full version of the image is downloading, giving your visitors some idea of what they’re waiting for.

Transparent GIFs

Transparencies are a way to blend GIF images into the Web page background. A transparent GIF is an image of an object where a selected color does not show when it is placed on the page, thus allowing the Web page background to show through the selected color instead. A transparent GIF is an image, saved in GIF format, that has a color that you may elect not to display (in other words, you deselect it by using a tool such as Dreamweaver’s Magic Wand utility). The color effectively becomes transparent. Thus, if you were to select an image of, say, a hibiscus in a white background, you could select the white background of the GIF to become transparent. Then, when you transferred the image to your Web page, only the hibiscus would appear against your existing background.

Animated GIFs

These are typically small drawings that are used in sequence to create the illusion of movement. Some can be comforting (as in the picture of an American flag flying in the breeze), but most are annoying (such as a dancing baby) and the novelty of movement soon wears out. Therefore, if you use them, they may actually have the effect of driving people away from your Web site because they are quite tired of seeing, say, a monkey bouncing from a tree, or the sudden appearance of a hideously colored smiley face appearing from the sun. You should be quite content that the physical constraints of this media (the book you are holding in your hands) prevents us from presenting actual illustrations to you. However, there are numerous collections of animated GIFs available for your eager perusal at such sites as http://www.animationfactory.com, http://harrythecat.com/dorret/, and http://www.gifanimations.com.

A good rule of thumb to use in deciding on use of animated GIFs is to ask yourself if you would want the animation (for example, an ugly dancing baby in diapers) to reside forever in your memory. If the answer is ‘‘no,’’ then do not inflict it on another. Used properly, however, animated GIFs can be effective, and much more bandwidth-friendly than Flash animation, which is discussed later in this article.

Joint Photographic Experts Group (JPEG, or JPG)

The Joint Photographic Experts Group produced the JPEG (or JPG) standard in 1992. This format is best suited for photos because it can reproduce up to 16.7 million colors (as opposed to the maximum of 256 colors in GIF images). The size of the image can be controlled by compression algorithms that control the degree of detail contained in a copy of the image transferred across the Internet. The higher the compression, the greater the loss of detail will be when the file is decompressed and rendered on the receiving side. Compression is used to speed up the transfer of data. Both GIF and JPG use compression algorithms. Larger file sizes take longer to download, especially over a slow connection. With compression, you reduce the file size and reduce the image quality, but you also reduce the time it takes to load on a page. The reduction of image quality is referred to as lossy. An image that is not compressed when it is transferred is referred to as a lossless image. GIFs are much better at compressing simple artwork and line art. JPEG’s inverse discrete cosine transforms are excellent for photographs.

Like its GIF cousin, a JPEG file can be rendered on the receiving browser just as an interlaced GIF image is, and for exactly the same reason to allow a progressively better view of the image as it downloads.

Portable Network Graphics (PNG)

The PNG graphic format was developed to incorporate many of the favorable features of JPG and of GIF (without that little licensing issue associated with the latter). This format was designed primarily as an image-transfer program to send images across the Internet. PNG has all the features of GIF (interlacing, transparency, and animation), plus it also supports as many colors as JPG (16.7 million). Unlike JPG, however, it uses a lossless data compression algorithm. This means that no data is discarded or ‘‘lost’’ in data transfer.

PNG compression ratio is 10 to 30% smaller than GIF. It is a lossless compression format which works best with solid blocks of color. It is not widely supported by older browsers, though it is available through plug-ins. The PNG format is consistent with the open standards philosophy of the development of the Internet. When it first came out in 1996, it suffered from the ‘‘new kid on the block syndrome’’ because it was not backwardly compatible with earlier versions of popular browsers. However, as time passes, compatibility is becoming less of an issue, and its advanced features make it a very attractive image format.