Skip to main content

Preparing an image to use on a web page

How to prepare and edit an image for use on the University website, including how images should be prepared based on the Typecase content type you're using.

Preparing and editing images

Once you've downloaded the image to your computer, you should crop it to the correct size. You can use applications like Photoshop or GIMP to edit your image, or free web tools like Pixlr X photo editor.

Read our guide to resizing images in Pixlr.

Images for Person Profiles

Person Profile images must use 1:1 aspect ratio. This means they should be square – the width should be the same size as the height.

These images should be at least 500px wide, but please upload at the largest size you can.

Hero images for subject and course pages

Subject and course pages have a large image across the top of the page. Depending on the size and shape of their screen, some users might not be able to see all areas of the original image.

Use the image cropping template to crop your image, making sure the subject of the image is framed by the central box. This will guarantee that users can see the important parts of the image on any screen size.

Images for all other Content Types

All other images on the website must use 16:9 aspect ratio. This includes images of people.

example image of a person at 16:9 aspect ratio

All these image sizes are the same ratio so any of these pixel dimensions are fine to use:

  • 800px by 450px
  • 1024px by 576px
  • 1280px by 720px
  • 2048px by 1152px
  • 2560px by 1440px

Pixel dimensions should be no smaller than 800px by 450px and no larger than 2560px by 1440px.

Image file size

Images uploaded to the site should be no larger than 1mb as this will help us make sure page loading times are kept to a minimum.

Image resolution

Optimise images for use on the web at 72dpi (dots per inch).

Image formats

Only use specific image formats:

  • JPEG – use for photographic images and for screenshots from video
  • GIF/PNG – use for software screenshots, drawings, illustrations and any non-pictorial graphics
  • SVG – use for icons, logos, maps and anything that could or should be scalable

Processing your image

Don't apply effects, overlays, gradients, borders or filters that make the image appear manipulated.

An example of a photo with a grainy effect added and a good photo which looks natural

Crop the image to highlight the relevant subject.

A bad example of a photo where the subject has been cropped in half that also has no central focus and a good example of a photo with focus on subject

Never stretch an image to fit the page as this will distort the image.

An example of a photo where the image has been stretched and a good example if an undistorted image

Avoid blurred or pixellated images. Resizing an image, especially to make it bigger, can make it blurred or pixellated.

An example of a blurry image and an example of a clear image

Don't add text over images. Text embedded in an image is inaccessible to users browsing with assistive technologies like screen readers.

An example of an image with text embedded and an example of the same image but with no text embedded

Naming your image

Give your image a meaningful file name when you save it to your computer. For example, 'university-campus-in-winter.jpg' is a good file name for a snowy shot of the campus as it describes the important elements in the image.

Always try to avoid meaningless file names like 'IMG00023.JPG'.

Adding images to web pages.

Read our guide

Contact us

If you have any questions about preparing images to use on the website, get in touch.

On this page