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 Operations 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 Operations Team.

  • 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
    • No text overlaid on the image (this is important for accessibility).
  • 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 Operations 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.

    In the meantime, if you are interesting in using icons on your Drupal website, or if you would like to request specific icons, please contact the Web Operations Team.


    • Don't overuse icons on a page or site
    • Only use icons that have been provided by the Web Operations Team
    • Make sure they are relevant, clear and unambiguous
    • Using unapproved icons may result in your content becoming less effective and more confusing.

    Good vs bad examples

    Good: icons used as infographics are an effective way of displaying information to a user. The example below uses the promo block content type.

    Infographic icons - promo blocks

    Bad: the below shows unapproved icons that do not have a clear meaning.

    Unapproved icons - no clear meaning

    Bad: below is an unapproved icon set. Some icons do not have a clear meaning, non-brand colours are used, there is a drop shadow, icons would not all be approved to use and it is best to use a consistent set of icons supplied at current by the Web Operations Team.

    Unapproved icon set - background colours, icons we wouldn't recommend

    Bad: the below shows unapproved hand drawn / sketch style icons. Some do not have a clear meaning. Not consistent with icons currently used on the site.

    Unapproved icons - hand drawn
  • Unapproved 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.


    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.

    Use the Pixlr X Online Photo Editor

    Pixlr X Online Photo Editor

    Pixlr X Online Photo Editor

    Resizing an image in Pixlr X Online Photo Editor

    1. In the Pixlr Editor, click OPEN IMAGE.
    2. Select the image you wish to resize saved to your computer, and click Open.
    3. Once you have opened your image, click on the arrange tool:
      Pixlr - arrange tool
    4. Click RESIZE IMAGE and adjust the dimensions in the WIDTH and HEIGHT fields.
    5. Leave the CONSTRAIN PROPORTIONS turned on, and never increase the size of an image as you will lose quality.
    6. Click APPLY.

    Cropping an image with Pixlr X Online Photo Editor

    If you already have a set aspect ratio that you need to use for an image, (for example W 1166px x H 875px) 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 aspect ratio

    Cropping an image to a specific size

    1. Click on the Crop tool (the second icon in the tool menu) to open the CROP settings.
    2. Turn on the SELECT ASPECT settings and enter the desired Height and Width for the final export.
    3. Drag over your image to capture the ideal crop, adjusting as needed from the corner of the selection box.
    4. Click SAVE to perform the crop.
    5. You can then change the IMAGE WIDTH and IMAGE HEIGHT to the same pixel size entered previously and click DOWNLOAD.
      (You can save the image as a JPG or PNG and adjust the QUALITY if needed. Recommend using around 90%)

    Cropping an image to any size

    1. If you do not have a set aspect ratio, click on the Crop tool and freely drag and adjust the selection box to the desired shape.
    2. Click SAVE to perform the crop.
    3. You can then change the IMAGE WIDTH or IMAGE HEIGHT to a desired output size and click DOWNLOAD.
      (You can save the image as a JPG or PNG and adjust the QUALITY if needed. Recommend using around 90%)
  • 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".