Images

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 img class="block").

Borders

To add borders use the relevant border class. For example, to add a border around an image, use

Spacing

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

Alignment

To align images, use the relevant alignment classes. For example, to put an image on the right, use

Image accessibility

Alt tags

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

while a descriptive image would have the code

In Dreamweaver, you can set up an empty alt attribute using the <empty> attribute in the Properties section.

An 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 alt attribute.

Linked images

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.

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)"

Captions

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

A caption should provide more detail of an image than an alt attribute - the caption and alt attribute should not be the same.

Icons

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

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.

Features

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)

Narrow (1/3 width)

4:1 ratio, for banners over columns = 200px by 50px

 

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 width or height arguments into the <img> tags. Instead, you should position images in grid or width classes, and let them fill the space. For example:

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