Image

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)

Image quality

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.

Image libraries

Feel free to use any images from these 2 libraries, they are license-free, as they are owned by ANU. *If you are using images from the internet, please keep in mind about the copyright issue.

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.

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

View more border classes here.

 

Spacing

You can add spacing around images by using the relevant spacing classes. For example, to add a 30px padding to the top of an image, use


                        <img class="pt-3"...
                                        

The 3 in pt-3 can also be replaced by other figures between 0 - 5, which refers to the padding from 0 to 50 px.

 

Alignment

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


                        <img class="right"...
                                        

Image sizes

Responsive image

Responsive images will automatically adjust to fit the size of the <div> that contains the image. This means you should not specify width and height properties in the <img/> tag.

As we covered in the Grid layouts: we build our pages based on the grid system, and it is fully responsive. This makes the content (in this case it's an image) inside these columns fully responsive too. Below is an example:


                        <div class="row">
                            <div class="col-4">
                                <img src="myimage.jpg" alt="description">
                            </div>
                        </div>
                                        

In this example, the width of the image called 'myimage.jpg' will take up a 4-column size (the image ratio maintains, which makes the height of this image auto), and since the viewport is divided into 12 columns, this image takes up 1/3 of the viewport.

 

Fixed image size

Although we recommend you use responsive images as much as possible, there are certain cases you might still want to have fixed-size images, such as buttons and portraits. In this case, you can use special width classes for images which will keep the image the same width (in pixels) on all responsive screen sizes. Classes are available for use in <img>, <div> and <video> tags.

<img class="w240px" src="myimage.jpg" alt="description">

Available fixed width classes

Classes are available for the following pixel widths by adding 'w' in front and 'px' behind (e.g. class="w16px") :
10, 12, 16, 20, 24, 32, 48, 50, 64, 75, 80, 100, 120, 150, 180, 200, 220, 240, 280, 320, 360, 440

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. We introduced a set of ratio classes. they are ratio-16-9, ratio-4-3, ratio-2-1, ratio-4-1, ratio-1, ratio-2-3.
You might need width sizing classes, such as w100 to make above classes work.

placeholder-ratio-16-9

ratio-16-9

placeholder-ratio-4-3

ratio-4-3

placeholder-ratio-2-1

ratio-2-1

placeholder-ratio-4-1

ratio-4-1

placeholder-ratio-1

ratio-1

placeholder-ratio-2-3

ratio-2-3

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

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.

Image accessibility

Images and graphics make content more pleasant and easier to understand for many people, and it is important to make your images accessible.

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.

 

Linked images

Whenever an image is a link, the function of the image must be presented in the alternative text that reflects the link. An image within a link should never have an 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.

Take the following picture as an example, once the image is linked to a url by determining its src attribute, it makes the image clickable.

New ANU Services website is here

                        <a href="#">
                            <img alt="New ANU Services website is here" src="..."/>
                        </a >
                                 
 

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.