Using Pixel Shims for Fast Loading Effects

By Brad Culbert

What's a pixel shim?:

A pixel shim is simply a 1 pixel by 1 pixel image which is stretched out over a desired area on a web page to balance alignment and page layout. Figure 1.0 is an example of a pixel shim and how they can be used. The advantage of using pixel shims over other images for formatting is that their file size is tiny (around 108 bytes). Any browser which supports images will also support pixel shims.

Figure 1.0

• "pixelshim.gif" is the name of the 1 pixel by 1 pixel image
• "x" is the desired width
• "y" is the desired height
• "direction" is either "left" or "right" to wrap text around the shim. OR "top", "middle" or "bottom" to align the text next to the shim instead of around it.

That's it! These shims can be created and used in any colour, including transparent.