Preparing feature panel images

Our responsive website displays different versions of the same image on desktop and mobile.

Site Editor will automatically crop and optimise images to the correct dimensions for you. 

If you need more specific control or need to prepare images outside of Site Editor, you can find out more technical details below.

Responsive feature images

The website is responsive, meaning that the design layout changes according to the size of screen. This allows us to accommodate the same content on both mobile-sized and desktop-sized screens.

Feature panel images needs to work within this framework. The full image displayed on a mobile, is cropped into a 'letterbox' format when viewed on a desktop.

Example showing how banner image is cropped on desktop compared to mobile

Aspect ratios

Feature panel images are prepared and loaded into the site editor at an aspect ratio of 3:2. An aspect ratio is simply the proportion of the image's width to its height. For a 3:2 image, the width is 1.5 times the height.

On a mobile someone will see the full 3:2 image.

On a desktop this image is automatically cropped to 5:2 – the image width is 2.5 times its height, viewed as a 'letterbox' shape.

Diagram illustrating 3:2 and 5:2 aspect ratio concepts

Elements overlaid on the image

On desktop, the image needs to take into account the design elements that may overlay the image. On mobile, the entire image is shown without any overlaying design elements.

Screenshot of the news homepage

The horizontal menu overlays the top of the image when used in a header.

Screenshot of a standard feature panel

A feature panel may have a block heading to the top left or right. It may also have heading and description text at the bottom left or right. The subject of the image needs to be positioned slightly to the right or left.

Screenshot of a content page heading with a background image

A content page with background image has a horizontal menu and heading overlay. The subject of the image needs to be placed above this band.

Screenshot of a student profile page
Screenshot of a student profile page

The profile page block heading within the programmes plant overlays the bottom left of the profile image. The subject needs to be positioned to the right.

Shoot the image so that the face is slightly right and vertically centred. Avoid strong close-ups. Zoom out showing the head and shoulders allowing some space around the subject.

These also need to be able to be cropped as a square for presenting the round thumbnails that appear on the profile listings.

Images for call-to-action feature panels

Sometimes you'll need to use a call-to-action, a page title, or a search feature panel.

These panels have large text centred on the panel. This means the text can conflict with the image behind it, making the text hard to read. This is particularly true if the image is complicated or busy.

To help with this we've provided a way in Site Editor to either have the title text in white (with your feature image automatically darkened) or have the title text in dark blue (with a darkened image).

Trees on the side of a hill. The upper right half of the frame is filled with mist and cloud.

The original image before it's been positioned, had heading text added, or modified automatically by Site Editor.

a screenshot of dark text over a light image of trees

You can have a panel where we automatically make the heading text dark and the image a bit lighter...

a screenshot of light text over a dark image of trees

...or you can choose to have light text with the image made a bit darker. In this case the lighter image is the easier to read, and perhaps aesthetically more pleasing.

As you can see in the examples above, you'll need to experiment with what works best for your image. Sometimes you'll find dark text on a lightened image works best.

Note also how here we've positioned the image so that the text falls over the mist and cloud. You'll find that text is easier to read when the background is simple.

a screenshot of dark text over a light image of trees. The text on the image isn't very visible.

The image is cropped differently from above. This gives very poor readability.

a screenshot of light text over a dark image of trees. The text is legible.

Again, a different crop from above. This time the text is fairly legible. However the original dark text on a light background is still probably the best option.

screenshot of a panel with text laid over a very busy picture of pencils in a drawer

Please always try to keep your images simple. This kind of image will never work well with text over the top of it.

With a mix of options in Site Editor, and appropriate image choice and cropping, you should be able to make an attractive, impactful, and readable call-to-action feature panel.

Adjusting the alignment

On desktop displays, the middle section of the image is chosen by default. You also have the flexibility to display the top, top centre or bottom or bottom centre section, if this works better for your particular image.

Screenshot showing image alignment

Be aware when using a photo where the main subject close to the top of the image. The image may get covered by the navigation menu on the page.

Screenshot showing banner alignment of people

The photo above is cropped near to the top of the subject, but the face is not obscured by the navigation. It is best to try and keep the full head in the image – close-up faces can look scary.

Screenshot showing banner alignment of face

Avoid graphics - it's better to use a suitable photo. If you do need to use graphic text or logos, make sure they are not obscured by navigation or an overlay heading. 

Screenshot showing banner alignment of a graphic

Image size and quality

So you’ve found your ideal image. It’s a good, high-quality, professionally-taken photo with a great subject. However, the file is likely to be far too big for using on the web.

What we need

Image size - your original image may be quite large, perhaps 3000 pixels wide or more.

Decide on the type of crop you'd like, suitable for the space that the image will fill.

When uploaded to Site Editor, the banner image will be cropped to 1920 pixels wide by 1280 pixels. 

Quality - your image should be saved as a JPEG format.

You can upload an image up to 5MB in size and Site Editor will optimise the image size for you. The original image you upload need to be of a suitable quality. 

Screenshot showing image quality

Editing tools

Cropper tool

If an image needs to be cropped, try using cropper tool. Choose the banners/feature panel option and it will automatically save the image at the correct aspect ratio and resolution (1920x1280 pixels). It can also be used to adjust the position of the subject – for instance by moving it to the left or the right or by zooming in or out.

Reduce file size: resizeimage.net

resizeimage.net is a free online tool that provides the basics for resampling your image.

Editing using Photoshop

If you have access to Photoshop, you can do all of your image editing within this application. We've prepared a Photoshop template (PSD 30MB) that you can use to position and resize your image and adjust the file size.

It gives you a preview of how your image looks in a feature panel, along with some of the design elements which may overlay it.

The guidelines below assume that you are familiar with the basic features of Photoshop such as layers, the free transform tool, zooming in and out, copying and pasting.

Copy and paste your image into a layer on the template. Adjust sizing and position, using the 'Crop and overlay preview' layers to see how the image will appear. When ready, hide the 'Crop and overlay preview' layers and save as a medium, progressive JPEG. 

A picture being cropped in Photoshop

Using a photographer

A photographer needs to be aware of how feature panel images appear on desktop and mobile devices.

Ideally they need to provide images that have sufficient space around the subject. This allows the image to be cropped in various ways to accommodate the various feature panel designs.

Photographer checklist:

  • Make sure that the photographer has read this page and is confident with the technicalities and aspect ratios of feature images for the website.

  • Ask your photographer to click around the website to become familiar with the design and different feature panels.

  • Provide your photographer with this sheet (PDF 800KB) that they can print out to help orientate them with the feature panel format while they are out taking shots.
Last updated