Welcome to Pati's HTML Hint Page
I hate to go to pages which load very slowly. I live in an area where phone lines are old and a fast connection is 28,800. I can't stand getting to a page and having to wait as long as 10 minutes for the page to load.
Due to this problem, I have learn several ways for making pages load quickly and decided to share these hints with anyone who needs the help.
Tables - avoid them if you can!!!
I very seldom use tables on my pages. The reason for this is that browsers are built in a way that when they encounter a table they must read everything and load every image within the table before they display any portion of the table.
I love side border images and thought that tables was then only way to have them. WRONG You can have a side border graphic without tables. All you need to do is change your Body statement to look like the one below:
You will need to change the topmargin and margin height dimension to match the size of the side image is your background. Open your border image in PSP and select the border area of the image. Edit and copy the selected area, paste as a new image and then view image information to see how wide the new image is. I usually add 5 to 10 pixels to the width and use it for my topmargin and marginheight dimension, this will leave a small margin between the edge of your side image and your text.
If you must use tables on your page, and I do know there are times when it is easier to use them, then place a graphic and some text above the table. This will keep your viewer occupied while the table loads.
Always state the width and height of images
If you do not add the height and width of your images the browser won't know how much space to allow for the image. This will definitely slow down your page load.
Limit the number of graphics per page
Limit the total byte size of all graphics on your web pages to between 100K and 200K. Use thumbnails to display your larger images. You can easily insert text on your page telling the viewer to that you are using thumbnail images on the page. You can use html code to link each thumbnail to the full size image (be sure to upload the image and the thumbnail to your server).
When I create an image in PSP that I am going to place on my website, I automatically do an image resize to either 50% or about 150 x 150 and save the image using the exact same name with a t added to the image name. For example: globe1.jpg would have a thumbnail named globe1t.jpg.
The following images illustrates the proper coding for linking an image via a thumbnail.
If you have lots of images, separate them into separate pages. I personally would rather visit 5 pages with 4 images on each page and have them load quickly, rather than to go to a page with 20 images which takes 10 minutes to load.
If you are still having problems, email me and I will personally help you with your page.