Health and Safety
Executive / Commission
Styleguide
Images in the HSE web standard are to be used sparingly. There are definite rules.
There are a specific widths and html coding for title images in the different layouts.
The alt attribute of an image is used to place a text alternative for that image on a web page. It should describe what someone who cannot see the image is missing. Here's some articles by some eminent web people about the alt attribute.
As the W3C state if you have a thumbnail of a newspaper linking to "The Times Online" the useful information is the link, not "picture of a newspaper", so the alt text would be "the Times Online" or similar.
[small, right] This is a rather long caption to show that captions wrap sensibly
Images that flow with the text can be placed in the left or right of the content column.
In order to guarantee consistency, floating images are defined as being "small" (65px), "medium" (130px), or "large" (195px). The size of the image is automatically set, depending on the class that is chosen.
[large, left] This is a rather long caption to show that captions wrap sensibly
This means that you do not necessarily need to produce scaled versions of the image (although good practice and the need for good quality images may determine otherwise).
Captions are possible also.
If you want to make the caption into a link, then it is necessary to create two links, one around the image, and one around the caption.
<div class="...choose class - see below...">
<img src="...link to image..." alt="...alt text - same as caption?..." />
<p>...caption...;/p>
</div>
i+cap+[s|m|l]+[l|r]
If you have a large image in a 2 column page, try and keep its width under 550px. That will ensure all the image is visible when printed in portrait.
Images in the right-hand column can be 180px wide.
If they are too wide then the right column will wrap below the main content