Improve Download Speeds with Pixel Shims

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
User avatar
gofrank
 
 
Posts: 181
Joined: Sun Dec 30, 2007 2:43 am
Location: Florida, USA

Improve Download Speeds with Pixel Shims

Post by gofrank »

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.
Billing clients for your freelance work? Try Minute-2-Minute, the project management, timing, and billing system. Perfect for web developers who charge by the hour. FREE 45-day trial.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

Thanks,that saves a lot bytes what you can use for something els on the page.

Maybe a download with the images :)
User avatar
gofrank
 
 
Posts: 181
Joined: Sun Dec 30, 2007 2:43 am
Location: Florida, USA

Post by gofrank »

Sure, Eddy.

This zip file has most of the basic colors. If you need more exotic color matches, you will have to create them.

Enjoy!
Billing clients for your freelance work? Try Minute-2-Minute, the project management, timing, and billing system. Perfect for web developers who charge by the hour. FREE 45-day trial.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

Thank you,I tested and a big "shape" from 1 pixels have about 35 bytes :D
Post Reply