Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Alignment problems are less of an issue with a custom rule, but you should keep a couple of rules in mind:

•  Assume a screen width of 640 pixels and keep your rule sized accordingly. Don’t let the rule’s width exceed 640 pixels.

•  The default alignment for a rule placed with the <HR> tag is centered. You can replicate this effect for your custom rule by placing the <IMG> tag for the rule graphic between <DIV ALIGN=CENTER> and </DIV> tags.

•  Use a row of about 70 dashes for your ALT text in the <IMG> tag so that text-only users can get a rule effect as well.

FIGURE 5.9  If you are using a custom bullet graphic, you will also be responsible for things such as text wrapping and alignment.

FIGURE 5.10  The White House’s Web site uses a red, white, and blue image for horizontal lines, instead of using the <HR> tag.

Graphic Storage Formats

Technically, Web graphics can be stored in any format, but only two formats display inline on all of today’s popular graphical browsers: GIF and JPEG. A third format, PNG, is gaining ground, and you should expect to see full inline support for PNG graphics soon. Other graphics formats have to be displayed by a helper application, which is launched by the browser when it detects a format it can’t display.

---

NOTE:  Microsoft Internet Explorer 4 supports the inline display of Windows Bitmap (.BMP) graphics in addition to GIFs and JPEGs.

---

GIF

Graphics Interchange Format (GIF) was originally developed for users of CompuServe as a standard for storing image files. The GIF standards have undergone a couple of revisions since their inception. The current standard is GIF89a.

Graphics stored in GIF are limited to 256 colors. Because full-color photos require many more colors to look sharp, you shouldn’t store full-color photos as GIFs. GIF is best used with line art, logos, and icons. If you do store a full-color photo as a GIF, its palette is reduced to just 256 colors, and the photo will not look as good on your Web page.

In spite of a limited number of colors, the GIF89a standard supports the following three Web page effects:

•  Interlacing—In an interlaced GIF image, nonadjacent parts of the image are stored together. As a browser reads in an interlaced GIF, the image appears to fade in over several passes. This is useful because the user can get a sense of what the entire image looks like without having to wait for the whole thing to load.

•  Transparency—In a transparent GIF, one of the colors is designated as transparent, enabling the background of the document to show through. Figure 5.11 illustrates a transparent and nontransparent GIF. Notice in the nontransparent GIF that the bounding box around the circle is visible. By specifying the color of the bounding box to be transparent, the background color shows through, and the circle appears to be sitting on the background.
Transparent GIFs are very popular, and many of the graphics programs available today support the creation of transparent GIFs. On the PC, LView Pro is one program that creates transparent GIFs. PhotoGIF is a plug-in to Photoshop that enables you to create both transparent and interlaced GIFs. Jasc’s Paint Shop Pro is a reasonably priced graphics program that supports transparent GIFs. You can even use Microsoft FrontPage (or its companion program, Microsoft Image Composer) to create transparent GIFs from existing images.

•  Animation—Animated GIFs are created by storing in one file the sequence of images used to produce the animation. A browser that fully supports the GIF89a standard is designed to present the images in the file one after the other to produce the animation. The programs that enable you to store the multiple images in the GIF file also enable you to specify how much delay should occur before beginning the animation and how many times the animation should repeat. Web designers are making widespread use of animated GIFs because they are much easier to implement than server push or even Java animations (see Figure 5.12). A server-push animation requires a CGI program to send the individual images down an open HTTP connection.

FIGURE 5.11  The background color in a transparent GIF takes on the page’s background color to make objects in the image appear to sit right on the page.

FIGURE 5.12  Gateway animates the computer screen on its site with the faces of several users.

JPEG

Joint Picture Experts Group (JPEG) refers to a set of formats that support full-color images and stores them in a compressed form. JPEG is a 24-bit storage format that allows for 2²⁴ or 16,777,216 colors! With that much color data, it is easy to see why some form of compression is necessary. Typically, you can control the degree of compression at the time you create the JPEG file. Keep in mind that the more you compress the image, the more you reduce the image’s sharpness.

Although JPEG is great for full-color images, it does not permit some of the nice effects that GIF does. Transparency is not possible with JPEG images because the compression tends to make small mathematical changes to the image data. With the exception of a server-push approach, animation is not yet possible with JPEGs. An analogy to interlaced GIFs exists, however. The progressive JPEG (p-JPEG) format has recently emerged, which gives the effect of an image fading in the same as an interlaced GIF would.

PNG

The GIF Format began to fall out of favor with the Internet community when, in 1990, Unisys and CompuServe announced their intention to collect royalties for use of the format. The rationale behind this announcement was that GIF was developed by CompuServe and used a compression technique developed by Unisys, so the two companies were entitled to compensation. Most of the rest of the world did not share this philosophy, however, and, as part of the fallout, the Portable Network Graphics (PNG, pronounced ping) working group was formed and began drafting a proposal for this new, open format. In October 1996, the World Wide Web Consortium accepted the proposed PNG standard as a recommendation.

The PNG format is able to support the two major effects that originally made GIFs so popular: transparency and interlacing. In fact, PNG is an improvement over GIF in that it implements these effects in a more flexible way. Specifically, for transparency, PNG provides for an alpha channel that supports up to 254 levels of partial transparency—in contrast to the GIFs approach, which supports only two levels: totally transparent or totally opaque. For interlacing, PNG employs a seven-pass, two-dimensional interlacing scheme that presents initial image data eight times faster than one-dimensional GIF interlacing.

---

NOTE:  PNG is also an improvement over GIF when it comes to compression. Compression ratios are typically 5% to 25% higher, with no data loss.

---