Image ratios, sizes and component use

Owned by Jess Pietsch (Unlicensed)
Last updated: 21 May, 2024 by Marcella Marino
7 min read

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

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:

Media 1x1.png

Avatar display in the timeline component

Below is an example of how an image is used in the timeline component.

Timeline mockup.png

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.

  1. Select the Customise Header tab and select Full-width background image.

     

  2. The Hero image upload will display. Click Select images, then Add image.

  3. Select Choose File to add a new image from your computer.

  4. 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).

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

  6. Complete the Alternative text field (if the image is informative) and the Title field.

  7. Select the License Type for the image - Copyright or Creative Commons Attribution 4.0

  8. Select your Department name from the drop-down.

  9. Select the Site that the image belongs to.

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