Image guidelines

Use these guidelines to add images to your web pages.

As a rule, use words rather than images. Only use images that usefully add to the text content.

Where images must be used on education.nsw

You must use an image in the content teaser component.

Content teaser displays as a card with tag, title, image and preview content.
Image: Content teaser component

Image dimensions

Image Dimensions (in pixels)
Full width banner (with button and text) 1110 x 524
Shallow banner (image only) 2220 x 460
Content teaser 600 x 680
Image with caption 1094 x 638
News hub feature card 670 x 560 px
Catalogue 426 x 296 px

Full-width banner (with button and text)

Full width banner with text, call to action button and image
Image: Full-width banner

Shallow banner (image only)

Shallow banner is a narrow strip with images
Image: Shallow banner

Content teaser

Content teaser and feature cards component with text, tag and images
Image: Content teaser

Image with caption

Image with caption contains image with grey text box overlay across the bottom of the image
Image: Image with caption

News hub feature card

Screenshot of news hub.
Image: News hub

Catalogue

Screenshot of Employee assistance program catalogue page.
Image: Catalogue page

Image size should be 100KB

Keep all images as close to 100KB as possible. Up to 200 KB is the absolute maximum for banners where quality is a concern.

The best bet is to use the 'save for web' function in Photoshop, which you can do in large batches to make your life easier.

If you don't have easy access to Photoshop, we recommend the following optimisation sites:

Where to source your images

Rules of image use

1. Evaluate your image

Always consider the role an image plays in the context of the page where it is used. Start by deciding if the image is:

Decorative

This style of image does not add any information to the page, it is just there to make the website more 'visually attractive'. Don't use these.

Informative

Images that graphically represent concepts and information, typically pictures, photos and illustrations. Do use these.

2. All images need text alternatives (alt text)

Images must include alt text that describes the information or function represented by them. This ensures that images can be used by people with various disabilities.

These web accessibility tutorials for images demonstrate how to provide appropriate text alternatives based on the purpose of the image.

Alt text for screen shots

You do not need to describe what is contained in a screen shot as you would just be duplicating the instructions that relate to the screen shot. Instead, put "Screen shot of step 1", "Screen shot of step", and so on as the alt text.

3. Get permission to use the image

You can't publish information that identifies a person - a student, a parent or carer, or any other individual - without their permission. Find out more about permission to publish (staff only).

Don't use images downloaded from Google or other search engines without permission.

4. Don't use text images

Don't use images that are just text (words) or text added to them, such as:

  • infographics
  • posters
  • screenshots of print
  • cards.

While text images may look nice and be useful in print, the information in them can't be read by assistive technologies like screen readers.

5. Don't use icons

Avoid using icons because they can get confusing when you use the same icon for different things, or vice versa.

6. Use only pictures of Aboriginal people and Torres Strait Islanders still living

Many Aboriginal people and Torres Strait Islanders are offended by the depiction of deceased members of their communities. It is very important to follow these guidelines and to be respectful of their values.

Do

  • Make every effort to ensure that only pictures of living Aboriginal people and Torres Strait Islanders are used in the website.
  • Display a disclaimer if an image could contain a deceased person - such as a very old filed picture.
  • Have a disclaimer statement in the privacy and disclaimer page in the website.
  • Provide a way to report an incident.

Don't

  • Use old images without checking permissions and historical data.
  • Use ripped images sourced from Google or the internet (including other websites).

Images of people now deceased

While we have made every effort to ensure that only pictures of Aboriginal people and Torres Strait Islanders still living are used on this site, visitors to the site are warned that it may contain images of people now deceased. Please let us know if you know of the death of any Aboriginal or Torres Strait Islander person depicted on this site.

How-to guides

Learn how to add an image on your page using our guides:

Return to top of page Back to top