|
Spacer GIF
Web Design & Development Guide
Spacer GIF
Home
Up
Prior to the adoption of
Cascading Style Sheets (CSS), the spacer GIF was a
transparent image, often used to control blank space within a web page,
that can be resized according to the width and height dimensions it is
given. Spacer GIFs are not browser specific. The reason a spacer GIF is
invisible is so that an HTML developer can create a table cell and fill
the background with a specific color that can be viewed through the
transparent spacer GIF. For instance, let's say the developer wants to
create a blue box that is 500 x 500 pixels wide. Instead of using a separate blue graphic that is 500 x
500 pixels (taking up additional bandwidth), the developer can specify
the table cell background color and specify the dimensions of the spacer
GIF that already exists.
To create a spacer GIF, simply open a new Adobe Photoshop, Macromedia
Fireworks, GIMP (or whatever graphics software you have) file with a transparent background and with the
dimensions 1 pixel by 1 pixel. You only need it to be 1 pixel as you will
specify the height and width in the HTML. Normally you would not do this with a
GIF image but since the spacer GIF is transparent, stretching it will not
matter. Save the image as a transparent GIF named "spacer.gif".
The use of spacer GIFs has declined due to the prevalence of
CSS for laying out web pages, which achieves the same effect by changing the
margin or padding on a given element.
CSS is preferable as it, if used properly, reduces unnecessary code in a web
page. Blank 1x1 GIFs are still occasionally used to fix a PNG rendering bug in
Microsoft Internet Explorer versions 5.5 - 6.
History
David Siegel's 1996 book "Creating Killer Web Sites" was allegedly the first
to publish the Spacer GIF technique. According to David Siegel himself, he
invented the trick in his living room, while others were probably inventing the
same trick at around the same time.
[1]
According to a blog comment by Joe Kleinberg, he actually invented the
technique earlier. However, it has not been possible to confirm further, with
screenshots, code or similar.
[2]
External links
-
^ Justaddwater (2006-03-03).
Justaddwater: Who invented the Spacer GIF. Justaddwater.
-
^ Justaddwater (2007-02-11).
Justaddwater: Who invented the Spacer GIF (part 2). Justaddwater.
Home
Up
Cascading Style Sheets
Printer friendly
Brochureware
Digital strategy
DOM scripting
Fahrner Image Replacement
Microformat
Progressive enhancement
Rollover
Spacer GIF
Techniques for creating a User Centered Design
URL redirection
Web Interoperability
Web modeling
Web template
Web-safe fonts
Website architecture
Website wireframe
|