Photography
#
Aspect ratiosWe 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 rulesFor 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 libraryWhen 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 imageryImages 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 imagesReducing 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 sizesYou 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 JPEGIf an image has some transparency save as a PNG, otherwise save as JPEG.
#
ToolsThere are a number of tools that allow you to compress your images: