Image Techniques 2

LOWSRC is one of Netscape Co.'s additions to the IMG tag. It was originally inended to create pages which could be formatted faster. With LOWSRC, you can specify two inline images that can be used to fill the same space. The image specified by LOWSRC is displayed first, then the rest of the document is formatted, including all the text. After the document is formatted, the browser begins to download and display the image pointed to by the SRC tag. The original ideas was that you can specify a low-resolution (and therefore small size) version of a picture with LOWSRC which will get downloaded and displayed quickly. Then the reader can begin reading the content of the page while the larger, high-res version of the picture is downloaded. It is important that the two pictures be the same size. To insure this, I usually use WIDTH and HEIGHT tags to specify the size of the image:

<IMG WIDTH=350 HEIGHT=350 LOWSRC="mandelbrot.gif" SRC="bigmand.jpg">

The above command is a simple use of LOWSRC. Follow the link to see it in action.

I use LOWSRC quite often to allow my pages to format quickly. One of my favorite tricks involves using a single-pixel gif image as the LOWSRC of an image. The single-pixel image is about 50 bytes in size and loads almost instantly. Then after the page is formatted, the browser loads the actual image over it. This means my readers have something more interesting to look than a blank screen while they wait for my graphics to load. My home page uses this for the main graphics on top.

LOWSRC can also be used in ways it wasn't intended. I have used it to create very simple "animations" for presentations: load one picture, display it, then load another picture over the top. This can be fairly tricky to time correctly since you don't know the download or display speed of the reader's net connection, but the payoff is quite nice if you can pull it off right.