Use these guidelines to add images to your web pages.
As a rule, use words rather than images. Only use images that usefully add to the text content.
|Image||Dimensions (in pixels)|
|50/50 banner||730 x 411px (or 16:9 aspect ratio)|
|Image with caption||730 x 411px (or 16:9 aspect ratio)|
|Page thumbnail||730 x 411px (or 16:9 aspect ratio)|
|Catalogue item||uses page thumbnail|
|Wayfinder card||uses page thumbnail|
|Content teaser||uses page thumbnail|
|Full Bleed banner||1280 x 660px|
|Full Bleed banner mobile rendition||751 x 575px|
Note: Images may render at slightly different sizes in different components. Using 730x411px will allow you to use the one instance of the image for various purposes (i.e. thumbnail, wayfinder image, news item image, catalogue item image, image in caption).
Image size should be less than 100KB
Keep all images under 100KB as possible. Up to 200 KB is the absolute maximum for banners where quality is a concern.
The best bet is to use the 'save for web' function in Photoshop, which you can do in large batches to make your life easier.
If you don't have easy access to Photoshop, we recommend the following optimisation sites:
50/50 banner (with button and text)
Image with caption
News hub feature card
Rules of image use
1. Evaluate your image
Always consider the role an image plays in the context of the page where it is used. Start by deciding if the image is:
This style of image does not add any information to the page, it is just there to make the website more 'visually attractive'. Don't use these.
Images that graphically represent concepts and information, typically pictures, photos and illustrations. Do use these.
2. All images need text alternatives (alt text)
Images must include alt text that describes the information or function represented by them. This ensures that images can be used by people with various disabilities.
These web accessibility tutorials for images demonstrate how to provide appropriate text alternatives based on the purpose of the image.
Alt text for screenshots
You do not need to describe what is contained in a screenshot as you would just be duplicating the instructions that relate to the screenshot. Instead, put "Example screenshot" as the alt text.
3. Get permission to use the image
You can't publish information that identifies a person - a student, a parent or carer, or any other individual - without their permission. Find out more about permission to publish (staff only).
Don't use images downloaded from Google or other search engines without permission.
4. Don't use text images
Don't use images that are just text (words) or text added to them, such as:
- screenshots of print
While text images may look nice and be useful in print, the information in them can't be read by assistive technologies like screen readers.
5. Don't use icons
Avoid using icons because they can get confusing when you use the same icon for different things, or vice versa.
6. Use only pictures of Aboriginal people and Torres Strait Islanders still living
Many Aboriginal people and Torres Strait Islanders are offended by the depiction of deceased members of their communities. It is very important to follow these guidelines and to be respectful of their values.
- Make every effort to ensure that only pictures of living Aboriginal people and Torres Strait Islanders are used in the website.
- Display a disclaimer if an image could contain a deceased person - such as a very old filed picture.
- Have a disclaimer statement in the privacy and disclaimer page in the website.
- Provide a way to report an incident.
- Use old images without checking permissions and historical data.
- Use ripped images sourced from Google or the internet (including other websites).
Images of people now deceased
While we have made every effort to ensure that only pictures of Aboriginal people and Torres Strait Islanders still living are used on this site, visitors to the site are warned that it may contain images of people now deceased. Please let us know if you know of the death of any Aboriginal or Torres Strait Islander person depicted on this site.
Learn how to add an image on your page using our guides: