Image Files | Transparent Backgrounds
Transparent Backgrounds
Sometimes inline images have more visual impact if the "background is removed". For example, consider the following two inline displays of the same image, the first with the background displayed and the second with it suppressed:
We note that only one color can be removed in this way, and it will be
removed for all occurrences in the figure. Therefore, this method is most
effective if the background is a single color that
appears only in the image background.
Making Backgrounds Transparent
The PC version of giftrans is a DOS program, not a Windows
application. In practical terms, this means that you use giftrans
by opening an MSDOS window on your PC and typing commands, rather than by
clicking buttons or by making selections from menus.
Fortunately, giftrans commands are not very complicated, so the
program is still quite easy to use even if it does lack a fancy interface.
Suppose we have a gif image with a solid color background in a file named visback.gif, and we want to create a version of the image that has a transparent background and store it in a file called transback.gif. We can accomplish this by typing the following command in our MSDOS window:
Here the -T tells giftrans which color in the original image to render transparent in the new image, viz. the background color in the original image. As another example, we could type the following in our DOS window to produce the lower of the above U.S. maps, usa-trans.gif, from the upper version, usa.gif:
If we want to save the image with the transparent background to the same file as the original image with the visible background, we can use a two step process:
|
giftrans -T usa.gif > temp.gif
ren temp.gif usa.gif |
The first step temporarily saves the new image to the new file temp.gif, but then the second step renames this new file to the same name as the original file. This has the effect of replacing the original version (visible background) of usa.gif with the new version (transparent background).
Note that the background in the image created by giftrans will be transparent only when the image is viewed in a browser. If the new image is viewed with other graphics software, the background will still be visible.
Also note that the above versions of the commands assume that the command is given while in the same folder as the image that we want to use the program on and that either (a) giftrans is in this same folder, or (b) the location of giftrans has been added to your DOS variable PATH. Otherwise you will have to specify the path to the giftrans program when you want to execute it.
Making Any Color Transparent
The above is all you really need to know to use giftrans for
"removing" the backgrounds in gif images.
But giftrans program can also make transparent
any single color in the original gif image.
It is not just limited to doing this for the background color. But to do this,
we must be able to tell giftrans which color it is that we want to
make transparent. We can identify the color to change either by referring to
its six digit hexadecimal rgb code,
or by referring to its index in the image's color table.
As an example of the former, we can make transparent all occurrences in an
image of, say, pure red, with the command
We've seen some previous discussion of these hexadecimal representations of colors, but the notion of specifying a color in an image by means of its index in the color table may sound quite mysterious. But doing this is also actually very easy. There are graphics programs that will display the color table used for any image, and thus show us the index of each color in the image. But giftrans itself can also provide us with this information.
As a very simple illustration, suppose we have a gif image in a file redgreen.gif that consists only of two colors, red and green, such as below:
in our MSDOS window. (Here the -l option tells giftrans to
list the colors in the image's color table.)
If we type the above command, giftrans should respond with the
following information in this case:
Global Color Table:
Color 0: Red 255, Green 0, Blue 0, #ff0000 (red, red1)
Color 1: Red 0, Green 255, Blue 0, #00ff00 (green, green1)
|
That is, the color in this image with index 0 has rgb components of Red 255, Green 0, Blue 0, and a hexidecimal representation of #ff0000. And the color in the image with index 1 has rgb components of Red 0, Green 255, Blue 0, and a hexidecimal representation of #00ff00. (Note that the color index ranges from zero to one less than the total number of colors in the image.)
We can use this color index information to have giftrans make the red transparent in the image by using the command:
This will store the following image in file temp1.gif:
This will store the following image in which the green has been made transparent in file temp2.gif:
In a similar way, we can use giftrans with the -l option to show the color table for any image, and use the resulting information to find the index of any color in the image. giftrans can then be used with the -t option and the color index information to make any color in the image transparent.
Another giftrans Option
The giftrans program can also be used to convert any color in a
gif image into any other color. This procedure can be repeated as many times
as desired, so that any or all of the original colors of the image can be
replaced by specified other colors.
The full set of giftrans options, with short explanations, can be seen by simply typing giftrans followed by return in the DOS window.
Example for Your Homepage
Let's now use the above technique to add an image to your homepage with its
background removed. We shall give you a .gif file to download for the example,
but feel free to download a different .gif file if you prefer.
Go to the following address:
click the right mouse button on the schoolhouse image at the top of that page and save the file to your folder on your local disk with the default name (school4_logo.gif). Note that in what follows we assume that the file you just saved and your homepage are in the same folder.
Now carry out the steps outlined above to remove the (gray) background from this image, saving it under the original name in your folder. Then go to your homepage file in the same folder and insert the following text at a convenient place (use the mouse to copy and paste):
<img src="school4_logo.gif" hspace="15" align="left"> Here is an example of some text that should wrap around the preceding figure of the schoolhouse. The align="left" command says to position the figure to the left, and the hspace="15" command says to leave 15 points (there are about 72 points in an inch) horizontal space around the image. |
Save the changes and reload the homepage in the browser; if all is well, you should then have the schoolhouse icon (or another image if you so chose) positioned left, with text wrapped around it on the right and the background of the image should be transparent.