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. It also includes instructions on how to test an image on different screen sizes.
On this page:
| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
In the latest update of the Ripple front-end design system, ratios are now used rather than exact pixel sizes for CMS images.
| Info |
|---|
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. |
| Info |
How to use image ratios and CMS componentsBelow you will find some guidelines to help choose the right image. We have included some generic image sizes for components, but due to the nature of responsive websites and design, we recommend testing the image display before it’s published. While we have included a rough guide for image ratios and sizes, we recommend images are tested before being published. |
Recommended file types
There are many file types you can upload onto the CMS, but for images the following file types are recommended:
JPEG
...
is
...
the 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 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 the suggested these free image editing tools:
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.
...
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 landscape images is16:9 images in pixels:
wide: 1280 pixels
high: 720 pixels
| Tip |
|---|
Recommended component use:
|
...
Ultrawide format (ratio 21:9)
A rough size guide for crystal-clear hero banner images is:
wide: 2560
high: 1440 pixels
| Tip |
|---|
Recommended component use:
|
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)
...
Desktop (large)
...
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)
|
...
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: 400 600 pixels
high: 400 600 pixels
| Tip |
|---|
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. Ratios for full width background images are provided below. Call to action banner style customised header images should be ratio 3:2 and 1500 pixels wide by 1000 pixels high.
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 devices and screen sizes, it's best to set a focal point.
Find your page in the CMS and select Edit.
Select the Media icon 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).
Select Choose File to add a new image and select the image from your computer.
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:
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.
...
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
...
Complex images
The website will adjust the size of your image for display but in order to not require too much data and time to load, the image shouldn’t be larger than 1200 to 1500px wide. Make sure text is large enough to be read on small devices.
Read our guide on adding a complex image.
Read about the Media fullscreen component on the Ripple site.
...
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.