Design & Publishing . / . WEB . / . Pixelsmith . / . Beware the Single Pixel-Trick . / . How it works

The Pixelsmith - WebDesign & Review

The single pixel gif? (continued)
How the single-pixel trick works

(The single pixels used here have been set to 12x12, with 2 hspaces, and 1 vspace.)
The single-pixel trick only works in concert with the height and width size tags. It works best with the tags:

<vspace=n> 
<hspace=n>


__ These dictate to the browser the space around the graphic rather than the size of the actual graphic. (Using height and width tags actually scale the single pixel which is less desirable if trouble does happen.) It then appropriately pushes the HTML text forward, giving the illusion of spacing.
__ First the graphic has to be loaded. Generally it's loaded from another directory. The browser logs into that directory, grabs the file, then has to compute the graphic window size before carrying on with the rest of the code. In reality, the code streams forth before the graphic is actually placed, but it still has the work to do. While this is not altogether bad, if the trick is used once on a page, chances are it will be used many times. We understand too, that the image is cached in the browsers' memory cache (file) the first time it is loaded. That's a given. However each instance of the image still requires a call to the cache, and its accompanying size routine. Some pages, even ours, have had over 100 of these little gems embedded.

__ All this adds up to work for the browser and the bandwidth. While it does not usually add that many 'k' to the download file, it does require additional time for computations for size. So, the 'size' is deceptive. A page that loaded in seven seconds in late 1995, today takes sometimes triple the time -- and perhaps more.

Before moving on to the next section, let's play with a...

Single Pixel Demonstration
The following is a demonstration on how the gif file aligns itself in relation to the base-line of the type in use. Note we've bordered each gif - named "ONEp.gif" - with a single-pixel border so you can see the actual file. For an interesting comparison, here's a screen shot of a typical Macintosh 15 inch monitor, and what this demonstration looks like in Netscape 3.0

This single-space GIF is aligned "top"
_______ this is a standard line of type
This single-space GIF is aligned "bottom"
_______ this is a standard line of type
This single-space GIF is aligned "middle"
_______ this is a standard line of type
This single-space GIF is aligned "middle" set to 20 pixels
_______ this is a standard line of type
This single-space GIF is aligned "middle" set to 12 x 2 pixels
_______ the height is shorter, and the content gets pushed
This single-space GIF is aligned "middle" set to 20 x 8
_______ the height is the same, but the content gets pushed
This single-space GIF is aligned "middle" set to 40 x 8
_______ the height is the same, but the content gets pushed
This single-space GIF is aligned "middle" 4 x 4, Hspace, Vspace 20
_______ Note that Hspace and Vspace add space on equal sides of the gif.

Previous: The Single-Pixel Trick _ Next: Time is everything

Thank you for visiting WebDesign & Review at http://www.graphic-design.com/web/
Notes: The screen shots herein represent the copyrighted works of their respective owners, and are used here for editorial demonstration purposes. please read and be aware of our Legal Properties & Disclaimers document. Not all areas of the online environment allow special characters such as the registration and trademark marks. This file will alert you to proprietary works that cannot be duplicated or distributed. Copyright 1996, 1997, Showker Graphic Arts, for the The Design & Publishing Center, ALL RIGHTS RESERVED. WebDesign & Review, Pixelsmith, WebEye are all trademarks for The Design & Publishing Center. Other products mentioned in these pages are the registered trademarks of their respective owners. Updated Today.