Back to the Web Developer's Journal Main Page
internet.com
side nav bar

Transparent and Interlaced GIFs for Good-looking Web Graphics. Here's how to do it.
To download free demo versions of the software discussed in this article, go to our Web Tools Download Page, or simply click on the underlined name in the article at right.
When you've read this, try these:

HOW DID THEY DO THAT???

Find out in:
Amazing HTML



Site Map

Jobs at webdeveloper.com


Check out our Web-based
Discussion Groups:

Check out and join our email-based Mailing Lists for Web developers.


Developer Channel
FlashKit
Jobs.webdeveloper
JavaScript.com
JavaScriptSource
JustSMIL
ScriptSearch
Streaming Media World
WebDeveloper.com
WebReference
XMLFiles
WDVL
Discussion Groups Book Reviews Software Reviews Download Web Tools

How to Do It - Where to Get the Tools You Need

Transparent and Interlaced Gifs

by Bruce Morris
The Advantage of Transparent GIFs
A Plain Ol' GIF A Transparent GIF
Viewing this page with a non-graphical browser is like kissing your sister. Viewing this page with a non-graphical browser is like kissing you sister.

Transparent GIFS
Many people have their browsers set to display a solid background of white or some other color other than the default gray that is the default Web page background. Few Web sites use the old fashioned grey backgrounds anymore. Gifs with colored backgrounds can look a bit weird floating over a page with a different colored background. This means transparent GIFs will usually look better than plain ol' GIFs.

Transparent GIFs let the color of the background they are displayed on show through the parts of the graphic you have selected to be the "transparent" part. In the process of converting a GIF to transparent, one color in the GIF can be selected as the one to be replaced and become transparent. If your graphic was originally created with a white background, white would probably be the best color to set as the transparent color. Remember though, everything in the graphic that is white will become transparent. If a graphic on a white background of a face with white eyes is converted to a transparent GIF with white being the transparent color, the eyes, and anything else in the graphic that is white, will be transparent also. The color of the browsers' background will show through the eyes. For this reason it might be wise to make the eyes blue in this particular instance.

Nowadays most graphics creation and manipulation programs let you make your gifs transpasrent and/or interlaced with just the click of a button. Here are a few tools that can help out.

If you're a die-hard MS-DOS user and want a command line to work from, giftrans converts GIF 87a to GIF 89a formats (a necesary first step) and makes them transparent. Once you figure out how to use it, it's easy but be prepared for some head banging until you get the hang of it.

Another possibility is Image Alchemy, which converts over 75 image formats. Image Alchemy is available for DOS, OS/2, SCO UNIX, and Mac.

If you want a no-brainer, we strongly recommend LviewPro. It's a Windows program and lets you convert GIFs to transparent and make them interlaced all in one pass. It can do lots of other useful graphics stuff too and it is extremely easy to use. You simply open a GIF file and then save it. You're done. You can skip the interlacing if you like or skip the transparency part. You can open multiple files at once.

Flush Your Cache, Hit Your Reload Button and See Which GIF Seems to Load Faster
An Interlaced GIF A Regular, Non-interlaced GIF
Viewing this page with a non-graphical browser is like kissing you sister. Viewing this page with a non-graphical browser is like kissing you sister.

Interlaced GIFs
Interlaced GIFs (and JPEGs) are graphics that seem to load in pieces or stages as if a venetian blind is being opened and closed in front of the graphic as it loads. Medium sized to large GIFs seem to load faster if they are interlaced. My experiments indicate there is little, if any, actual difference in loading times but interlaced GIFs seemto load faster. For one thing, surfers can get an idea of what the graphic will look like before it is done loading and can make up their minds more quickly whether to hang around to see it in all its loaded glory or surf on. For this reason, I almost always save my GIFs as interlaced. The program I use for manipulating graphics for my Web pages, LViewPro, allows you to simply leave the selection "Save As Interlaced" checked so everything you do is automatically converted to interlaced without having to think about it. After creating this page and playing around with it, it seems to me that the non-interlaced GIF above completes loading faster but the interlaced one is recognizable much sooner.

Remember - most of this stuff is shareware - download it, try it out, and register it.
Back to the Web Developer's Journal
Contact WDJ   •    Suits!   •    Propheads!   •    Ponytails!
Discuss   •    Subscribe   •    Search


internet.com

IT | Developer | Internet News | Small Business | Personal Technology | International | Search internet.com | Advertise | Corporate Info
Newsletters | Tech Jobs | E-mail Offers

internet.commerce
Be a Commerce Partner                                
  

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers