Image
Please refer to the Image use checklist to ensure your image use is compliant and appropriate.
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.
Image use checklist
- Verify the image has necessary copyright or licensing permissions.
- Ensure proper attribution is given if required by the license.
- Confirm that anyone featured in the image has given explicit consent for its use.
- Remove the image if consent is withdrawn.
- Check the resolution: avoid pixelated or blurred images.
- Use appropriate formats (e.g., JPEG, PNG) and optimised size.
- Identify the focal point to prevent key details from being cut off on different screen sizes (e.g., mobile, tablet, desktop.)
- Provide descriptive alt text for the image to improve SEO and accessibility for screen readers.
- Enable lazy loading to improve page speed.
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.
ratio-16-9
ratio-4-3
ratio-2-1
ratio-4-1
ratio-1
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
75x75px
50x50px
Pictogram
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" ...
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.
<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.
