Web Standards Guide
The University of Adelaide Australia
Web Standards Home
Conditions of Use
Guidelines
Templates
Copyright
Images
Corporate logos
Content style guide
Plan your site
Develop your site
Upload your pages
Extend your site
Visual Identity [external link]
Contact us
Online Media Request

Online Media Unit
Level 7, Old Classics Wing
THE UNIVERSITY OF ADELAIDE
SA 5005
AUSTRALIA
Email


Telephone:
+61 8 8303 3280
Facsimile:
+61 8 8303 4829

Images

Images are important because they enhance and add richness to your content. The flexibility of the University web site design enables a variety of image placement and layouts for your pictorial content. Please refer to copyright restrictions before using found images or photographs on your web site.

Image formats

Images published on the University web site need to be saved as JPEG or GIF format. Images that have millions of colours or gradations of colours should be saved as JPEG files compression level 7 and preferably as progressive format. The progressive format means the image, as it downloads, will perform 3 passes before fully displayed. It is preferable to use GIF format for small images. GIF format is not recommended for rendering photographs. When using GIF or indexed colour, convert to 216 colours and save as 89a interlaced format.

If images are being used in the two column layout, it is preferable to right align the image within the content, using a 10 pixel horizontal space to repel the text on the left of the image. Alternatively you may embed the image within a 'nested table' right aligned within the content zone.

Image sizes

Images should be sized to fit easily within the browser window. In general, images should not exceed 180 to 200 pixels in width, as this will severely restrict the scalabilty of the browser window. Image file size must be kept to a minimum, optimizing images is essential for efficient load-time for your pages.

Images should not be resized using HTML. That is, images should be scaled using image editing software such as Photoshop or PhotoEditor and not by using size tags within the HTML code. This is because a large image will take time to download even if it is being displayed at a smaller scaled size.

Alt tags

The alt attributes are description labels for images on screen and are particularly important to visually-impaired web users.

The alt is a required attribute of the IMG tag. An empty alt tag in the form of two quotemarks alt="" is acceptable and even desirable in places where it would not be useful to see a text representation of an image. That is, images that are only for decoration, are not illustrative of the content and are not hyperlinks, only require the empty alt tag.

If an image is a hyperlink or integral to the content, the alt attribute must contain a full description. Images that are wrapped in an anchor A tag (hyperlink) must contain an alt attribute, or else users of text-only browsers will not be able to access the link. Images that contain text should generally have an alt tag that corresponds closely to the text in the image.

Captions

The specifications for captions are outlined by the style sheet and must not be altered.

Animations

In general, use of animations, including animated gifs and flash, is not recommended except when they serve a specific purpose as a teaching tool.