...
| 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. While we have included a rough guide for image ratios and sizes, we recommend images are tested before being published. |
Recommended file types
The following file types are recommended JPEG is the preferred format for CMS images:
...
JPEG
...
, 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:
...
A rough guide for 16:9 images arein pixels:
wide: 1280 pixels
high: 720 pixels
| Tip |
|---|
Recommended component use
|
...
Profile, timeline and social images
We recommend using the image ration 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.
...
| 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
...
To maximise the focal point feature, it is recommended that you resize your image to the ratio 21:9 im. A rough size guide for crystal-clear hero banner images is:
wide: 2560 pixels
high: 1440 1080 pixels
...
Step 4: upload your image and set the focal point
...
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.