The <img> Tag and Its Attributes 163ObjectsImages &The <img> Tag and Its AttributesWeb Design in a Nutshell, eMatter EditionThe preview could be a reduction of the whole image or just an alluring frag-
ment. Be sure to provide information necessary to help users decide whether they
want to spend the time clicking the link, such as a description of what they’re
going to get and the file size of the image (so they can make an estimate of how
long they’ll need to wait).
Reuse images whenever possible
When a browser downloads a graphic, it stores it temporarily in the disk cache (a
space for temporarily storing files on the hard disk). That way, if it needs to redis-
play the page, it can just pull up a local copy of the HTML and graphics files
without making a new trip out to the remote server.
When you use the same graphic repetitively in a page or a site, the browser only
needs to download the graphic once. Every subsequent instance of the graphic is
grabbed from the local cache, which means less traffic for the server and faster
display for the end user.
The browser recognizes a graphic by its entire pathname, not just the file name, so
if you want to take advantage of file caching, be sure that each instance of your
graphic is pointing to the same graphic on the server (not multiple copies of the
same graphic in different directories).
The lowsrc trick
Large graphics may take a long time to download via slow connection speeds,
which means your viewers may spend moments staring at an empty space on the
screen. Thelowsrcattribute for thetag (first introduced by Netscape)
provides one way to quickly give users some indication of the image to come
while the “real” graphic is still downloading.
Thelowsrcattribute provides the URL for an image file that the browser loads
and displays when it first encounters thetag. Then, once the document has
completely loaded, the browser goes back and retrieves the image specified by the
src attribute, as shown in Figure 9-15.
Figure 9-14: Effect of the clear=all attribute
<IMG SRC="leaf.gif" ALIGN="left" HSPACE=12><P>An Oak and a Reed
were arguing about their strength.<BR CLEAR=all>When a strong...