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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
- 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.