Additional Graphic Techniques

Progressive JPEGs

It's important to note that you cannot interlace a JPEG. However, a technology has been developed to enable JPEGs to progressively render. This is the progressive JPEG format. FrontPage, as well as many contemporary Web imaging programs, enables you to create JPEGs that render progressively.

As mentioned earlier in the chapter, the JPEG algorithm works by reducing rectangular sections of color data within an image. If you conceptually reverse this process and imagine data flowing in to the rectangular blocks, you will be visualizing the way a progressive JPEG renders . An integrated series of blocks creates the image and first appears with little graphic data. With each new delivery of information from the server, the JPEG blocks receive more data until the download is complete.

Whereas interlaced GIFs first appear fuzzy and then get clearer, progressive JPEGs first appear blocky and blurry.

NOTE

When serving progressive JPEGs at high speeds, the blurry effect is reduced or eliminated, improving the visual experience.

A JPEG image can be made into a progressive JPEG using FrontPage's Picture File Type dialog box. In this dialog box, you can specify the number of progressive passes. These passes are divided by the total time to load the image. If you have a fairly small JPEG image that takes five seconds to load with a setting of five passes, each pass will take roughly one second. This will create a rippling effect as the graphic comes into view.

TIP

Standard GIFs and JPEGs scroll into place rather than render progressively. Some people prefer this look. Still, most usability studies and anecdotal information suggest that progressive rendering helps keep individuals on a page. Therefore, in many cases it's usually wise to progressively render your graphics.

Transparency

Transparency can be described as an effect that places your graphic on a clear piece of tape. This means you can place that tape on a background and the background will show through the tape.

This is particularly effective when you're creating graphics that sit on a background— especially graphics that aren't a standard rectangular shape.

The technique takes a little bit of time, patience, and an excellent hand and eye to learn.

Again, FrontPage can create transparent images, but your favorite Web graphics program is likely to have a helpful method by which to make an image transparent.

NOTE

Only GIFs can be transparent. JPEG technology does not include a transparency option.

Assume that you want to place a text header image over a background texture. The text selection is ornate, with a lot of circular shapes . Follow these steps to create a transparency:

1. Open a new page in Normal view.

2. Add a background image by selecting F o rmat, Bac k ground. This opens the Page Properties dialog box with the Formatting tab selected.

3. Check the Background Picture box, and then use the Browse button to locate the background image.

4. Click OK to accept the background image. The view should tile the background image.

5. Load the header image by selecting I nsert, P icture, F rom File. If the file doesn't include transparency information, it will look similar to Figure 44.7.

   Figure 44.7. Adding a non-transparent image to a page with a color.

   

6. Click the image to access the Picture toolbar; click the Set Transparent Color tool.

7. The cursor will change to look like an eraser. Click the color in the image that you want to make transparent.

8. The color you clicked becomes transparent (see Figure 44.8).

   Figure 44.8. A transparent GIF appears seamless over background color.

   

TIP

Creating transparent GIF images can leave ragged edges around your image. To reduce the visibility of this edge, try to match the background color in the image to the background color on the Web page. This is something you'll want to do in the program you are designing your graphics in.

GIF Animation

Another inherent feature of the GIF format is GIF animation. This very handy effect is actually an exploitation of GIF technology. This chapter briefly mentions animation because the GIF animation is directly tied to the file format that parents it.

GIF animations are essentially several GIF images stitched together into one file. You can create an animation effect by crafting your images carefully . FrontPage cannot be used to create GIF animations, but it can place any such animations on a page.

FrontPage won't show the animation in Design view (it will only show you the first frame of the animation) but will show you the animation if you view the file in Preview view.