This guide covers how images work in the Single Digital Presence (SDP) Content Management System (CMS). It also includes recommended image ratios and a size guide for images used in CMS components.

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.

Recommended file types

There are many file types you can upload onto the CMS, but for images the following file types are recommended:

• JPEG

• PNG (this is a preferred format)

Step 1: Select the right image

Select images that provide an opportunity to position the focal point on the right side. If an image is flipped horizontally, be mindful of text on clothing or street signs, as they will be backwards.

One of the most frequently encountered resolutions for images taken with cameras and mobile phones is 1280 pixels wide x 720 pixels high. When you upload an image, there's no need to crop it yourself; the CMS automatically handles the cropping for you. All you will need to do, is set a focal point (and this is achieved in the CMS).

If images are used in a hero banner, avoid important information on the left of the image, as this will be blocked by the page title and summary.

Step 2: Resizing an image

If you need to resize your image and don’t have professional software like Adobe Photoshop, you can use the suggested free image editing tools:

• Pixlr.com

• Canva.com

Images are predominately in 2 formats, portrait or landscape.

While our CMS is designed to support these 2 formats, we recommend using a landscape image. If you decide to use a portrait image, we recommend to have lots of space around the subject.

You can use the guides below to resize your images, however, images must be tested to ensure they display correctly across different devices. Use steps 3 and 4 below.

Landscape images (ratio 16:9)

A rough guide for landscape images is:

• wide: 1280 pixels

• high: 720 pixels

Ultrawide format (ratio 21:9)

A rough size guide for crystal-clear hero banner images is:

• wide: 2560

• high: 1440 pixels

Hero banner / full-width background display on devices

Below is an example of how a hero banner image responds using the standard ratio of 16:9, on small, medium and large screens.

Mobile phone (small screen)

Tablet (medium screen)

Desktop (large screen)

Tip: the image moves around a pre-defined image container. The image will enlarge and crop differently to suit a user’s device, as well as the length of your content.

For example, if you have 3 lines of introduction text in your headline, the image will zoom in and use the maximum height of the image to allow for the extra content.

Avatar (ratio 1:1)

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: 400 pixels

• high: 400 pixels

Avatar display in the timeline component

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

Step 3: Upload the image and set the focal point

For the optimal presentation of your image across all devices and screen sizes, it's best to set a focal point.

1. Select the Media icon, then Add image.

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

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

4. Once the image has been uploaded, you can set the focal point of the image by using your mouse or moving the + icon on the image to the desired focal point:

   

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

6. Select Save.

Step 4: Review 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).

How to test your image on different screen sizes

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.

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

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.