Adding images to your web page is a good way to create a visual connection with your content. Images can help attract and guide readers through your content and can cross language barriers a lot better than text at times.
Only use images you have permission to use
- Be careful using images in the media library that have been uploaded by another editor. You should check if you are able to use an image.
- Don’t use other images you’ve sourced yourself from Google or anywhere else as using unlicensed images can incur large penalties.
- Don't use images from other NSW Government websites or social media channels without permission
On this page
- Standard size guides for images in the CMS
- Contextual Linking
- Component-specific photos
- Additional guidelines
Standard size guides for images in the CMS
Ensure the photo has a 3:2 aspect ratio.
Most horizontally oriented photos have this aspect ratio. This simply means that the ratio of the photo width to height is 3 to 2. If you decide to source a tall portrait oriented photo with a 2:3 aspect ratio, crop it using a free online image cropping tool.
You’ll need to resize any large images to lower the file size before uploading.
Suggested image dimensions for most components
- Pixels: 3:2 ratio, 1920 x 1280 pixels
-
File size:
- The CMS will automatically compress and optimise images for different devices and use in different components.
- Save the image at a minimum 72dpi.
- The maximum file size for upload to the CMS is 8MB.
- It is recommended to get the file size of the image as small as possible before uploading to the CMS.
- You can use the free, online optimisation tool (PNG and JPEG images, maximum 5MB upload) to reduce your image file size.
Images should be rectangular (portrait or landscape) and have a minimum size of 760 x 440 pixels. We recommend resizing images to 1920 x 1280 pixels.
If your source image dimensions are smaller than the component you’re going to use it in, it’s best to find another larger sized image. If there’s no other options, it’s still ok to use the small image, but it will look blurry.
The CMS automatically optimises your image for devices and browsers. This optimisation process works best with JPGs.
Some images that were originally created for print use will be in CMYK image mode. You’ll need to change the image mode to RGB before uploading to the CMS. This can quickly be done in Photoshop as follows: 'Image -> Mode -> RGB Color'.
Contextual Linking
When inserting a media link (using the media library icon in WYSIWYG) it will automatically include the file size and file type.
Component-specific photos
Certain components require specialised photo specifications.
Adding photos to content pages via the WYSIWYG editor
- Add your source image to the media library at its original size. Images with a 3:2 aspect ratio are preferred as they fit nicely into most components without getting cut off. Our CMS will automatically resize the image into a range of sizes ready to use on the website.
Choose your image size:
- Large/default (full width) - this is the preferred size for landscape (horizontal) oriented images
- Medium (half width)
- Small (1/3 width)
- Images can be aligned:
- Left
- Right
- None
- Appropriate image padding is automatically added
- For mobile, images automatically stack and go full width
Homepage background image
This is a background photo behind the search box in the main banner. This photo should be cropped to 1800 x 410px using a free online image cropping tool. Most of the photo will be covered by the search box, so it’s best to use simple photos or ensure that the focal point is on the right.
Hero banner background photo
There are no special photo specifications for the hero banner component, but please ensure that the image has a minimum width of 1600 pixels.
The background photo simply needs to be uploaded in a 3:2 aspect ratio, it will be displayed on the right half of hero banner. Don’t crop or resize photos to be long and thin, the image will re-size based on screen resolution.
Bear in mind that the image will have a Brand Accent keyline added to it. Try and avoid images that clash with the keyline.
Cards
There are no special photo specifications for cards.
Image blocks
There are no special photo specifications for image blocks.
Image licensing and copyright
Always make sure we have a legal right to use an image on our website. Images from our Getty account are allowed to be used on our site as we’ve purchased the right to do so. Approved images from the branding team are also safe to use.
If you're required to include an acknowledgment with your image, you can do this by using the image credit field when you upload your image to the CMS.
- Don’t use other images you’ve sourced yourself from Google or anywhere else as using unlicensed images can incur large penalties.
- Don't use images from other NSW Government websites or social media channels without permission.
Be careful using images in the media library that have been uploaded by another editor. You should check if you are able to use an image.
Images may have:
- specific permission on how and where they are used
- been commissioned or purchased for specific campaigns or projects
- limited one time use.
Additional guidelines
- It's best practice to update the image metadata once you have uploaded it into the library. This includes information such as the image title, caption and image details.
- For tips on selecting a suitable photo, see How to select a suitable photo for further guidance.
Check out how images are used on live pages
Visit Images for live examples on nsw.gov.au.
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.