Optimising images for the web
This guide is for Drupal 7 (UQ Standard) sites. If you're working on a site built in the new version of Drupal (like Study or Scholarships), see images on new Drupal.
To ensure your images load quickly and look good, it's important to optimise them for the web.
Images for the web should be high quality and less than 1MB in size. Larger images cause pages to load slower – this affects your website's:
- user experience
- search engine rankings (SEO).
When saving images for the web, the smaller the file the better, as long as quality is retained.
Recommended image properties
Image type | Dimensions | File size |
|---|---|---|
Teaser images | 640px by 640px | 50KB to 200KB |
Card images | 640px by 640px | 100KB to 300KB |
Hero banners | 2560px by 560px (landscape) | 150KB to 400KB |
Profile images | 640px by 640px | 50KB to 200KB |
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.