Photography

Nucleus guidelines for use of photography.

Aspect ratios

We have three aspect ratios, 1:1, 4:3 and 16:9, which we use in various ways. Take a considered approach and do not overload with too many variants.

Two of our core aspect ratios 1:1 and 16:9 Two of our core aspect ratios 1:1 and 16:9.

Responsive rules

For all of our aspect ratios, our rule is that all images scale proportionally to their ratio. This means that they will retain their shape from large screens to small ones.

Our aspect ratios always scale proportionally

Our aspect ratios always scale proportionally. If it is a full-width image the highest width should be 1440px.

Our image library

When selecting photography think about the subject matter and the customer benefit you want to convey. This is made stronger when paired with copy that links the story together.

Our library can be accessed here. Please refer to our brand guidelines for more further details on photography selection and art direction.

Storing imagery

Images that are used on our site, need to be stored in the CMS. This allows for imagery to be updated and shared amongst the different journeys.

Due to limitations of our CMS, we can only store images as jpeg or png. We are unable at this time to use newer modern image file types such as webp.

Optimise your images

Reducing the size of images benefits the user by allowing their page to feel like the page has rendered quicker and will save data on their mobile networks. A perceptively faster-running page, for us, reduces bounce rates and increases conversion.

A 1-second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions

https://headspin.io/resources/marketing/reports/5136-RR-performance-web-application.pdf

Image file sizes

You should aim for the smallest file size that does not degrade the image too much that it becomes distracting to the customer.

These numbers are just a guide, if you can get lower than these numbers - then you should.

  • Full width image: < 200kb.

  • Side image: < 100kb.

  • Additional image: < 50kb.

  • Decoration: < 10kb.

(For PNGs add an additional 50kb).

PNG or JPEG

If an image has some transparency save as a PNG, otherwise save as JPEG.

Tools

There are a number of tools that allow you to compress your images: