The ANU website should be a content-rich site that provides our readers with valuable information.
As such, images for purely decorative purposes should be kept to a minimum. Images should also:
- be relevant to the content and audience
- not clutter the page
- contain a single picture, not a collage or collection of pictures within the one image
- be high quality imagery (not sourced from clip art libraries or scanned from print sources)
» more on preparing your content
Defaults & other settings
By default, images will be inline with no borders. You can make images display as a block using the
block class (eg
To add borders use the relevant border class. For example, to add a border around an image, use
<img class="bdr-solid bdr-grey"...
You can add spacing around images by using the relevant padding and spacing classes. For example, to add space to the top of an image, use
To align images, use the relevant alignment classes. For example, to put an image on the right, use
All images must have an
alt attribute in the
<img> tag. Where the image is used for decoration only (or contains content already described in the surrounding text) the
alt attribute should be empty.
For example, a decorative image would have the code
<img class="right" src="frogs.jpg" alt="" ...
while a descriptive image would have the code
<img alt="Screenshot of setting a blank alt attribute in Dreamweaver" ...
In Dreamweaver, you can set up an empty alt attribute using the <empty> attribute in the Properties section.
alt attribute should be short and concise. If you would like to provide a longer description, consider adding this to the page content or using a caption.
If an image contains text or information, this should be reflected in the
Whenever an image is a link, the function of the image must be presented in alternative text that reflects the link. An image within a link should never have empty or null alt attribute (
alt="") unless the function of the link is provided in text within the same link, such as a caption.
<a href="#"><img alt=""/><p class="caption" ...
This is because a screen reader must read something to identify the link, and might read the file location and name of the image if an alt attribute is not provided. And remember that the link may be read out of context of the surrounding text.
When possible, avoid using 'link to' or 'click this image' or similar wording in the alt attribute. This is redundant as links are identified as links by screen readers and should be visually apparent to sighted users.
For example, if the following image was linked to a page about the New ANU Services site, the alt attribute could be
alt="New ANU Services website is here", or if it linked to a PDF document the alt attribute could be
alt="New ANU Services website is here (PDF, 213KB)"
To add a visible caption, add a paragraph beneath the image with the caption style
You may need to group the image and caption in a
<div> to make sure they stay together. Or, if accompanying text is used, the image and text can be placed into the one
A caption should provide more detail of an image than an
alt attribute - the caption and
alt attribute should not be the same.
A standard set of icons is available for use in ANU applications and websites which includes social media, rss and icons reserved for specific uses. Please contact us to organise a set of icons suitable for your needs.
Image ratios & dimensions
Adhering to the ratio rules is not possible for all image types. In these cases, only the width of the image should be set to the relevant grid class. Examples include:
- portrait photography
- diagrams and scientific illustrations
- book covers
- artistic works (such as paintings)
Contact us if you are unsure about the applicable ratio.
Images should adhere to the following image ratios to ensure they fit well with the web design grid and have visual balance.
Small images & pictograms
All small images (100px wide or less) should follow a 1:1 ratio - no smaller than 50px by 50px. Images smaller than 100px are not very legible and so should only be used for abstract images, icons or pictograms.
Pictograms should have a solid dark background with a white image.
The following are examples of small images, but other sizes are acceptable.
320px by 215px for in the feature bar only, combined with the ANU window. See the Features page for more information.
Doublewide (full width)
3:1 ratio, for hero images = 680px by 220px
8:1 ratio, for shallower banner style images = 680px by 85px
Doublenarrow (2/3 width)
4:1 ratio = 440px by 110px
2:1 ratio = 440px by 220px
1:1 ratio = 440px by 440px
Wide (half width)
4:1 ratio = 320px by 80px
2:1 ratio = 320px by 160px
1:1 ratio = 320px by 320px
1:2 ratio = 320px by 640px
Narrow (1/3 width)
4:1 ratio, for banners over columns = 200px by 50px
2:1 ratio = 200px by 100px
1:1 ratio = 200px by 200px
1:2 ratio = 200px by 400px
Image size in responsive design & HTML 5
Image scaling to fill width or grid classes
If your site has implemented version 4 of the ANU web style, your site will be responsive and should be using HTML 5. In this configuration, images will automatically scale themselves to the size of the div that contains them. You should not put
height arguments into the <img> tags. Instead, you should position images in grid or width classes, and let them fill the space. For example:
<div class="w-narrow right marginleft">
<img src="myimage.jpg" alt="description">
Uploading double size images
For mobile browsers, where users might zoom in on your content, or on computers with high resolution screens, you should consider uploading your images at twice the resolution of the space that you want to fill on the screen. For example, if your image is to be displayed at 200 x 200 pixels, you would upload a file to the server which is 400 x 400 pixels. When the image is placed inside a width or grid class, it will be scaled down automatically.
Setting fixed sizes