Images
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 type | Dimensions |
|---|---|
| Hero banner (UQ homepage) | 1528px by 1000px Use homepage hero banner template to create correctly |
Hero banner (articles, events) | 2160px by 540px Use legacy hero banner template to create correctly |
| Hero banner (landing pages) | 1528px by 672px Use landing page hero banner template to create correctly |
| Generic card (landing pages) | 1080px by 755px |
| In-page images (articles, events) | 1080px by 755px |
Teaser (events, articles) | 1080px by 755px Use teaser image template to create correctly |
| Image panel (landing pages) | 862px by 720px |
| Person card (articles, short courses) | 480px x 480px (must be square) |
| Testimonial (programs, plans) | 480px x 480px (must be square) |
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.
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:
- Save your image at the correct dimensions, optimised for web and follow the file naming conventions.
- Once you log into Drupal, hover over 'Content' in the Drupal menu then select 'Media' > 'Add media' and then 'Image'.
- 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.
- Upload the image.
- 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).
- Save.
Replacing an existing image
To replace an existing image with an updated version:
- Save the replacement image at the correct dimensions, optimised for web and follow the file naming conventions.
- Once you log into Drupal, hover over 'Content' in the Drupal menu then select 'Media'.
- Find the image you want to replace and click 'Edit'.
- If you're just uploading a re-cropped version of the same image, take a copy of the alt text.
- Click 'Remove'
- Upload the new file.
- 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).
- Save.
The new version of the image should now display anywhere the previous one was used.
Using existing images in Drupal
Sometimes it may be appropriate to use an existing image from the Drupal media files rather than uploading a new one, but in many cases images have been used for specific purposes and shouldn't be reused in other contexts.
The media name should give you an indication of the original purpose, and you can check where it has been used by opening the file and checking the Usage tab. Don't use any images that are marked as 'campaign'.