The <img> tag

Graphics have made the world wide web appear more and more like a magazine. The judicious use of graphics can enhance the appearance of a web page dramatically

The downside is that graphics files usually take up more bytes than plain text. So, graphics rich sites can be slow to download. It is very important that you know how big your files are.

The tag to insert an image looks like:

<img src="../images/apic.gif" alt="A picture of home">

There are two files types used for pictures on the web

• gif (pronounced as in gift)

  These are compressed files with only 256 colours. They are suitable for line drawings (like cartoons and logos and buttons). They are not suitable for photographic images.

  Gifs can have a colour set to be transparent. Usually the backgound colour is set to transparent to avoid the rectangular appearance.

• jpg (pronounced "jay peg")

  These are compressed by a variable amount. They have up to 16 million colours. They are suitable for most photographs. They are not suitable for images with hard edges in them (like line drawings).

  Jpgs can not be made transparent.

The attributes

src            the filepath to the image

alt            alternative text that appears if the
               picture cannot be loaded, or while it is
               being loaded, or when the mouse hovers over it
			   
width          width the picture is to occupy (in pixels)
               stating the dimensions sets aside space
               on the page and prevents 'reformatting' the page

height         ditto, but the height (if you state the width, you
               should also state the height to keep the image
			   in proportion 

hspace         blank space to leave above the image (in pixels)

vspace         ditto (but space beside the picture)

border         sets the size of a rectangular border around 
               the image (in pixels)

align          how the picture aligns with text around it
               top    - the top of the picture lines up 
                        with the top of the text
               middle - the middle of the picture lines up 
                        with the middle of the text
               bottom - the bottom of the picture lines up 
                        with the bottom of the text
               left   - the text wraps around the right hand side
                        of the picture
               right  - the text wraps around the left hand side 
                        of the picture
			   
Note: you may see align types of absmiddle and absbottom - 
      these are proprietary tags of Netscape and 
      should not be used.