Spacer GIF
This article needs additional citations for verification. (January 2018) |
A spacer GIF is a small, transparent
History
David Siegel's 1996 book Creating Killer Web Sites was the first known to publish the Spacer GIF technique. According to Siegel, he invented the trick in his living room.[1][2]
The
Usage
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 resize itself automatically to just contain this image. It was also realized 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 color as the page, or by being transparent.
Spacer GIFs themselves were small transparent image files.
Drawbacks
Designs produced often looked perfect on the designer's display, but could look entirely different on the reader's display. Different screen resolution, browser rendering engines, as well as user font preferences, could change the layout of the design considerably. 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.
Obsolescence
The technique was obsolete for designing web pages by around 1998. 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 basic ability to control element placement as enabled by the use of spacer GIFs was usable by about 1997.
In addition, table- and grid-based layouts were replaced[citation needed] 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.[citation needed] 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.[citation needed] 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
- ^ sic – actually an image document - a file wasn't needed, but was invariably used.
- ^ 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.
External links
- Single-Pixel GIF Trick @ CKWS, by David Siegel
- Spacer GIF example
- CSS2 Box Model Specification, World Wide Web Consortium
- PHP example to programmatically generate the smallest GIF possible
- spacer representations as file and data urls in both GIF and PNG format
- The Tiniest GIF Ever
- nginx Module ngx_http_empty_gif_module
- Spacergif.org spacer image API