Pre-loading images

This tip was sent to me by Warren Wetmore, a friend from a list server that I used to belong to. What it does is load a 1 pixel by 1 pixel image of the pictures for the following page onto the page that you are currently reading. This image is smaller than a period and virtually invisible.

What makes a webpage take forever to load are the images. Most of the HTML code for a simple page takes up less than 1-2K. This is a tiny amount of data - something a 28K modem can handle in less than a tenth of a second. But add a 100K worth of images, and suddenly you are talking about 3-4 seconds of modem time, a fifty fold increase! Of course, since the modems have to "talk" back and forth to send the information, it means that an image of this size can take anywhere from 10 seconds to a minute to download. And in our age of instant gratification, this is an eternity.

I set up my tour so that as you view the current page and read what it has to say, your computer is busy downloading this next image. Once it gets the image it smashes it down to virtually nothing and puts in on the page you are viewing, just like in the box above. But more importantly, the picture still exists in your cache, waiting for you to use it again. When you decide to click on the next page, the computer is able to put that image on your screen almost immediately because it doesn't have to go back out to the web and get it - it's already there.

The HTML code for this is deceptively simple. At the bottom of the page, add code for the upcoming images and specify a size of 1x1 like the following:

IMG SRC="whatever is the filename of the image on the next page" height="1" width="1"
It is the "height="1" width="1"" that does the trick.

I've put one here [ ].

Move your cursor around in the brackets and you'll see that it changes. What you're seeing is an incredibly tiny picture of my father's kayak.

Back to the Main Page