Single Pixel GIF Trick

n the early days of web design, HTML limitations inspired designers to find all sorts of workarounds in order to have control over the layout of pages. One of the most significant of these workarounds was the single pixel GIF trick, using a single pixel GIF and modifying it with the height, width, hspace, and vspace attributes of the IMG tag.

The GIF itself is tiny and requires virtually no download time. And, depending on whether the single pixel is transparent or not, the result can be used as a spacer, or as a horizontal or vertical rule.

Before the advent of Cascading Style Sheets (CSS), the single pixel GIF was the only thing that provided reliable control of white space across browser versions and platforms. Though the trick is still useful, setting CSS margin and indent properties is a better solution for spacing when your readers are using CSS-compliant browsers.

How to make and use a single pixel GIF

1. Use your graphics program and create a one-pixel-by-one-pixel indexed color image of the color you wish to use. Or, to create a spacer GIF, make it transparent.
2. Save the image. Store it with a name you can remember and easily use, like “onepixel-green.gif” or “spacer.gif.”
3. If you are editing HTML by hand:
   1. At the point in the HTML file where you want to use the single pixel GIF, insert the image tag:
      
   2. Add the height and width (or hspace and vspace) attributes, setting them at the size you’d like the rule, box, block, or spacer to be:
      
   3. Add an align attribute to specify the alignment:
      
   4. End the tag:
      
   5. Preview your page in the browser.
4. If you are using an HTML editor:
   1. Place the single pixel GIF where you want it on the page
   2. With the single pixel GIF highlighted (don’t click elsewhere on the page, it will be very difficult to highlight it again)
   3. Enter the new height and width (or hspace and vspace) values into the properties palette.
   4. The single pixel GIF will visibly adjust on the page to reflect these values.

Single Pixel GIF Trick: Rules and Blocks

Single pixel GIFs can create rules and blocks.

One of the nice things about HTML is that you can reach the same end through several routes. Look at this series of green boxes:

• Box #1 is a 36 x 36 pixel GIF.
• Box #2 is a 1 x 1 pixel GIF sized to 36 x 36.
• Box #3 is a table cell set to be 36 x 36, with a background color of #009900, the same green in which the GIFs were created.

The one-pixel GIF trick lets you create blocks, boxes, and rules from a tiny 1 pixel file. Some people keep a library of commonly used colors and call on the one-pixel gif anytime they want to create a block of color effect, rather than creating a new, larger graphic from scratch.

Let’s look at some examples:

To create a 500 pixel green horizontal rule take a green single pixel GIF and simply set height to 1 pixel and the width to 500 pixels.
	To create a 100 by 10 pixel red vertical rule take a red single pixel GIF and simply set height to 100 pixel and the width to 10 pixels.
		To create two 100x 50 blocks, just enter the image tags and set widths to 100 and heights to 50.

Single Pixel GIF Trick: Spacers

Single pixel GIFs can let you position objects and add indents.

Before CSS, single pixel transparent GIFs were often the best way to add margins and borders and position objects. With the growing acceptance of CSS, it is best to try CSS properties such as margin and text-indent before resorting to one pixel GIF spacer tricks.

Using a transparent GIF, you can position graphics precisely. To have two graphics exactly 50 pixels apart from one another, you would place the transparent single pixel GIF between then and simply set height to 1 pixel and the width to 50 pixels. Click on the example to see the code that created it.

This can also be done by setting the hspace to 25 instead of changing the width setting.

You can also use this technique for text positioning. To add a 8 pixel tab indent to a paragraph, you could insert a transparent GIF sized to 8 pixels wide and 1 pixel high before the text. Click on the example to see the code that created this effect.

To add a 12 pixel tab indent to a paragraph, you could insert a transparent GIF sized to 12 pixels wide and 1 pixels high before the text. This gives you the effect of changing the margin, which you can also now do with the CSS text-indent property.

Transparent one-pixel GIFs can be stretched and used as a quick spacer solution.

One-pixels GIFS in a variety of colors, combined with height and width attributes in the image tag, are a quick “cheat” for making boxes and rules of solid color.