Name
ImageFocal pointSpecify the focus of this image in the form "leftoffset,topoffset" where offsets are in percents. Ex: 25,75One file only.
100 MB limit.
Allowed types: png gif jpg jpeg.
License Types
Copyright
Creative Commons Attribution 4.0
Caption
Alignment
None
Left
Center
Right
Restricted
METADATA
Audience
Department
Topic
Published
Revision comments
Add an image
Find out how to name, upload, embed and write alternative text for your images.
On this page:
We follow the Australian Government Style Manual: Images
Images can help users if they are clear and simple. Make sure everyone can access the information that images convey.
Image dimensions and formats
Images need to be cropped and resized before uploading into the CMS. We recommend using JPG format as PNG can slow down the page's loading speed for users.
All images must be at least 72ppi.
Type of image | Dimensions (in pixels) |
|---|---|
Body content | Landscape = 818 (w) x 496 (h) Portrait = up to 400 (h) |
Image gallery | Landscape = 1200 (w) x 800 (h) Portrait = 533 (w) x 800 (h) Square = 800 (w) x 800 (h) Landscape is preferred. |
Navigation and Promotion cards | 818 (w) x 496 (h) |
Hero banner | 1600 (w) x 600 (h) |
Feature image | 818 (w) x 496 (h) |
Primary campaign | 699 (w) x 411 (h) |
Secondary campaign | 580 (w) x 340 (h) |
CTA image | 336 (w) x 249 (h) |
Profile image | 156 (w) x 156 (h) This automatically displays as a circle. |
Complex image component | 800 (w) x 400 (h) |
Logo in hero banner | 128 (w) x 100 (h) This will be decreased down to a height of 64 on mobile. Avoid adding an image/logo over another image. |
Logo in top navigation (for devs only) | See Ripple |
Logos in footer (for devs only) | See Ripple |
Embedding images in your content
If your image is a graph, flowchart, map or includes text descriptions, you need to follow the steps to add this as a complex image component instead.
Open all
How to name your files
How to upload and embed images
How to embed smaller images
How tall images behave on the front-end
Alternative text (alt text) for images
We follow the Australian Government Style Manual: Alt text captions
Alternative text explains information in images for screen reader users. Captions describe images to help users relate them to surrounding text. Titles identify images and number them in long-form content.
The only images that do not require alt text are:
sensory images
if the image is intended to create a sensory experience. For example, an image of an artwork.
decorative images
if the image is pure decoration, used for visual purposes only.
For sensory and decorative images, leave the alt text field blank. In the page's HTML code there will be two double quotes, which tells the screen reader to skip it.
These resources are useful for tips on how to write great alternative text descriptions: