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

With the background color set, all you need to do is tell LView Pro to make that color transparent in the GIF file. You do this by choosing File, Preferences, Graphics File Formats, and clicking the GIF tab. Checking Save Transparent Color Information (GIF89a Only) ensures that LView Pro will designate your chosen background color as transparent (see Figure 5.14).

FIGURE 5.14  Instructing LView Pro to save transparent color information means that pixels painted with the background color will be designated as transparent.

Making a Transparent PNG

Creating a transparent PNG is a fairly simple matter when you’re using Microsoft’s Image Composer. To make a transparent PNG, follow these steps:

1.  Choose File, Save As to open the Save As dialog box (see Figure 5.15)

2.  From the Save as Type drop-down list, choose the Portable Network Graphics format.

3.  Make sure the Color Format selection is set to True Color.

4.  Choose the Keep Transparency box if you want to save the image with its alpha channel (this allows for the multiple levels of transparency). Otherwise, click the Transparent Color box and choose a color to act as the transparent color (just as you would with a transparent GIF image).

5.  Click the Save button to save the transparent PNG.

FIGURE 5.15  When doing a transparent PNG in Image Composer, you can choose multilevel or single color transparency.

---

Why Aren’t There Transparent JPEGs?

Transparency is only supported in the GIF format. A JPEG image cannot use a transparency effect because the algorithm used to compress a JPEG file is lossy. This means that during decompression, some pixels are not painted with the exact same color they had before the compression. These color changes are so small that they are usually imperceptible to the human eye, although you may be able to detect color differences after several cycles of compression and decompression. However, a computer can detect the difference and therein lies the demise of the transparent JPEG. To understand further, consider the following example:

You scan in a photograph of a field of flowers and you want to save it as a JPEG. The JPEG format supports over 16.7 million colors. Suppose that you choose color number 3,826,742 as the transparent color and save the file. During the compression and subsequent decompression, some data loss occurs in the file. As a result of the loss, a pixel originally painted with color number 3,826,742 is now colored with color number 3,826,740. The pixel was supposed to be transparent, but because its color number was changed by the compression, it will not be. The pixel will be painted with color number 3,826,740 and not let the background show through.

The reverse situation can happen as well. Suppose a pixel originally colored with color number 3,826,745 ends up being painted with color number 3,826,742. This is the transparent color, so the pixel will adopt the background color rather than color number 3,826,745, as originally intended.

As long as JPEG continues to be a lossy format, it will be impossible to use transparency with them. If you have to use a transparent graphic, you must use a GIF.

---

Making an Image Fade In

Even when image files are made as small as possible, it can still take a while for them to download. Initially, browsers had to load and process the entire file before it began to present the image onscreen. This meant users had to sit there staring at a blank screen for minutes at a time. Because Web-user attention spans are short, people would often give up in frustration and move on to another page instead of waiting for an image to finish downloading.

Since those early days, two approaches to reducing user frustration have emerged. Both involve having an image “fade in” as the image data is read by the browser. The user sees a blurry, incomplete image at first, but then the image quality improves as more data is read in. The key thing for users is that they immediately see an approximation to the finished image on their screens. This keeps them engaged and makes it less likely that they will move on to another page.

The two approaches to fading an image on to a page are actually variations on the same idea, modified for different storage formats. In each case, the image data is not stored in top-to-bottom order. Instead, the image data is reordered so that adjacent rows of pixel information are no longer stored contiguously in the file. As the browser reads down the file, it places the rows of noncontiguous data up on the screen. The result is an incomplete image that fills itself in as the rest of the image data is read. A GIF stored in this way is called an interlaced GIF. The same idea applied to a JPEG file yields a progressive JPEG or p-JPEG.

A different kind of fade-in effect is to have a black-and-white version of an image load first, followed by the full-color version. You can accomplish this by using the LOWSRC attribute of the <IMG> tag. LOWSRC is set equal to the URL of the black-and-white image file. This file loads and is rendered more quickly because it is generally much smaller than its full-color equivalent (less color information to store means a smaller file size). The full-color version is then rendered in place of the LOWSRC image after it is read in. This gives the appearance of the black-and-white image being “painted” with color.

Making Interlaced GIFs

Creating an interlaced GIF is a simple matter with LView Pro. To instruct LView Pro to save a GIF in interlaced form, select File, Preferences, Graphics File Formats, and then click the GIF tab (refer to Figure 5.14). Checking the Use Interlaced Format box will do the trick. To deactivate saving in the interlaced format, just uncheck the box.

Progressive JPEGs

P-JPEGs are relatively new, but LView Pro is current enough to have the capability to help you make them. To activate saving in a progressive JPEG format, choose File, Preferences, Graphics File Formats, and then click the JPG tab. Check the Use Progressive JPEG Compression Format box, and you’re ready to go (see Figure 5.16).

---

NOTE:  The two-dimensional interlacing scheme used in PNG graphics is implemented automatically when you save the file as a PNG.

---

FIGURE 5.16  LView Pro saves a JPEG in p-JPEG format if you instruct it to do so.

Creating Animated GIFs

One of the biggest crazes to hit the Web in the past year is doing animations with animated GIFs instead of relying on a dynamic document technique such as server push or client pull. The irony is that animated GIFs have been around since 1989—at least in theory. The GIF89a standard has always supported multiple images stored in the same GIF file, but, until recently, no one caught on that you can do Web animations this way.