Using Images & Graphics
Using relevant and appropriate images is a great way to liven up the content of your web pages.
It is important to ensure you have authorisation to use an image and it is not subject to copyright.
The Web & Digital Team govern the use of appropriate imagery on the website. Some graphics, including icons and clip art are not aligned with our website standards. All imagery used on University of Adelaide websites must align with our website and branding standards.
Images should be used to enhance the page content by providing additional information and clarification. If you have any questions regarding the type of imagery you should use on a site, please contact the Web & Digital Team.
Images used on the website must be photographic in nature and meet the following conditions:
- High quality/resolution images
- All subjects must be following WHS standards (i.e. students in laboratories must be wearing correct attire)
- Must not display outdated technologies or settings
- Must not appear too staged or unnatural
Example of approved photographic images
Example of unapproved photographic images
Icons, if chosen well, are a simple and effective way of communicating the content on your website. They can allow users to easily scan content and find areas of interest or relevance quickly.
The Web and Digital Team are developing a comprehensive suite of icons that have been specifically chosen to ensure consistency and clarity of content across University websites. We are currently in the process of adding these icons onto the Drupal platform, for use with selected components.
If you are interesting in using icons on your Drupal website, please contact the Web & Digital Team for further details.
All other icons should not be used on the University websites, unless they are (1) approved by the Marketing and Communications' Creative Team as part of campaign/promotional creative (2) approved by the Web and Digital Team and (3) meet the necessary website accessibility standards.
Graphics that are off-brand include those which are:
- visually weak and unsophisticated (i.e; poor quality, clip art images)
- do not have a fresh and contemporary feel
- do not typify our brand characteristics of prestige, innovation, excellence and leadership
- combined/multiple images (e.g. collages)
- images that include text overlays.
The use of infographics on University websites is strongly discouraged. They have been used in the past in very limited circumstances and on a case-by-case basis.
Examples of unapproved graphics
It is important to only use images which belong to the University, or have been sourced from a stock image website.
Please note that it is an infringement of privacy to publish identifying images of people on a website without their permission. When using images of people such as staff, clients or other stakeholders on a website, please ensure that you have obtained a signed talent release form from them.
Free to use images
The University of Adelaide Photo Library should be the first place you go to find approved images to use on a University website.
Faculties and schools are encouraged to speak to their faculty marketing teams about faculty-specific images, as these may not appear in the Photo Library.
For study and student related images it is a requirement that you use University of Adelaide students and study locations.
Images can also be sourced from free image websites. Some examples of websites with free to use images include:
Please note that images from free image websites are only to be used for general, non-study related content.
If you are unable to find relevant or specific images, you can request help from the Web & Digital Team or Creative Team to source images.
If you have the resources available, you may also wish to use a paid image website to purchase images. These websites often provide a greater range of quality images, and options for specific subject matter.
Editing images with Pixlr
If you do not have access to image editing software, Pixlr is an open-source web based image editor which is free to use, very user-friendly and is based within your browser window.
Resizing an image in Pixlr Editor
- In the Pixlr Editor, click OPEN IMAGE FROM COMPUTER.
- Select the image you wish to resize saved to your computer, and click Open.
- Once you have opened your image, go to Image > Image Size to view the current image size.
- Adjust the dimensions in the Width and Height fields.
- Leave the Constrain proportions checkbox ticked, and never increase the size of an image as you will lose quality.
Cropping an image with Pixlr
If you already have a set aspect ratio that you need to use for an image, (for example W 900px x H 675px) for a standard image, you can constrain the crop to that exact output pixel size.
Cropping an image to a specific size
- Select the Crop tool (the top left icon in the tool menu) then click on the No restriction drop down menu, and select Output size.
- Enter in the desired Height and Width and drag over your image to capture the ideal crop, adjusting as needed from the corner of the selection box.
- Double click your mouse on the image to perform the crop.
Cropping an image to any size
- If you do not have a set aspect ratio, click on the Crop tool and select the No restriction option.
- Freely drag and adjust the selection box to the desired shape, but you will still most likely need to change the image size after this.
- Go to Image > Image Size and adjust the Width or Height.
Note: always keep the Constrain Proportions ticked to keep the image ratios correct.
Saving the image
- When you are happy with the changes you have made to the image, go to File > Save to save it to your computer.
- Enter the file name, remember to use the correct file naming conventions (all lower case, do not include and spaces and use dashes (-) instead of underscores_).
- Select the JPEG (Good for most photos) format, and scroll the Quality slider anywhere between 80 and 90 (this saves the image as a compressed JPG).
- Click OK and save the file in a location you can easily find, ready for use on the web.
Alt text is text that is used to describe the appearance and function of an image on a page.
Adding alt text to images is very important for web accessibility. Visually impaired users with screen readers will be read the alt text in order to understand an on-page image.
The alt text will be also be displayed in place of an image if the image file cannot be loaded, and it helps to provide information for search engines to index an image properly.
There are two different ways alt text should be implemented, depending on the way the image is used on the page.
- For images that are purely decorative, the alt text should briefly describe what is in the image, e.g. "A group of students sitting on the Maths lawns".
- For images that are being used to link to content, such as images in Media Objects, the alt text should be the same as the title of the link, e.g. "Visit Student Support".