Make sure your image is appropriate for your content
Before you edit and optimise your image, make sure you need to include one on the page, and that you’ve chosen one that’s appropriate for the website and your content.
Think about the component you’re using
Depending on the Typecase component you’re using, you need to think about whether the image will appear as it should, based on its:
- size
- aspect ratio
- composition
Image size and aspect ratio
You need to use images of different sizes and aspect ratios depending on the component you're adding the image to.
The size of the image is the number of pixels across the horizontal and vertical edges.
The aspect ratio is the ratio between the horizontal and vertical edges.
For example, this image:
- is 1280 by 726 pixels
- has an aspect ratio of 16:9
Before you crop and optimise your image, try to assess whether or not it will fit the required image size and aspect ratio for the component you plan to use.
Composition
You also need to think about whether the image's composition will work when it appears on the website.
Some Typecase components adjust the frame around images when they appear on screens of different sizes.
Other components display images at smaller sizes, so make sure you don't use an image that's too detailed or complex.
Components with circular or rectangular image frames
Depending on the content type, you can use some components to show up to six small images in either circular or rectangular frames.
These components are:
To use these components, you need to choose the shape of the frame for the whole section when you add the images.
Make sure the images you add will fit within the shape of the frame. For example, choose closely cropped headshots rather than full-length photographs of the people you wish to feature.
Hero images
The Hero image appears at the top of certain content types as a full-width image behind the page title and summary. It is automatically darkened so as not to take emphasis away from the page title and summary, which sits on top of it. For this reason, avoid using dark photos for your Hero image.
Make sure the subject of a Hero image is in the right place so it’s visible to anyone looking at the page. For example, on a mobile device, you might only see the central part of a Hero image because anything outside that will be cut off.
Crop your image so that the most important elements are in the centre of the image, and away from the edges. This cropping template shows where this central area of the Hero image lies.
Pinned item images
Pinned item images appear as small images where content is pinned to a:
- Case study page
- Topic page
- Landing page
Make sure the subject of your image is large enough to be clear when people see it at the smaller pinned item size.
You don’t have to use the same image in the Pinned item image and Hero image components. If the subject of your image is too small for a pinned item, you can:
- create a different version of the image more tightly cropped around the subject
- use a different image
Role holder images
Images of role holders on Person profile pages should be closely cropped headshots, not full-length photographs.
Split section images
You can add Split components to certain content types to show an image alongside some text. You can choose whether your Split section image appears to the left or right of the accompanying text.
Make sure the subject of any image you add to the Split component is in the centre of the image so it doesn’t get cut off when people view it on different sized screens.
Crop your image
You can crop images for the website using photo editing software on your PC or Mac.
Find out how to:
- edit images using Microsoft Photos
- edit images using macOS Photos
Make sure you crop images to the correct size and aspect ratio for the Typecase component you’re using.
Things to avoid
Never stretch an image to fit the page as this will distort the image.
Don’t use blurred or pixellated images. Be careful when you resize images, particularly when making them bigger, as this can make the image look blurry or pixellated.
Optimise and export your image
Before you start exporting an image, read the web page on image specifications for Typecase components. When you’ve cropped your image to the correct size and shape, you need to export it from the photos app in an appropriate format and size for the website.
To export an image from Microsoft Photos:
- Right click on the image you want to optimise and select ‘Open with Photos’.
- Next, click the three horizontal dots in the bar above your cropped image.
- Click ‘Resize image’.
Change the 'Width (px)' and 'Height (px)' to resize your image to the correct pixel dimensions for the content type, then click ‘Save’.
Find out how to export an image from macOS Photos.
Format
Save your images as:
- JPEG for photographic images and for screenshots from video
- PNG for software screenshots, drawings, illustrations, and graphics
- SVG for icons, logos, maps and anything that could or should be scalable
File size
When you export an image, check the file size is about 1MB or less.
Larger images can slow down a web page’s load time, which means search engines might demote the page down their results, making it hard for people to find.
If you need to reduce the file size, go through the export process again and choose a lower image quality. Don’t choose a smaller image size because this might mean Typecase has to stretch the image to fit the frame.
Name
Give your image a meaningful file name when you save it, for example, 'university-campus-in-winter.jpg'. This 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'.