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:
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.
- Always use alternative text.
- Always use an image editing program to resize the image to the size you
want it on the web page.
- Always use the width and height attributes.
- Always use the correct image format (i.e. .jpg for photographs, otherwise
use .gif or .png)
- Only use animated image content where the animation is informative.
- Never use the <img> element for purely decorative purposes.