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:
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.