LOWSRC is a boon for people connecting to the Web via slower-speed modems. (In fact, people using higher-speed connections might not even see it.) It was developed as a way to load low-resolution images before high-resolution ones, so that pages would load faster and low-speed surfers could see what they were waiting for. Here's how it's done:
First, create an image or scan one into your favorite image-editing program (I use Photoshop). Index the colors and save the image as a GIF file, or use JPEG format if the image really needs more than 256 colors. In Photoshop, color indexing is done by changing the Mode from RGB Color to Indexed Color, and either selecting 8-bit color or specifying the number of colors you would like in your image. Here I've indexed the image on the left to 256 colors (8-bit) and the one on the right to 45 colors, using an adaptive palette in both cases. On a UNIX server, the former takes up 10k of space and the latter 3k.
Next, reopen your original image. Index the colors again, this time specifying as few colors as possible. Save it with a name like "image4c.gif" that corresponds to the number of colors you used. With the sample image on the left, 8 colors was the fewest I could use and still have it be recognizeable; the one on the right was still recognizable at 2 colors, but I preferred 3. On a UNIX server, the images take up 2783 bytes (about 3k) and 1255 bytes (about 2k) of space, respectively.
Finally, write your <IMG> reference. A plain vanilla <IMG> tag would look something like this:
<IMG SRC="/images/tim.gif">
In order to get the LOWSRC image to load first, with the SRC image loading directly on top of it, your <IMG> reference should look like this, at a minimum (you can also use HEIGHT and WIDTH, ALT, ALIGN, and BORDER extensions):
<IMG SRC="/images/tim.gif" LOWSRC="/images/tim8c.gif">
OK, so now you know how to use LOWSRC to make a low-resolution image load before a high-resolution one. But there's no rule that you have to use two versions of the same image--in fact, you can use LOWSRC to load *any* image first. Two good examples of this "simulated animation" trick are at the Atomic Vision site--the Sight column (keep your eye on the upper-right-hand corner) and the sort of anti-hotlist, Big Sucking Sound. To make the illusion more convincing, it's a good idea to use SRC and LOWSRC images of the same height and width.
Design Diary is compiled by Lori Hylan, lori@internet.com
