This guide is for sites built in the new version of Drupal (Study and Scholarships).
If you're working on a Drupal 7 (UQ Standard) site, see images on Drupal 7.

Recommended image dimensions

When you save your file at the recommended dimensions, make sure you also optimise the image to reduce the file size.

Image typeDimensions
Author card (articles)480px x 480px (must be square)
Generic card (landing pages)1080px by 755px

Hero banner (articles, events)

2160px by 540px
Use hero banner template to create correctly
Image panel (landing pages)862px by 720px
In-page images (articles, events)1080px by 755px

Teaser (events, articles)

1080px by 755px
Use teaser image template to create correctly
Testimonial (programs, plans)480px x 480px (must be square)
Top of page

Optimising images for web

When saving images for the web, optimise them to save them at the smallest file size possible while retaining adequate quality.

File size should ideally be less than 300KB and definitely no larger than 1MB.

How to optimise images

Use Photoshop, or another photo editor, to adjust the image properties:

  • Resize the image to the recommended dimensions.
  • Set the colour format to sRGB (not CMYK).
  • Set the resolution to 72 DPI. Higher DPI resolutions are for print, not screens.
  • Save the image in jpg format. Don't use png or gif formats unless the image is a vector graphic.
  • Save at high quality – around 80%.

Once you’ve saved your image with the adjusted properties, compress it using a compressor like Kraken.io.

Compressing images allows you to reduce file size while still maintaining quality. If the quality of your image lowers when compressing, use the 'lossless' option.

Top of page

Adding a new image

Creating a hero banner or teaser image? Use the template to make sure it's right.

To upload a new image:

  1. Save your image at the correct dimensions, optimised for web and follow the file naming conventions.
  2. Once you log into Drupal, hover over 'Content' in the Drupal menu then select 'Media' > 'Add media' and then 'Image'.
  3. Add a 'Name' only if useful - this is used in the backend only; think about what content managers will search for. If no name is added, the filename will automatically be used as the name.
  4. Upload the image.
  5. Enter alt text. This should be a brief description of the content or purpose of the image for users who are unable to see it (e.g. if they are using a screen reader, they have images turned off or the image doesn't load).
  6. Save.
Top of page

Replacing an existing image

To replace an existing image with an updated version:

  1. Save the replacement image at the correct dimensions, optimised for web and follow the file naming conventions.
  2. Once you log into Drupal, hover over 'Content' in the Drupal menu then select 'Media'.
  3. Find the image you want to replace and click 'Edit'.
  4. If you're just uploading a re-cropped version of the same image, take a copy of the alt text.
  5. Click 'Remove'
  6. Upload the new file.
  7. Enter alt text. This should be a brief description of the content or purpose of the image for users who are unable to see it (e.g. if they are using a screen reader, they have images turned off or the image doesn't load).
  8. Save.

The new version of the image should now display anywhere the previous one was used.

Top of page