A spacer GIF is a small, invisible GIF image that is used in web design and HTML coding. They were used to control the visual layout of HTML elements on a web page, at a time when the HTML standard alone did not allow this. They became mostly obsolete after the adoption of Cascading Style Sheets.
The Cascading Style Sheets (CSS) standard diminished the use of spacer GIFs for laying out web pages. CSS can achieve the same effects in a number of ways, such as by changing the margin or padding on a given element or by explicitly setting a relative position. If used properly, CSS reduces the amount of code necessary in a web page.
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
HEIGHT attributes. To avoid the computational cost of rescaling the image, which could be considerable on contemporary hardware, the
VSPACE attributes were recommended over setting the height and width.
The displayed size was controlled entirely by the attributes and was independent of the actual size of the image that was used. Accordingly, the same image file could be used for all the spacer images needed on a web page, leveraging browser cacheing. The only requirement was that this image was invisible, either by being the same color as the page, or by being transparent.
Designs produced often looked perfect on the designer's display, but could look entirely different on the reader's display. Many designs became simply unreadable, especially as small-screen and mobile devices became popular. Implementing a design with spacer GIFs could be extremely tedious - particularly when making small changes to an existing design.
The technique was obsolete for designing web pages by the beginning of the 21st century. Implementation of 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 usable by about 1997.
In addition, table- and grid-based layouts were replaced by fluid layouts in an attempt to respond to the growing use of mobile devices to access web content. These design methodologies 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.
- Rønn-Jensen, Jesper (2006-03-03). "Justaddwater: Who invented the Spacer GIF". Justaddwater. Retrieved 2006-11-26.
- Siegel, David (1997-10-02). "The Web is Ruined and I Ruined it". XML.com. O'Reilly Media. Retrieved 2015-07-08.
- "BLANK .GIF IMAGE (SPACER)".
here'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.