Channels ▼

The Single Pixel GIF The Single Pixel GIF

We've spent a long time investigating almost every aspect of images within HTML. Let's close the series with a demonstration of how important a single pixel can be.

The Single Pixel Miracle

Every webmaster needs a single pixel in his or her bag of tricks. Used correctly, this pixel can make your web authoring life much easier.

To save you all the hard work, I'll be a sport and give you a pixel: . You can't see it, of course, but right-click in the blank space to save this pixel to your machine.

This pixel is actually a single-pixel GIF89a image with the single pixel set to be transparent. This means that anything that appears behind this pixel, like a background image or color, will show through. As a diagnostic tool, the single pixel in the image is actually bright green. If you use this image and you get a green spot in your document, something is broken in either the image or your browser.

Of course, a single pixel doesn't cover much space in your document. Luckily, we can use the height and width attributes to stretch the pixel to any size we need. Thus enlarged, that single pixel becomes one of the most useful layout tools you'll ever have in your web toolbox.

Need to indent a paragraph by exactly 36 pixels? Just place

     <img src=1p-trans.gif height="1" width="36">

in front of the paragraph, and you'll get the right indent every time. Don't believe me? Check out the line before the example code, where I did just that.

Need to create a block of white space, perhaps with some text flowed around it? No problem. Stretch your pixel to the desired size, add the align attribute of your choice, and away you go. This paragraph, for example, has a 25x50 block of white space to its left.

This pixel also comes in handy when you need to create empty table cells of a certain size. Stretch the pixel to the desired shape and place in a cell. The cell will shrink to fit the image and reserve the space you wanted.

The other nice thing about the single pixel image is that it is small (only 43 bytes) and can be used over and over in a single document, being pulled from the browser's document cache each time.

Custom Rules and Blocks

When you tire of using a transparent single pixel, branch out and tinker with a single colored pixel. Again, I'll save you all the time and trouble by giving you a single black pixel to get you started: . You can use any common image editor to adjust the color as needed.

A single colored pixel is the perfect tool for creating custom rules and blocks of color in your documents. While the <hr> tag is great at creating horizontal rules of varying width and constant height, a single pixel can be stretched to create a rule line of any height and width. The downside, of course, is that your single-pixel rules will not have fancy 3D edge effects.

Even so, you can create special paragraph delimiters, like the one surrounding this paragraph, by stretching and aligning that one pixel like this:

     <center><img src=1p-black.gif width="100" height="25"></center>

You can create bar-like vertical rules at one side of a paragraph by combining tables and your single pixel image. This paragraph should have a five-pixel rule to its right that changes size as the height of the paragraph changes. Go ahead, adjust your browser's width and watch the magic. How'd I do it? Take a shot on your own, and then View Source with your browser for the answer.

Once you get on a roll with a single pixel, you'll find all sorts of handy uses for this tiny tool. Take a week to experiment and write me with your best tricks. When we return next week, we'll begin a new series on frames.

Previously in Tag of the Week:

Background Images in Tables
Don't Try This At Home
Image Map Basics, Part 2: Client-Side

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.