Crafting your user experience

For an optimal user experience it is strongly recommended that images are prepared before upload This page is a brief guide to curating media for use on your website.

Please also see your typography reference for information on typographic styles used for this website.

---

Image Sizes

All image sizes in the list below are 1x density @ 72dpi. Please see the Image Density section below.

Item	Pixel size (w x h)	Ratio
Banner	1366 x 768	16:9
Banner Mobile	375 x 566
Staff profile	200 x 160	5:4

Image Density

All images should be prepared at 72dpi. Screens do not reflect image dpi differences, so the additional information is simply discarded. By optimising the density you are reducing the image size and in turn the amount of data that needs to be transferred to the user, which results in faster page loading times. The way to prepare images for higher density screens is by increasing the image dimensions. This will ensure an image remains crisp on higher density screens.

To prepare images for higher density screens (often referred to as Retina screens), we use a density multiplier. In the case of a 600px x 400px image that we would like to use on a 2x density screen, the required image dimensions would be doubled to 1200px x 800px. For a 3x screen multiply by 3, e.g. 1800px x 1200px.

Now the good news is you do not need to prepare an image at each density format. Simply create the highest one you need, upload to the page media section, and we'll handle serving the correct density to the user for their device. The trick is in the filename - when naming a file use the density multiplier @Nx, for example my-great-image@3x.jpg

We recommend all images be prepared at a minimum of 2x density as this will encompass most of your audience. This means resizing your images and naming your files with a @2x multiplier suffix. If there is the ability to achieve 3x density with an image, go with that as it will offer you some future proofing. If an image cannot be prepared at the required size for a high density, screen simply omit the multiplier from the filename.

So just in case you're wondering what happens if you don't prepare images for higher density screens, the answer is that it's not the end of the world. Your images will still display, its just that they are may appear to be very soft, or even slightly blurry on higher density screens. Where images are uploaded that are bigger than the required display sizes, we will automatically prepare them for display, however this comes with its own caveats. Please also see the Image resizing & cropping section below.

Image resizing & cropping

Of course your images can be larger or different aspects to the sizes set out above if you wish. If you do upload oversize or off-aspect images, we will make the images fit into their respective spaces on the website using automatic resizing and cropping. The downside of this is that the system does not know which part of an image represents the intended focus, so this technique may result in important areas of the image being cropped out. Ultimately we would always recommend images are curated as it directly impacts both user experience and performance.

Banners

Banner images are those that appear in the Hero Slideshow section of the page. When preparing images for this section, there is the option to include mobile specific images alongside non-mobile versions. This is to account for the differing aspect of mobile devices and to give you greater control of how your image displays on mobile. The filename for mobile images should include "-mobile" (dash mobile), e.g. my-great-image-mobile@3x.jpg This tells the system that this is the preferred image to display on mobile devices. Please be sure to include both mobile and non-mobile images in the slide images selection where possible.