Making the Best Use of Graphics
|
The most obvious way of decreasing loading time
is to use graphics that are as small as possible. The word "small,"
however, means something different in the world of the internet than it does in
the real world. It does not refer to the physical size of a graphic, but to how
many kilobytes it takes up.Technique 1: Warn the User
The simplest technique is simply to warn the user that a large image is coming up. Never use a large image on your home page if you are at all concerned about users with slow modem access! Put these larger images on separate pages to which you have created hyperlinks. On the home page or whatever page has the links to the big images, mention that clicking on a link will bring up a big image. If you want to be really considerate, you might say exactly how big it is. For instance, you might say "Clicking on the link will lead to a large image, approximately 256 KB."
You
could also use thumbnail images to give people an option whether they want
to click or not. Remember this monkey from the hypertext
tutorial? You clicked on him to get to the bigger monkey picture. The thumbnail
technique will work only if you have a picture that really is smaller in KB than
the large version. You can force an image to display smaller and look like
a thumbnail. For instance, you could take a picture that is 150 pixels x 150 pixels
and specify <IMG SRC="image.jpg" WIDTH="75" HEIGHT="75">
and the picture will display at half its actual dimensions. But you have not
made it any smaller by doing that! No matter how small it looks, it will take
every bit as long to load.
Technique 2: Specify the Dimensions
Have you ever been reading the text on a web page, waiting for the images to load, and then suddenly the image finishes loading and the text jumps to a different position? You usually lose your place when that happens, and that can be irritating. At the very least, it's distracting when the text is moving around without warning.
Avoid this problem by specifying the dimensions of your image in the HTML code. Check the dimensions by checking its Properties, then add them to your code. For instance, our old friend dog.gif is 50 x 68 pixels. You can specify his dimensions by typing <IMG SRC="dog.gif" WIDTH="50" HEIGHT="68">. The computer will read this immediately and will automatically leave enough space on the page for the image. Your user can comfortably read the text, which will remain stable while the images are loading.
Technique 3: Add Alt Commands
The ALT command controls the text that you sometimes see in the empty space while a picture is loading. This is especially helpful if the picture is a big one and it takes a while to load. Often, this enables somebody who is viewing a web page to decide whether or not it's worth sitting around and waiting for the picture to come up. For instance, the home page at http://www.uco.edu, at the time I am writing this tutorial, has a big graphic with an ALT command that says "Old North Picture." This lets us know that it's a picture of the Old North clock tower, and not something like an image map or a graphic menu that will be necessary for us to get around the site.
The ALT command doesn't go out of action after the page has loaded. To see what it does then, hold your mouse over any of the pictures on this page.
ALT commands are useful for two reasons: they tell the average web viewer whether to wait around or not, and they help users with unusual needs. Some people surf the web with the images turned off. Others use small hand-held devices that block out images. Blind or visually impaired users often have a program installed that reads web pages aloud to them. If images do not have ALT commands embedded in the <IMG SRC> tag, none of these users can tell what this image is supposed to be. That can create unnecessary anxiety.
An ALT tag for the dog image might read like this:
<IMG SRC="dog.gif"
WIDTH="50" HEIGHT="68" ALT="Image: dog standing on hind legs">
Please note that the words you include in the ALT tag are case sensitive, so they will display just as you type them. If I type in Dog Standing on Hind Legs instead of all lower case, that is what woill show up when people hold the mouse over the image.
Technique 4: Align Large Graphics to the Right
The ALT command is not the only command you can insert into the <IMG SRC> tag. You can also specify whether you want graphics to align to the left or to the right of your text. Above, the monkey is aligned to the left of the text and the dog is aligned to the right.
Web pages load in the same direction that we read in the English-speaking world, since HTML was developed by English speakers: top to bottom, left to right. If your text is on the left, it will load first and it can be read while the user waits for your image to load.
The command to align a graphic is ALIGN. To align the dog graphic to the right side of the page you would type <IMG SRC="dog.gif" WIDTH="50" HEIGHT="68" ALIGN="right">
|
Return to the top menu
Return to the Adding Images Index