Image ratios, sizes and component use
This guide covers how images work in the Single Digital Presence (SDP) Content Management System (CMS). It includes recommended image ratios and a size guide for images used in CMS components. It also includes instructions on how to test an image on different screen sizes.
On this page:
Changes to CMS images
In the latest update of the Ripple front-end design system, ratios are now used rather than exact pixel sizes for CMS images.
Image containers are responsive and change on different devices. It was designed this way to best display your content and make optimal use of the available screen space.
Because of this, we cannot give exact image sizes for components.
While we have included a rough guide for image ratios and sizes, we recommend images are tested before being published.
Recommended file types
JPEG is the preferred format for CMS images, as they can be compressed to a smaller file size.
If you need to use a transparent image, you can use a PNG.
Resizing your images
If you don’t have professional software like Adobe Photoshop, you can use these free image editing tools:
Image guide and component use
Basic text, promotion cards and campaign images
We recommend using the image ratio 16:9 for basic text, promotion cards and campaigns.
A rough guide for 16:9 images in pixels:
wide: 1280 pixels
high: 720 pixels
Recommended component use
Primary and secondary campaigns (avoid using an image with a focal point in the top left-hand corner as this will be cropped on desktop display)
Profile, timeline and social images
We recommend using the image ratio 1:1 for profile, timeline and social share images. This image will be automatically masked with a circle, you will only need to provide a square image. Make sure you upload an image that is zoomed into the face, because these image types are reduced significantly.
A rough size guide for avatar images is:
wide: 600 pixels
high: 600 pixels
Recommended component use:
Avatar display in the timeline component
Below is an example of how an image is used in the timeline component.
Full-width background / hero image (Customised Header)
Landscape images work best for header or hero banners in the CMS.
Step 1: select the best image
Before selecting an image, it’s important to:
review the below steps to understand how to create the ideal hero banner image for all screen sizes
know then length of your page title and introduction text, as this will determine which image ratio to use (16:9 is best for more than 3 lines of text and 21:9 is best for 2 lines of text)
know the area of the image that you’d like highlight, for example, a person or object to support your content.
Original photo
For this example, the original image downloaded uses the ratio 3:2.
Step 2: check the image will work with your content
If the image doesn’t follow the specifications below, you need to crop your image (see step 3 below). Avoid important information on the left of the image, as this will be blocked by the page title and introduction text.
Below we’ve used guidelines to show that the image can be broken up into 3 panels. The first 2 panels are where the page title and introduction text commonly appear. The 3rd panel is where the focal point of the image should appear.
Step 3: resize your image
As mentioned in step 2, if your focal point doesn’t fall into the 3rd panel, you need to reposition the image to suite the focal point. This is so the image displays on the smallest screen size. The following image ratios work best:
16:9 (best for more than 3 lines of text)
21:9 (best for 2 lines of text)
If you don’t have professional software like Adobe Photoshop, you can use these free image editing tools:
Header banners that include more than 3 lines of text
To maximise the focal point feature, it is recommended that you resize your image to the ratio 16:9. A rough size guide for a landscape images is:
wide: 1280 pixels
high: 720 pixels
Header banners for less than 3 lines of text
To maximise the focal point feature, it is recommended that you resize your image to the ratio 21:9. A rough size guide for crystal-clear hero banner images is:
wide: 2560 pixels
high: 1080 pixels
Step 4: upload your image and set the focal point
For the optimal presentation of your image across all screen sizes, it's best to set a focal point.
Find your page in the CMS and select Edit.
Select the Customise Header tab and select Full-width background image.
Â
The Hero image upload will display. Click Select images, then Add image.
Select Choose File to add a new image from your computer.
Add a descriptive title for the image to the Name field (this is what’s used to search for your image in the Media library).
By default, the + icon is set to the middle of the image. You need to drag the + icon to the desired focal point (see image below for the ideal location of a focal point). Note: when positioning your focal point, allow enough space above the focal point for the main menu. You can see how the focal point responds on different screens in step 5.
Â
It is recommended that the focal point is set at the top of the 3rd panel as shown below.
Complete the Alternative text field (if the image is informative) and the Title field.
Select the License Type for the image - Copyright or Creative Commons Attribution 4.0
Select your Department name from the drop-down.
Select the Site that the image belongs to.
Select Save.
Step 5: test the image before publishing
Test the image to see how it will respond on different devices. This means that you should check that the position of your image focal point works for the following screens:
small (mobile phone)
medium (tablet)
large (desktop).
Simple screen test
Once you have a draft preview link of your image within a content page, you can simply hover over the far right or left hand side of the browser and drag it inwards to see the tablet and mobile view.
Accurate screen test
When previewing a front-end draft of your page, right-click on an empty area of the website and select Inspect > Inspect Element.
Alternatively, you can use the following keyboard shortcuts:
Mac: Command + Option + i
PC: Ctrl + Shift + I
Then select the Dimensions drop-down to change to particular device / screen size.
Remember, the website is responsive and will adjust the image based on the amount of content used, and the device it is displayed on.
Â
Â
Â
Â
Â
Â
Â
Â
Â
Â
Â
Â
Â
Â
Â
Â
Example of header display on common screens
Below is an example of how a hero banner image responds on small, medium and large screens.
Mobile phone (small screen)
Tablet (medium screen)
Desktop (large screen)
Logos
Logos can now be placed in various locations within your site. Follow these dimensions for the best outcome and clarity of your logo.
Primary navigation / site-wide logo
Width: 280 pixels
Height: 80 pixelsÂ
File type: PNG
Supporting logo in hero banner
Width: 656 pixels
Height: 184 pixelsÂ
File type: PNG
Footer
Width: 240 pixels
Height: 96 pixels Â
File type: PNG
Favicon
Width: 512 pixels
Height: 512 pixelsÂ
File type: PNG
Corner graphics for customised headers
You can add a top and bottom corner graphic to landing pages. It’s recommended that they’re created by a graphic designer, using design elements and colours from your department or agency’s branding guidelines.
Once uploaded to the CMS, the graphics will:
scale to fit different screen sizes
automatically crop to fit the triangular shaped design.
Example of a top and bottom corner graphic added to a landing page:
Corner graphic size guide
The top and bottom graphics should be created in PNG format using the following dimensions. The PNG files must be exported at 144 pixels per inch.
Top corner graphic
wide: 760 pixels
high: 464 pixels
Bottom corner graphic
wide: 544 pixels
high: 192 pixels
More information
Use the aspect ratio calculator to help with image cropping
For more information about CMS images, visit the Ripple Pattern Library.
For help with images, log a content support request.