Interlaced and Transparent GIF Files

Interlaced Gif Files

When a browser loads an Interlaced GIF file, the file loads at first with less detail, then becomes more and more in focus as more of the file is downloaded.  Interlaced files display each part of the file as it is downloaded, and the blurriness of the image decreases as more and more of the file is loaded. On slower networks, this effect creates the illusion of faster image download time when compared to non-interlaced GIFs,  which download from top to bottom.  Here is an example of an  Interlaced GIF file.

Creating Interlaced GIF Files

Creating an Interlaced GIF file is usually an option when a GIF file is saved. Many image composition and image editing programs can save GIF files in the Interlaced format.

Transparent Background GIF files

We can make the background of GIF files Transparent so that they appear to float on the web page.

Making a GIF File Transparent Using Microsoft Image Composer.

ion resourcesStart Image Composer. From the File menu, select Open.

ion resourcesFrom the dialogue box, select the file history.mic on your diskette. History.mic is an Image Composer file that contains blue text, a yellow circle and a simple image. Saving the composition as a GIF file would produce a file with a white rectangular background. History.gif would look great on a web page with a white background, but on any other background, the file would display  as a white rectangle with text and graphics inside.

ion resourcesMake any modifications to the composition that you want.

ion resourcesFrom the File menu, select Save for the Web.

ion resourcesIn the Save for the Web Wizard, click the radio button "All sprites inside the composition area". Click Next.

ion resourcesClick the radio button "Let the web page background show through". Click Next.

ion resourcesIf the web page you are creating this graphic for has a background with a solid color, such as solid white, click the radio button "My web page's background is a solid color". If your web page has a background image, click the radio button "My web page's background is a tiled image". The purpose of this step is to prevent a halo from forming around objects in your image, such as around the blue letters.

ion resourcesIf you chose solid color, you should tell Image Composer what that solid color is. First open your web page in a browser, or in an editor such as Front Page. Click the Color button. Click the small eye dropper button and move your mouse cursor over part of the web page. Click once to sample the background color. Make sure Image Composer is the current window, and click Next.

ion resourcesClick Save. Now a dialog box appears that requests several pieces of information. Make sure the Transparent color check box is checked. Then click on the color box to the right to select the color in your GIF file that will be transparent. Click the eye dropper button, and then move your mouse pointer into part of the image that will be the background. Click once to sample the background color. The color box should change from magenta to the color of your background. Click Save. Save the file to your diskette as history.gif.

ion resourcesNow, open Front Page and start the Front Page Editor. Open the HTML page, history.html, on your diskette. Insert history.gif from the diskette. Note that the background is transparent.



Illinois Online Network

University of Illinois
Office of the Vice President for Academic Affairs
363 Henry Administration Building
506 South Wright Street
Urbana, Illinois 61801-3620