Spacer .GIF

A spacer .GIF is an obsolete technique in web design and HTML coding. They were used to control the layout of HTML elements on a web page, at a time when the HTML standard alone did not allow this.

The technique was used around the same time as table-based layout. The web page was considered as a grid-based layout and it was desired to set the size of each grid section independently, as pixel-based sizes. The grid could be coded simply in HTML by use of the <TABLE> tag, but this did not allow the size of table cells to be set individually.

It was recognised early on that although the size of table cells could not be set directly, each cell could contain an image through an <IMG> tag. The size of image tags could be set independently, with their WIDTH and HEIGHT attributes. The table cell would then re-size itself automatically to just contain this image, thus re-sizing itself. It was also realised that the displayed size was controlled entirely by the attributes and was independent of the actual size of the image file used (although a real image file^{[note 1]} was still needed). Accordingly the same image file could be used for all the many spacer images needed on a web page. The only requirement was that this image was invisible, either by being the same colour as the page, or by being transparent.

Spacer .GIFs themselves were small transparent image files. GIF files were used as it was a common format that supported transparency, unlike JPEG. These files were commonly named spacer.gif, transparent.gif or 1x1.gif.

Drawbacks

• Designs produced often looked perfect on the designer's monitor, but could look entirely different on the reader's screen, for the most trivial of reasons. Many designs became simply unreadable, especially as small-screen and mobile devices became popular.

• Implementing a spacer .GIF-based design was extremely tedious. This was particularly so to make small changes to an existing design.

Blame for the invention of the spacer .GIF technique has been variously apportioned and claimed, but is generally placed with David Siegel in 1996.^[1][2][3]

Obsolescence

The technique was obsoleted by a number of factors:

• CSS allowed sizes of HTML objects to be set directly. Although CSS' adoption was slow, owing to poor browser implementations and developer inertia, the simple ability to set sizes like this was available and usable from the early days in 1997.

• Table- and grid-based layouts were replaced by fluid layouts. These abandoned the attempt to control two-dimensional layout between elements. Instead the elements would be offered to the reader's browser and the browser would place them as best it could, according to the size of the reader's browsing window.

• Fluid design layouts made the setting of page element sizes on the user's browser less important. This was particularly evident where it removed the need to set sizes in absolute units such as pixels. As the web designer had never been able to control the size of the reader's screen window, the attempt to set sizes rigidly had always been a mistake.

References