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", resulting in:
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 a 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
Week 5 of the CO1217 course materials. 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.