Tutorial on transparent Gifs

Transparent Gifs

"Transparent Gifs are not really transparent."


The 'A' above is a white, 'transparent' Gif, sitting above a blue table cell. Like all Gifs, it is made up of pixels, which, when viewed up close, are quite 'jaggy'. However, when viewed on a screen the edges seem quite sharp.	If we examine a close-up of the top of our 'A', we see jaggy pixels. They are the small squares of color. Notice that, in the case of this transparent Gif, the white pixels are merging into the blue background around the 'A's edge.	Moving in closer, we see that the white pixels merge into the blue. Why do you think this merging occurs? Remember; this Gif was designed to sit above a blue background.

Notice this 'A', which was not designed to sit above a blue background, is jaggier than the first (see above).	Moving in closer, we see that the white pixels do not merge into blue. Compare this image with the one above it.	The white pixels sit against the blue, in a 'staircase' of jaggy blocks. Merging the pixels into the background color creates the 'illusion' of smoothness that a Gif would lack, otherwise.

Let's try that again, with a transparent yellow T, against a table cell of green. This 'T' looks okay, and if we...	...zoom in we notice that the pixels are again merging with the green background...	...to give the illusion of a smooth edge, when viewed from a distance.

Placing the three transparent Gifs from the Green page onto a white page, we see the mismatched pixels.	A transparent Gif is designed with a background in mind, and needs to be placed on that background only.	As you can see, this transparent Gif is blending into green, which isn't much good for a white page!

The face above is a transparent Gif designed for the violet background.	Here's the same Gif against red. Notice the violet colored jaggies.	Again, the mismatched Gif against black.
This is the way those same Gifs would look if they were prepared properly, for the correct backgrounds.

To sum up, transparent Gifs are not really transparent. They are merely given coding that allows certain programs, like browsers, to mask out parts of the image on screen. The edge of a Gif, which is very pixelly or jagged, is deliberately 'sprayed' (for want of a better word) with the background colors, to make it appear to be smooth. This is camouflage.

A common problem occurs when we hear the name 'transparent', and assume that the image really is transparent. We might take a transparent Gif from a red page and want to use it on a white page, and wonder why it has red pixels around it. When ordering transparent Gifs, you should describe the background color, or the background image being used.

"When I open my transparent Gif, it has a block of white around it!"

This happens when you open a transparent Gif in a program that cannot handle transparent Gifs. Not all graphics programs can. The white block was always there - it's just that it was being artificially 'masked' out by your browser. Unless your graphics program can open and view transparent Gifs in its 'transparent mode', you should not save them, or re-name them using that program. If you do, the Gif will revert to a normal Gif, without transparency.

You can view transparent Gifs in your Browser. For both Netscape and Internet Explorer, go to File / Open Page (or Open) and click 'Choose File' (or 'Browse' in IE). You will notice in the dialog box that comes up has a choice of file types at the bottom. Its default is 'HTML files'. Click the arrow there and change the selection to 'All Files (*.*)', (or select a file type in IE), then locate the directory your pictures are saved in. Once you have selected it, click on 'Open' or 'Okay' to view.

"I viewed a transparent Gif with my browser, but it is against a white background. How can I change my browser's page color, or screen color, so I can see if the Gif is really transparent?"

In Netscape you go to Edit/Preferences, then click 'color'. If the box 'use Windows colors' is ticked, un-tick it. Click the button 'Background', and select whichever color you like. Then check the box that reads 'Always use my colors, overriding document.' In Internet Explorer, you go to Tools / Internet Options, then click 'Colors'. Uncheck 'Use Windows colors', then click button 'background' and select your color. Remember to change all this back after you have viewed the Gif.

Homepage Back to FAQ's Top Back to Tutorials E-mail