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 always 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.
It's important to upload the photo in its original full size to our CMS media library. Images will be automatically compressed and optimised for different devices by the CMS.
There is a maximum file size of 8MB for images. 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:
-
Save the image at a minimum 72dpi.
-
The maximum file size for upload to the CMS is 8MB.
-
The CMS will automatically compress and optimise images for different devices and use in different components.
-
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.
-
Always try to upload your source image to the media library at its original size. If the file size exceeds the maximum file size of 8MB, you’ll need to resize it to lower the file size.
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. The larger the image dimensions, the better (maximum file size of 8MB). 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 1,800 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. 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.
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 that 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 always 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
- Always try to upload your source image to the media library at its original size. If the file size exceeds the maximum file size of 8MB, you’ll need to resize it to lower the file size. Ensure the dimensions don’t go below 1500 x 1000px.
- 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 our CMS. This can quickly be done in Photoshop as follows: 'Image -> Mode -> RGB Color' (might be slightly different depending on your version of Photoshop).
- 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 on this article, submit a request via the webform.