Improve Download Speeds with Pixel Shims
Posted: Mon Mar 23, 2009 3:38 pm
If your web layout uses solid blocks of color, one great way to improve the download speed of your site is to use "pixel shims".
A pixel shim is a single pixel of color saved as a .gif file. This file typically requires 700-800 bytes of file space instead of the thousands of bytes of larger files. You can create shims in any color in any paint program (Paint Shop Pro, Photoshop, Paint, etc.) that can save the result as a .gif. I typically create the files with names like "px_white.gif", "px_ltgray.gif", etc. so they're easy to find when I'm using Web Builder.
In the Web Builder page, create a new image and select the desired pixel shim color from your file list. Web Builder will open it at its actual size of one pixel. Grab the sizing handle (if you're able) or go to the Properties Inspector and increase the size (50 x 50 is good to start). The single pixel is now a block of color that can be adjusted to any size desired.
This technique is great for producing vertical lines one or two pixels wide (or any size you need), or blocks of color that can be used as a background for text. They load very fast and re-using the same shim in a different image means the single pixel is downloaded only once. The only downside is that the resulting image cannot have rounded corners (you'll have to turn to WB's shape object if that's a requirement).
I have created a collection of shims in the colors I use most often and use them over and over when creating web sites. Perhaps you can find a use for this technique in your sites.
A pixel shim is a single pixel of color saved as a .gif file. This file typically requires 700-800 bytes of file space instead of the thousands of bytes of larger files. You can create shims in any color in any paint program (Paint Shop Pro, Photoshop, Paint, etc.) that can save the result as a .gif. I typically create the files with names like "px_white.gif", "px_ltgray.gif", etc. so they're easy to find when I'm using Web Builder.
In the Web Builder page, create a new image and select the desired pixel shim color from your file list. Web Builder will open it at its actual size of one pixel. Grab the sizing handle (if you're able) or go to the Properties Inspector and increase the size (50 x 50 is good to start). The single pixel is now a block of color that can be adjusted to any size desired.
This technique is great for producing vertical lines one or two pixels wide (or any size you need), or blocks of color that can be used as a background for text. They load very fast and re-using the same shim in a different image means the single pixel is downloaded only once. The only downside is that the resulting image cannot have rounded corners (you'll have to turn to WB's shape object if that's a requirement).
I have created a collection of shims in the colors I use most often and use them over and over when creating web sites. Perhaps you can find a use for this technique in your sites.
