Image
Images like photos and illustrations express the brand alongside supporting text content.
Breakdown
Image (3:2)
The default image ratio is 3:2 and has an area to provide an image caption.
Image (10:4)
A wider 10:4 ratio banner image.
Octopunct
The standard octopunct shape. It can be used to crop images within it.
Usage
Images are a fundamental way of showing the RSPCA's humanity. Images showcase the animals we help and the people who help them. The ratios developed have been designed to sit alongside supporting text.
Octo collage
An octopunct collage can be used within a header banner. Breakout imagery should only be placed top left or bottom right but these two positions allows imagery to breakout of any of the four sides of an octopunct without interfering with the collage spacing. The spacing between each octopunct is set to 27px.
Breakout top left
Breakout bottom right
Anatomy
Caption vertical gap
Images have a 9px vertical gap between the image and the caption container.
Caption horizontal gap
Captions have a 9px horizontal gap between the icon and it’s text counterpart.
Accessibility
Provide Alt text for images so they can be read by assistive technologies. Alt text should give an accurate description of the image and its context. If an image is not crucial to a pages content, then it should be marked as decorative.
If images are decorative and don’t provide useful information they should be hidden from assistive technologies.
Don’t repeat information that’s on the page in alt text since screen readers will read it twice.
