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.

    Expand
  • Photographic imagery

    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
  • Icons

    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.

  • Unapproved graphics

    Graphics

    Graphics that are off-brand include those which are:

    • visually weak and unsophisticated (i.e; poor quality, clip art images)
    • illustrations and drawings
    • 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.

    Infographics

    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.

  • Sourcing images

    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.

    Visit the PhotoLibrary

    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.

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

    Examples include:

  • Image size

    Images should be resized before uploading to a site by using image editing software or Pixlr to appropriately crop and resize images to the correct dimensions.

    For information on image size, aspect ratio and to see some examples, please see the image content type usage guidelines.

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

    Visit the Pixlr website

    Resizing an image in Pixlr Editor

    1. In the Pixlr Editor, click OPEN IMAGE FROM COMPUTER. 
    2. Select the image you wish to resize saved to your computer, and click Open.
    3. Once you have opened your image, go to Image > Image Size to view the current image size.
    4. Adjust the dimensions in the Width and Height fields.
    5. Leave the Constrain proportions checkbox ticked, and never increase the size of an image as you will lose quality.
    Pixlr

    Pixlr Editor

    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 with Pixlr

    Setting constraint to output size

    Cropping an image to a specific size

    1. 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.
    2. 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.
    3. Double click your mouse on the image to perform the crop.

    Cropping an image to any size

    1. If you do not have a set aspect ratio, click on the Crop tool and select the No restriction option.
    2. 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.
    3. 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

    1. When you are happy with the changes you have made to the image, go to File > Save to save it to your computer.
    2. 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_).
    3. 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).
    4. Click OK and save the file in a location you can easily find, ready for use on the web.
  • Alt text

    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.

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