Using Pixel Shims for Fast Loading Effects
By Brad CulbertWhat'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
| Code for pixel shims: <IMG BORDER="0" SRC="pixelshim.gif" WIDTH="x" HEIGHT="y" ALIGN="direction"> |
- "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.