Media

Usage

Use media to communicate and differentiate specific information through visuals.

Media items sit within other components such as cards, or a media gallery.

Use images if they help users complete a task. Images can make it easier for some people to understand information.

Use media to combine visual elements with text. This gives your content context and alignment.

When and how to use

• Always get copyright for all media used.
• Nest media in other components.
• Choose diverse images that reflect and support the diversity of Victoria.
• Only media that's relevant to the content.
• Always include alt text for each media item.
• Use appropriate resolution for the content.
• Always include a transcription for all audio content.

When and how not to use

• Don't use a media item without alt text.
• Don't use video content without captions.
• Don't crop an image without a clear focal point.

Variants

The ratios you can use for media include:

• 1:1
• 4:3
• 16:9
• 21:9
• 3:1
• avatar (circle).

Copyright requirements

You must get permission (a licence) to use copyright material. This includes images and text.

Some images are available under an open access licence, such as Creative Commons. Alt text is also licensed under copyright.

File resolution

Image resolution must be appropriate for the content.

Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information.

Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop before you publish it.

Focal point

Always ensure that images work on all screen sizes. Select the focal point of the image to best position images in any area.

Consider cropping smaller images more to keep the impact of the original image.

Media types

Multiple types of media can are supported and used to add meaning to content. These include:

• photographs
• decorative images
• charts
• graphs
• maps
• illustrations or drawings
• icons
• video
• audio.

Make sure you use the correct media type for the content it is supporting.

File types

There are many image file types. Seek specialist advice to optimise an image file as a vector or raster file format.

The following file types are recommended:

• photographs
  • jpeg
  • png
• icons
  • svg
  • png
• charts/graphs
  • svg
  • png
• video
  • mp4
• audio
  • wav.

Alternative text

All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address WCAG 2.0 Criterion 1.1.1 or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the Brand Victoria guidelines.

The Web Accessibility initiative alt decision tree also guides you on whether your image needs alt text or not.

For purely descriptive images, the alt text attribute instead reads: alt=””.

What alt text does

Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:

• a screen reader can read the alt text aloud
• alt text is shown in the place of ‘broken’ or unloaded images on the page.

How to write alt text

Alt text must serve the equivalent purpose of the image itself, by:

• being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)
• explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)
• using normal punctuation that helps users understand the text
• including the image text in the alt text (for images with text).

For more guidance on writing alt text, refer to Alt text, captions and titles for images in the Australian Government Style Manual.