Images

Appropriate image use

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

Borders

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

<img class="bdr-solid bdr-grey"...
 

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

<img class="padtop"...  
 

Alignment

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

<img class="right"...  
 

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

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

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.

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

New ANU Services website is here

Captions

To add a visible caption, add a paragraph beneath the image with the caption style

<p class="caption"...

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

Ratio exemptions

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
  • flags
  • 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.

100x100px

example of a 100 x 100px image

75x75px

example of a 75 x 75px image

50x50px

example of a 50 x 50px image

Pictogram

example of a pictogram

Features

320px by 215px for in the feature bar only, combined with the ANU window. See the Features page for more information.

 example of a 320 x 215px image

Doublewide (full width)

3:1 ratio, for hero images = 680px by 220px

 example of a 680 x 220px image

8:1 ratio, for shallower banner style images = 680px by 85px

example of a 680 x 85px image

Doublenarrow (2/3 width)

4:1 ratio = 440px by 110px

example of a 440 x 110px image

2:1 ratio = 440px by 220px

example of a 440 x 220px image

1:1 ratio = 440px by 440px

example of a 440 x 440px image

Wide (half width)

4:1 ratio = 320px by 80px

example of a 320 x 80px image

2:1 ratio = 320px by 160px

example of a 320 x 160px image

1:1 ratio = 320px by 320px

example of a 320 x 320px image

1:2 ratio = 320px by 640px

example of a 320 x 640px image

Narrow (1/3 width)

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

example of a 200 x 50px image

 

2:1 ratio = 200px by 100px

example of a 200 x 100px image

1:1 ratio = 200px by 200px

example of a 200 x 200px image

1:2 ratio = 200px by 400px

example of a 200 x 400px image

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:

<div class="w-narrow right marginleft">
   <img src="myimage.jpg" alt="description">
</div>
 

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

You might want to have a consistent size for some images, such as buttons or portraits. In these cases, you can use special width classes for images which will keep the image the same pixel width on all responsive screen sizes. Classes are available for use in <img>, <div> and <video> tags.

For example, for a 100 pixel fixed width image:

description
<img class="w100px" src="200x200.jpg" alt="description">
             

Fixed width options

Classes are available for the following pixel widths by adding 'w' in front and 'px' behind (e.g. class="w16px") :

  • 12
  • 16
  • 32
  • 48
  • 50
  • 64
  • 75
  • 100
  • 120
  • 150
  • 200
  • 320
  • 440

Updated:  26 August 2015/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle