Using images in web pages

There are two situations where you will want to use images in web pages. One is where an image provides some information to the viewer of the page. The other is where an image is purely for decoration and forms part of the design, look and feel of the pages or web site. Both situations are valid uses, but you should treat them differently when implementing your web site.

Pictures used to provide information to the user.

The simplest way of including an image on the web page is by using an <img> element. <img> is an empty element and should not have a closing tag. All the details for an image tag are specified using attributes. You should always provide the following attributes:

  • src="url of image"
  • width="display width of the image"
  • height="display height of the image"
  • alt="alternative text for the image"

For example this image:

Detail of original

has the following XHTML representation:

<img src="images/dudek.png" width="230" height="180"
     alt="Detail of original" />

This retrieves the image 'dudek.bmp' from the 'images' folder in the current folder. The width is specified as 230 and the height is specified as 180. Alternative text is specified as: 'Detail of the original'. Note the closing '/' in the tag.

In general no styling should be placed in the image tag. All styling should be done in the style sheet, for example, placing borders around the image or providing margins and padding.

Another important attribute is longdesc. This is used to provide a link to another document which provides a detailed description of the image. This becomes important from an accessibility perspective if you have an image which conveys a lot of information which isn't available elsewhere on the page. Internet Explorer and Firefox do not make use of the longdesc attribute, but screen readers are expected to make use of it for the non-sighted user. E.g.:

<img src="images/dudek.bmp" width="230" height="180"
     alt="Detail of original" longdesc="images/dudekinfo.html"/>

An alternative method of including images is being proposed, using the <object> element. The syntax is as follows:

<object data="images/dudek.png" type="image/png"
        width="230" height="180" title="Detail of original>
    <!-- alternative content can go here if the
         object element does not work -->
</object>

Unfortunately, support for this alternative is variable and depends on operating system configuration, however, the fallback for object does work and the following works for both Firefox and IE:

<object data="images/dudek.png" type="image/png"
        width="230" height="180" title="Detail of original" >
  <img src="images/dudek.bmp" width="230" height="180"
       alt="Detail of original image" />
</object>

This may be of use for the display of some of the non-standard image formats, as IE does understand Windows Bitmap files, but other browsers may need to use the <object> syntax.

The example of the use of the <object> element show how browsers implementation is variable.

Golden Rule 3: Only use the three native image formats for static images on a web page.

This may cause a development team some extra work, however, you will be providing images in a totally standard, accessible way. For now it is best to just use the <img> element, rather than <object> as browser support is not yet sufficient to warrant the change. Note: this page uses some .PNG files which are pretending to be Windows Bitmap files and also scales the size of some images, but this is for a particular purpose, i.e. the web page needs to demonstrate various effects which would be difficult to perform in another way.

Most graphics software will perform image format conversion, and in some cases it can perform batch conversion, allowing you to convert a whole folder full of images in one go.

Exceptions to Golden rule 3

It may be sometime necessary to use alternative image formats. However, this will usually be more to do with the 'added value' in the image format rather than the image itself. A simple static bitmap image should only ever be incorporated using the appropriate native format, but something like an animated or interactive image may best be incorporated using Adobe Flash or Silverlight. Similarly the SVG format can provide information content in addition to the graphical component and so will be a worthwile format to employ where pictorial and textual information need to be combined.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera