singledigitalpresence.vic.gov.au

Adding an image

Instructions on how to embed a single image onto a page.

Image dimensions and format

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: 699 x 411px
  • Secondary campaign: 708 x 412px
  • Call to action: 336 x 249px (or 1150 x 750)
  • Hero banner: 1600 x 600px
  • Profile image: cropped to a circle and 150 x 150px

How to embed a single image

1. Click on the  Media browser icon.

2. Browse and select 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 using Media search. If it’s a photo of a well-known person, you should include their name and position in the title (e.g. Joan-Kirner-former-Premier-of-Victoria). More tips on naming images can be found below. 

5. Complete the Alternative text field for your image. This is a description for users who can’t see the image. It’s an important accessibility requirement. What you write depends on the context of the page and the typical users.

Only if the image is simply decorative can you leave the alt text field blank - in the code there will be two double quotes, which tells the screen reader to skip it.

6. License: You'll need to apply one of the following license types using the drop-down:

  • 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 popup. Click Embed.

Naming 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 for images:

  • The file name of the image (what it is saved as on your computer)
  • The image title (what you name the image when you upload it to the Media Library).

The file name 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 title (name) in Media Library:

  • Should use spaces between words (not hyphens or underscores)
  • If the image is of a specific person then their name and position should be included in the title

For example, the file name is "girl-laughing.jpg" and the title is "Girl laughing".

Note: What you put in the title field doesn't usually show on screen, unless the image is used in an image gallery.

Reviewed 11 May 2021

Vic Gov digital guide

Was this page helpful?