Inserting Images

Many users quickly become uninterested in your page if it takes too long to load, and images are the primary culprits. Images should be kept small unless you have a special one (and for something that needs to be large in order for detail to display, there are techniques such as creating a thumbnail—a click-able smaller photo that will link to the larger one, that will still enable your page to load quickly). It is useful to specify within the HTML document the size of the image (in pixels) that you want it to display. By including the size parameters, the browser knows “ahead of time” the amount of space it will need to retain in order to correctly display the image; therefore, the page loads faster.

NOTE: Although this is a way to “re-size” an image within the HTML document, rather than physically resizing images within a graphics package, keep in mind that the physical file size is still the same and it will take, therefore, the same amount of time to download and display as if you had left the display size large.

NOTE: If you use a large image on a page, Web courtesy dictates that you identify both the graphic type and the size so that the user can decide whether he or she wishes to view it!

To insert an image in your document, use the <IMG> tag. The file must be located in the same directory as the HTML file that is calling it or you must include coding for the path to locate the image file. You may also simply point to someone else’s image.

For example, if you have a file “picture.gif” in the same directory as your HTML file, to show the photograph, include the tag:

<IMG WIDTH=75 HEIGHT=125 SRC=”picture.gif”>

This example shows the <IMG> tag with options WIDTH, HEIGHT, and SRC (source, the file name). Options may be placed within the tag in any order.

If the photograph belongs to me and resides in my directory, then you might consider simply pointing to my existing image file. To do this, rather than supplying the file name alone, you supply the URL where the file resides. Your tag would read:

<IMG WIDTH=75 HEIGHT=125 SRC=”http://tutorial.webaccessories.org/photos/picture.jpg”>

Keep in mind that this option will involve the browser “going to” the location where this file resides in order to display the image; the result is increased load time of your page.

Remember, the “upside” is: if the image is modified, your page will automatically be updated. Ironically, that is also the “downside.”

Many users use text-based browsers such as Lynx, turn off the automatic loading of images, or use text readers due to physical impairments. In any of these instances, images can not be displayed, resulting in a placeholder being displayed or the text reader attempting to interpret the image. To avoid these problems, you should specify an alternate text explanation of the image. To do so, include the option ALT within the IMG tag (the text alternate should be enclosed in quotes):

<IMG SRC=”http://tutorial.webaccessories.org/photos/picture.jpg” WIDTH=89 HEIGHT=90 ALT=”This is a picture of a Holstein cow”>

• Advertising on Webaccessories

  [Click here for Details]