Inserting Graphics

What is a Web page without graphics. It would only be a boring collection of plain text. People say that a picture is worth more than 1000 words. Adding images to your Web page is easy as adding bold text. You use the <IMG> tag to insert images. This tag has no content and the end tag is forbidden. We'll look at the main attributes of the <IMG> tag.
 
id, class This two attributes are used in conjunction with style sheets.
 
src  This attribute determines the location of the image file.
 
alt  This attribute is used to give a short description of the image. You can see it if you hold your mouse over the image. This is very helpful for browsers that don't support images.
 
longcesc  If your need a longer description of the image, then you should use the longdesc attribute.
 
title  Gives the image a title.
 
height, width  Height and width of the image. They are use to override the actual image size. TIP: Don't try to stretch GIF images. For stretching use JPEG format images.
 
border This creates a border around the image.
 
usemap   This attribute is associated with image maps. Image maps are images with click able areas, actually hyperlinks. It is best to have an image map editor for creating image maps. One of them is Mapedit by bountell.com. You can download it as a 30-day trial version and if you like it, you can buy it.
 
Here is a simple example that shows how to use the <IMG> element:
<IMG src="images/family.jpg" alt="Family picture 2000" height="250" width="200">
 
Some tips on how to use images effectively
You should know that there are no fast rules about inserting images, these are only guidelines. The two major issues here are download speed and visual presentation.

  • Use the lowest color depth appropriate for your applications. What those this mean. Well, don't save your black-and-white pictures in 16.7 million colors.
  • Use the smallest image appropriate. Don't put a 800*600 pixels image on the web. If you want to show big pictures use thumbnails instead that link to the pictures. Most people will hit the back button if the page takes to long to load.
  • Use text instead of images if possible
  • Keep images in the context of your page. Don't add a picture that doesn't contribute to the content of the page.

 
Proxima Design Copyright © 2000, 2001 Proxima Design Proxima Design
Back Home Links e-Mail