If you have ever received one of my emails or read one of my posts in one of the alt.discuss newsgroups, you have probably noticed that my signatures load pretty quickly, even though there is alot of stuff in them. I use quite a few "tricks" to ensure that this is the case.

 

On this page, I will list some of the tricks I use when building my email signatures. If you need help with BASIC email signature construction, I highly recommend you go to DRAAC.COM and check out the Gifs123 section.

 

TIP #1
USING WIDTH/HEIGHT ATTRIBUTES
ALWAYS use height/width attributes in your <<>img src<>> tags, even if the image DEFAULTS to the size you want.

This helps the browser (your webtv unit) to "format" the images quicker. The browser will read your program and assign the height/width you have defined for each image. If you DON'T specify them, then it must wait until the image loads before it can assign the proper values.

By establishing the attributes right away, this allows the unit to go ahead and load the REST of the email/post while it deals with the images. In other words, the text of your email will show while the signature is still loading. Ever seen someone's email that you had to wait FOREVER to read it while it loaded up? This was probably the cause.

Note, the same holds true for TABLES as well. If you use tables in your signature, try to define the height/width of each of them too. You can't always figure the HEIGHT of a table (especially if you have text in it) but width is pretty easy. You can set the WIDTH to a certain pixle amount, or percentage, and the unit will compensate by making the HEIGHT greater, if it has to. regardless, having ONE dimension fixed is better than NONE at all.


TIP #2
REMOTE LINKING
One of the biggest problems that most NON-webtv people have with webbers today is remote linking. Simply put, remote linking is when a webpage or email signature in some way LINKS (using <<>a href<>> <<>img src<>> <<>bgsound src<>> or any number of other methods) to one of their files. As a rule, most sites dont mind a link to the site ITSELF; it's when we lnk to their music or an image ON that site that the problem occurs.

This issue is discussed in full HERE.

Suffice it to say that remote linking is considered VERY bad form among the net "community". Not only that, but by linking to a file on a site OTHER than your own, you slow down BOTH sites. The more people linking, the slower each site involved will run. And, the more sites YOU are linking to in order to get your files, the longer your page/email will take to load. You can solve the problem by TRANSLOADING the file to your OWN homepage first, then linking from there. That way, all of your files are "pulled" from the same place.

If you need help with transloading, you can find it on the same page.


TIP #3
REDUCING FILE-SIZE OF IMAGES
NOTE: Many on-line tools will not work with images in JPG format. If you have problems getting a JPG to "crunch", just refer to TIP #4 and convert the image to a GIF. Look for the section set off * * LIKE THIS * *

Take ALL of your images to an on-line tool such as NetMechanic or GifCruncher and reduce the size of their files. This will mean giving up a little resolution and some colors, but it can mean a drastic improvement on the load-time of each image, and thus the entire page. How much improvement depends on how much "crunching" you do. You won't be able to tell the difference in many of your reduced images on WebTV. Only computers really pick up the differences up to about 50% reduction. But you will DEFINITELY se the difference in load-times!


TIP #4
RESIZING IMAGES PERMANENTLY
This is a bit like the REDUCTION trick. Lets say you have an image that defaults to 500x300 in size. But, when you USE it, you are always resizing it to 250x150. Now, the width/height attributes you add to your <<>img src<>> tag will help your overall eamil/page to load faster, but the browser STILL has to load the original file. You can decrease the file size by permanently resizing the original image, which will allow the NEW image to load faster.

IMPORTANT: This method is for (non-animated) images ONLY! If you use this method on an animated image, you will only re-size the first frame of animation. For animated images, you will need to pull it apart frame-by-frame and then recombine them. The tool I am using in the below example WILL do this. However,it is a MUCH more complicated process. There is a tutorial on-site for dealing with animated images. Read the section on changing animation speeds and apply what i have written here...the two methods will blend together.

To do this, take each image you want to resize to IMAGE MAGICK. Fill in the URL of the image in the box provided and hit VIEW. The page will take a bit to load your image (depending on how busy the server is), then it will transfer you to the "workstation". The current width x height of your image will be displayed in the status bar (bottom of your screen). Note that this is a great way to get the default size of an image if you do not know it!

Look for the "folder tab" marked RESIZE and click on it. On the next page, ignore everything but the text box. Input the width x height you want the image to become and add a "!".

EXAMPLE: 250x150!

The "!" tells the tool to ignore all of the other options below the text box. Now, click the RESIZE button.

Once the tool reloads again, you will be on a page very similar to the previous one. Your image will be displayed on it, and it may or may NOT be sized correctly on this page; doesn't matter either way. Just click the OUTPUT tab and wait for the tool to load the next page.

* * If you came to this TIP to find out how to convert an image from JPG to GIF, this is the section you are looking for! Just ingore all of the RESIZING instructions.* *

Choose which file type you want the image to be (GIF or JPG). I HIGHLY recommend you choose GIF. Many imaging tools WON'T let you use JPGs. This is one of the few that does. You will find it MUCH easier to work with an image if you convert it to a GIF right now.

Once you are done, hit the OUTPUT button. When the tool reloads, you will be on a new page, with a "thumbnail" of your image. Click on the thumbnail, and you will get the image by itself, which you can now transload.


TIP #5
EMBEDDING A WEBPAGE
Note that THIS trick does NOT improve the loading of another webpage. It may even cause some loading problems if you use it on a site.

Most webbers build their entire email signature in the box provided. This requires your email to "reach out" for each and every file you use (all of your images, all of your music, etc.). However, you can limit this to just TWO file "reaches" if you use this simple method:

Go to whichever server hosts your homepage and log on. Create a new page (we will call it "sig.html" for now). On this page, construct your ENTIRE email signature, using all of the tricks I have shown you so far. REMEMBER (and this is important) The width of the average webpage is about 560 pixles, whereas your email is only a little more than 400 pixles wide. Keep this in mind while building your SIG, so that your page wont be to wide to display properly on your email. If you have an image or table that you want to cover the entire width of your email, set it to width="100%" or width=400 (pixle is better than % for loading purposes). Note that using the % will display differently on a page than in email!

Once you are satisfied with the lay-out of the page, SAVE it and go to your email's SIG box. In it, type the following code:

<html> <noembed> <body bgcolor="color" background="URLofAnImage" text="color"> </noembed> <table width="100%" background="URLofAnImage"> <tr align=center valign=middle> <td> <embed src="URLof sig.html"> </td></tr></table> </body> </html>

Select the colors you want to use, and insert them in the "color" attribute. The background elements are only necessary if you are using an image in your email background; if not, remove both elements from this program. The table prevents your background from "shifting" when posting in a newsgroup...if you have ever seen it, you will knw what I mean. The <<>noembed<>> and <<>/noembed<>> tags, placed the way they are, are technically bad coding. However, it prevents the "bordering" effect so common in emails, where your SIG seems to be set "on top of" the rest of your email. The <<>embed src<>> tag tells the browser where to find your page holding your signature, and to place it into your SIG.

See? This way, your email only has to reach out 3 times for 2 different files, instead of once for each file you use in your SIG!

The only time a SIG does NOT load quickly when embedded (IF you have used the other tricks as well) is when the server on which it is hosted s running slow. But guess what? If that is the case, all of your files will be slow ANYWAY.

Another advantage to doing your SIG this way is that, if you change your lay-put on the webpage signature, it will update on ALL of your email/posts that have it embedded. An email signature that is written in your SIG box won't.


 


 


FastCounter by LinkExchange