Victoria government logo

We follow the Australian Government Style Manual: ImagesExternal Link

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
(using basic text component)

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
(appears in promotion cards and also when shared on social media)
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.

  • Our CMS contains thousands of image files, so it's important to name your file well so that you and your colleagues can find and reuse them.

    There are 2 different naming conventions to keep in mind:

    • The filename of the image (what it is saved as on your computer, e.g. very-important-image.jpg)
    • The media item name you give the image when you upload it to the CMS media library (e.g. Shrine profiles John Lui).

    Filename

    Your filename should:

    • be descriptive
    • contain no spaces
    • use hyphens (not underscores) to separate the words and make the filename as easy to read as possible
    • not be a generic file name like IMG_001.jpg.

    For example, an image of a girl laughing should be saved as 'girl-laughing.jpg' before uploading to the CMS Media Library.

    If the image's filename contains spaces (e.g. 'girl laughing.jpg') you must replace the spaces with hyphens).

    Media item name

    The name you give your image when you upload it to the CMS's Media Library must:

    • use spaces between words (not hyphens or underscores)
    • be meaningful and descriptive enough that you can search for it when required

    if the image is of a specific person, include their name and position.

    For example:

    Hon Linda Dessau, Governor of Victoria

    Alana Johnson, member of the Ministerial Council on Women's Equality

    Example

    A screenshot of the Media Library in the CMS, showing the image upload screen.

    In the above example, the image's filename is "girl-laughing.jpg" so the name you would give it for the Media Library is "Girl laughing".

    Keep in mind that what you put in the Name field doesn't appear unless it is part of an Image gallery component.

    If you're uploading several images that belong together, such as members of a council or honour roll inductees, it's a good idea to put this consistently in the image names, for easier searching. For example: "Stella Young – 2017 Women's Honour Roll".

  • 1. In the Basic text component, click on the Media icon in the formatting ribbon.

    2. Search for your image from the Library tab if uploading an existing image.

    3. If you’re uploading an image for the first time, click on Add image, then Choose file and browse your computer for your image.

    Image gallery uploading new image

    4. Complete the Name field. Make the name of the file meaningful to the image, so it can be easily found when searching the Media library. If it’s a photo of a well-known person, you should include their name and position in the image title. Refer to the section about naming images for more tips, but as a general rule:

    • The filename of your image (what it's saved as on your computer) should use hyphens between words, not spaces.
    • The name you give your image when you upload it to the CMS should use spaces between words.

    5. Complete the Alternative text field for your image (if required). This is a description for vision-impaired users and is an important accessibility requirement. What you write depends on the context of the page and the typical users.

    The only images that don't need this field to be filled out 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 these types of images, you can leave the alt text field blank. In the page's code there will be two double quotes, which tells the screen reader to skip it.

    6. License: You'll need to choose one of the following license types in the drop down menu:

    • Creative Commons Attribution 4.0 means the image can be shared or adapted. See the International licenceExternal Link page for more information.
    • Copyright means that the image is protected and cannot be used without permission. Use Copyright if you're not confident the image can be shared with others.

    7. At this stage the 'Restricted' checkbox doesn't do anything in the SDP instance of Drupal, so ignore this.

    Click Save and you’ll see the Embed media option pop-up.

    Click Embed.

    If you want to add multiple images to your page displayed in a carousel format, you can find instructions in our image gallery guide.
  • When you're inserting an image in body content, the width is important because the website displays images according to the device screen size (breakpoint).

    Landscape images should be 818px wide and no more than 500px high.

    If a narrower image is embedded in the body text of a page, it will be expanded to fill the column width on some smaller devices. If the image file is too small it will appear pixelated. (If an image is taller than 500px it will be made narrower to display the full height. See the examples further down.)

    In the examples below, the same image (156px by 156px) has been either 'embedded' or 'embedded as thumbnail'. Try reducing the size of your window – you'll see that the first image expands to fill the width of your screen (and becomes pixellated because it was a small image not intended to be displayed so large).

    In the following examples, the original image in the media item is 818px by 496px.

    Note: You can't embed a thumbnail and have the caption display.

    Embedded as thumbnail 100 x 100px

     Eastlink, Melbourne, Architect: Wood Marsh, Photography: John Gollings

    Embedded as thumbnail 220 x 220px

     Eastlink, Melbourne, Architect: Wood Marsh, Photography: John Gollings

    Embedded as thumbnail 480 x 480px

     Eastlink, Melbourne, Architect: Wood Marsh, Photography: John Gollings
  • This is what happens when you have an image that is 818px wide but a variety of different heights. This demonstrates that landscape images over 500px high will not be displayed at full width.

    800 x 200

    800 x 400

    800 x 500

    800 x 600

    800 x 800

Alternative text (alt text) for images

We follow the Australian Government Style Manual: Alt text captionsExternal Link

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:

Choosing images

  • Only use images that are specific to the content of the page.
  • Use images that reflect the diversity of the Victorian community – across culture, gender, age, ability and faith.
  • If your content is a translated page, always think about the visual content as well. Migrant and refugee communities may take offence if an Anglo-Celtic person is used in imagery alongside their language. It will also make communities feel like the content is not for them, making it less likely that people will identify with the content.
  • Don't use the following as feature or hero images (i.e. the image used for promotion cards, page headers and news pages):
    • a logo
    • a photo of someone giving a speech
    • a photo of a screen.

Using photographs

  • Photographs are clearer and more emotive if they focus as closely as possible on the key subject, such as a person's face or the plate of food.
  • Many users will be viewing pages on devices other than desktop computers, so a photo of a whole crowd won't be as visible on a smaller mobile device.
  • Users also respond better to images that include people. If you're taking or using photographs of people, you must ensure that you have their permission to publish them online.

Using logos

We follow the Australian Government Style Manual: LogosExternal Link

Write the full name of the organisation in the logo alt text.

For logos that are functional links to home pages, use the name of the site in the link instead of the alt text. You don’t need to add the name to the link if it is already in the text on the page.

For guidance on using Victorian Government logos check the apply brand Victoria - digital guide.

A logo can be included on a web page:

  • if it's your own logo – it should be uploaded in the Customised Header section in the CMS.
  • in the context of highlighting a sponsorship – it can be embedded in a basic text component.

Logos should never be used as the full header image or as the feature image for cards.

Reviewed 21 December 2022

Single Digital Presence

Was this page helpful?