singledigitalpresence.vic.gov.au

Add an image

Find the required format and specifications needed for including images in your content, either embedded onto the page or in banners, cards or campaign blocks.

Image format and dimensions

All images need to be cropped and resized before uploading and should be in JPG format. Images in PNG format can slow down the page-load speed for users.

Images used for cards

For featured navigation cards, promotion cards and event cards make sure the image is 818px wide x 496px high. Keep this dimension proportioned.

Images embedded in body content

You can add images into a page's body content using the Basic text content component.

These images must be:

  • landscape images: 818px wide x 496px high
  • portrait images: up to 400px high
  • at least 72dpi

Never stretch an image to make it bigger as that will make it look pixellated and poor quality.

Other image sizes

  • Primary campaign: 699px wide x 411px high
  • Secondary campaign: 580px wide x 340px high
  • Call to action: 336px wide x 249px high (or 1150 x 750)
  • Hero banner: 1600px wide x 600px high
  • Profile image: cropped to a circle and 150px wide x 150px high
  • Complex image: 800px wide x 400px high

How to embed an image on your page

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' instead. Read our guide on complex images to find out more.

    1. In a 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 below 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 licence 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.

    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

    How to name your images 

    There will be thousands of image files in the content management system, so it's a good idea to name all files well so users can find them.

    There are 2 different naming conventions to keep in mind:

    1. The filename of the image (what it is saved as on your computer)
    2. The name you give the image when you upload it to the Media Library.

    Image filename

    The filename should:

    • be descriptive
    • contain no spaces
    • use hyphens (not underscores) to separate the words and make the file name 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 you have this image saved with a file name that contains spaces (e.g. "girl laughing.jpg" please rename it to replace the spaces with hyphens).

    Image name in the Media Library

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

    • 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
    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 this name text field doesn't usually show up on the screen, but it will if the image is added to an image gallery. 

    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". 

    Reviewed 16 July 2021

    Vic Gov digital guide

    Was this page helpful?