This page: Blank Transparent Image.

SURFING IN THE DARK ...A Beginner's Odyssey
	1. INTRO, RESOURCES, TOOLS	2. HTML BASICS	5. TABLES	8. JAVA SCRIPT
		3. APPLYING HYPERTEXT	6. GRAPHICS	.
		4. COLOR	7.COUNTERS	.

BLANK .GIF IMAGE (SPACER)

(If you're viewing a hard copy, you may find this article on the
internet at URL: http://www.primeshop.com/html/jumpidx.htm )

You're invited to visit the Primeline Website at http://www.primeshop.com/ Come see us!

An Example ( 1/2/98 )
We'll use a blank image, named "blank.gif" to open up a space between the two words below:
BLANK DEMO
Here's the HTML:
<FONT FACE=ARIAL SIZE="+1" COLOR="#0000CC">BLANK <IMG SRC="blank.gif" HSPACE=20>DEMO</FONT>

You can see that the blank image is given the HSPACE (Horizontal Space) attribute, which creates an open space to either side of the blank. Since the blank is only 1 pixel wide, the total space is 41 pixels - 1 for the image, and 20 on each side.

Similarly, the blank image can be used to accomplish specific vertical spacings with the VSPACE attribute:
BLANK
DEMO
Here's the HTML:
<FONT FACE=ARIAL SIZE="+1" COLOR="#0000CC">BLANK
<BR><IMG SRC="blank.gif" VSPACE=20>DEMO</FONT>
The VSPACE attribute causes the vertical spacing - there are no blank lines called for in the HTML.

The blank image may also be used to insert open space between images in exactly the same way.

Creating the image (There's one you may download below.)
Using a graphics program such as Paint Shop Pro or LView Pro, you may save any image in .gif format. Our goal in this exercise is to create a "blank" image which will be invisible in the browser window and use it to create spacers for text or other images. Obviously, it will not really be blank - we'll use the "transparent" save option to be sure that whatever size the blank is, it will remain invisible. Your graphics program offers you a choice of several "Save_As" format options, such as .BMP, .jpg, .tiff, .gif, etc. We'll choose the .gif format, the only one which offers these four versions:

Version 87	Nontransparent, noninterlaced	A noninterlaced image will display nothing until the entire image file has been downloaded. An interlaced image will download in "passes" so that its browser space is immediately filled with a fuzzy image whose quality improves with each "pass". A nontransparent image will display all of the colors in the image. A transparent image features one color which has been chosen to be invisible in the browser. The background color or image will show through any tranparent color.
Version 87a	Nontransparent, interlaced
Version 89	Transparent, noninterlaced
Version 89a	Transparent, interlaced

We want for this blank spacer to download in "zero" time, so we'll make it 1 pixel by 1 pixel in size. Problem is, you can't see a 1x1 image, even if it's not transparent! To make one,

(1) select black* or white* background color, choose the "File_New" option in your graphics program, and set the new image size to, say, 40x40 so it's visible.

* You want to be sure that the image color is "all-browser-safe", which will not induce dithering when reproduced. Safest bet is to choose either pure black (0,0,0) or pure white (255,255,255).

(2)Resize the image (Edit_Resize) to 1x1. Now it's too small to see, but it's there.

(3)Select File_Save_As, select the .gif89a option, specify the name "blank.gif", and save to your images directory. Be sure to specify that the transparent color is the background color (hint: in LViewPro, select Retouch_PalletteEntry_Dropper, and click anywhere in the 40x40 image. Other graphics programs offer more straightforward selection.)

Great! You've just created and saved a 1x1 image which will be invisible on your page, no matter how you "stretch" it with the HEIGHT and WIDTH attributes.

A ready-made spacer:
For those of you who'd just like to download one you can use, here it is:
????Whaaaat? That looks like a big white square with a black border. How can I use that?

OK, OK, so relax already. If we put up an invisible dot, you'd have a hard time finding it - right? It's actually a 1x1 transparent black pixel (honest!), which we've displayed at 20 x20 using the HEIGHT and WIDTH attributes. Since it's transparent, it looks white (the white background shows through), so we had to add the BORDER attribute to show you where it is. To save the image, just right click inside the box and select the "Save_Image_As option." You won't get the box, and the image you save will be 1x1.

A great twist:
(With hearty "thanks!" to Dmitry Kirsanov in Moscow.)
There's a transient problem with blank images in that they will display a "ghost" image during download, then disappear and become invisible when download is complete - e.g., if you make the blank image 20 pixels wide (WIDTH=20), it will display a 20-pixel-long line until the page is fully loaded. For an excellent workaround to the probelm, use the HSPACE and/or VSPACE attributes and leave the image at 1x1. For instance, to create a space 20 pixels wide, you'd specify the HSPACE as 10 (HSPACE defines the clear area to both the left and right of the image; thus, you'd want 10 pixels on each side to create a 20 pixel blank width...actually 21, including 1 for the blank image.) The relevant HTML is: <IMG SRC="blank.gif" HSPACE=10>

Back to HTML Basics

Back to Graphics Page