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