The lowsrc attribute is used in an <img src> tag in order to provide the browser with a much smaller, much faster loading, lower resolution graphic than the primary graphic specified in the <img src> tag.

The reason for this is to decrease the amount of time it takes for a page to load sufficiently for someone to use it. If one is on a slow link, a page with several large graphic files may take several minutes to load. If those graphic files are accompanied by a lowsrc image, the browser will first load the lowsrc images and display them. These should be simplified pictures, either with a lower resolution, fewer colors (black and white, with no greys, works well for photograps), or some other concession to image quality that results in a physically smaller file. After the lowsrc images and the rest of the page is loaded, the browser will then go back and load the primary graphics over the top of the lowsrc graphics.

This dramatically decreases the amount of time it takes to load a page that uses a lot of graphics. It also gives the viewer an idea of what the final image(s) are going to look like, allowing that person to determine if it is worth their time to wait for the primary image to load.

Below are two images found elsewhere in the OSH Consulting web pages. The second is simply the lowsrc version of the first. Below each picture the size of the image file in bytes is indicated. At the bottom of the page is a sample HTML tag that uses both of these images.

gfromhil.jpg: 48092 bytes

altgfromhil.gif: 8685 bytes

<img src="gfromhil.jpg" alt="Griffin House from the hill" lowsrc="altgfromhil.gif" height=238 width=350>

Note that the lowsrc file is in GIF format instead of JPG. This is because one generally gets smaller lowsrc files from a two-color GIF than from a two-color JPG.