Incorporating images on your web page.

Images should only be included in your XHTML when they are required as content for the page. For example, an illustration of a product, or a photograph of an employee. Images may appear on your web page for decorative purposes, but this should be done using Cascading Style Sheets. There is a grey area; for example, is a company logo to be treated as page content or decoration. There isn't a simple answer, but a logo which is used as a hypertext link to the company's home page could be seen as content, but a free standing logo may be seen as decoration.

The image element has no content (so it is a single tag with a trailing '/'), however, it does have several required attributes. For example:

<img src="joebloggs.jpg" alt="Mugshot of Joe Bloggs" 
     width="100" height="100" />

shows how to place an image named joebloggs.jpg from the same folder as the web page into your web page. The image will be displayed 100 pixels wide by 100 pixels high and for situations where the image cannot be displayed the image will be replaced by the alternative text "Mugshot of Joe Bloggs". This results in the following effect on the webpage:

Mugshot of Joe Bloggs

Some web browsers will display a pop up with the alternative text if your mouse hovers over the image.The file name can be a complete URL referring to an image anywhere on the Internet, however, there are copyright implications when including images on your web page from other websites. Images should be in one of three formats. These are GIF, JPG or PNG. These formats have differing capabilities, including animation, and different application considerations. A more detailed discussion of the use of images in websites can be found in the Web Images Tutorial. There are, however, a few simple guidelines for using the <img> element.

  1. Always use alternative text.
  2. Always use an image editing program to resize the image to the size you want it on the web page.
  3. Always use the width and height attributes.
  4. Always use the correct image format (i.e. .jpg for photographs, otherwise use .gif or .png)
  5. Only use animated image content where the animation is informative.
  6. Never use the <img> element for purely decorative purposes.
Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera