Why single pixel GIFs?

The use of single-pixel GIFs in web pages is not new. Transparent 1-pixel GIFs (also called 'shims') are used as a layout aid to force indentation or positioning of HTML objects in a page.

Coloured, non-transparent GIFs, can be used to generate simple graphics. Starting from the smallest possible GIF image, one can use the HEIGHT and WIDTH attributes of the IMG tag to render simple graphics (See the included examples).

Recently I needed some 1-pixel GIFs, and started wondering if a collection of such images existed. I could have made just the ones I needed, but since this need already arose a few other times in the past, it ocurred to me that a collection of single-pixel GIFs was an obvious thing to have around for a webmaster/web designer. After some extensive searches on the net, I only found the few examples already known: the transparent (shim) GIF and a few ones with basic colors.

Thus I set myself to produce a complete set of all web safe colors as 1-pixel GIFs. Half an hour later, the whole set was ready. Now, if you need single-pix GIFs you can download them from genoma.unsam.edu.ar/~fernan/web_safe.html

They are availble in the following formats:

The collection contains 217 single pixel GIFs, representing all web safe colors (216) plus a transparent (shim) GIF.
Every file is named after its corresponding color, in hexadecimal notation (the one you normally use in HTML pages and CSS stylesheets).

Some often used colors are:
Color Hex GIF
blackFFFFFFffffff.gif
white000000000000.gif
red FF0000ff0000.gif
green00FF0000ff00.gif
blue0000FF0000ff.gif

This collection is in the public domain. It can be redistributed and copied without restrictions. I only ask you to also distribute this file and the example.html page with the GIF files.

Why would you want to generate graphics in this way?

Well, if you are into scripting/programming, and you are generating HTML pages with your programs, you have basically two choices:

For simple graphics, sometimes single pixel GIFs do the job well. This strategy is of course limited if you also need precise control of the vertical layout.

Obviously, if you just need to generate a few graphics, your best option is to produce your images with a specialized application, be it a spreadsheet with graphing capabilities, drawing programs, or any number of desktop graphical applications.

See some uses for these GIFs.

© 2002 by Fernán Agüero