Basic guidelines for images

General specs

• Images must be no more than 1MB in size.
• Images must have RGB colour and 72dpi.
• Recommended file formats are JPEG, PNG and Webp. Webp format is particularly good for exporting high-quality images at small sizes.
• Make sure images for web do not have bleed marks.

Accessibility

• Don't replace important written content with images (or only use images to convey important information) - screenreaders cannot access text that's embedded within images.
• For images that do contain text such as infographics or maps, ensure the text has enough colour contrast with the background and is legible.
• Use a contrast checker to make sure the colours meet our accessibility requirements. To meet AA accessibility requirements, text and background need to have a ratio greater than or equal to 4.5:1 for small text (typically 18.66px) and 3:1 for large text (typically 24px).

Respect for te ao Māori

• Make sure images don't crop in a way that chops off people's heads or limbs, or other taonga.

Image container behaviour

Depending on the component selected, if the supplied image isn't the right aspect ratio it may either stretch or crop to fill the frame. Please make sure you supply the correct aspect ratio to avoid this issue.

Title block image

Aspect ratio: 4:1

Recommended size: 9000x2120 pixels

This is the image that sits behind the title and introduction on our basic templates. 

Note that in mobile only the left third of the image will show, and it will be overlaid with a basic blue background instead.

What works and doesn't work for title block images:

• Nothing too complex, as it makes it hard to read the text.
• Nothing with people's faces that might get cropped out - this is culturally insensitive.
• Something simple with block colours looks good.
• Nothing too dark - it can make the text hard to read.

Some good examples include: Mission Electric, Your city connected, Bus, train and ferry, Fines and infringements. 

Single image

Aspect ratio: 16:9

Recommended size: 2160x1215 pixels

Good to use for standalone images.

Supporting image

Aspect ratios and recommended sizes:

• 16:9, 2160x1215 pixels
• 1:1, 2160x2160 pixels
• 1:2, 2160x4320 pixels
• 8:3, 2160x810 pixels
• A4 landscape, 2160x1527.27 pixels
• A4 portrait, 2160x3054.87 pixels

The different aspect ratios can be used for different types of media/purpose. 

The 8:3 aspect ratio is best for banners. A4 sizes are best for posters.

Note that if you are creating a map or infographic, you should use the infographic component instead.

Infographic

Aspect ratios and recommended sizes:

• 1:1, 5472x5472 pixels
• 8:3, 13824x5175 pixels
• A4 landscape, 7740x5472 pixels
• A4 portrait, 3870x5472 pixels

This is best used for maps or diagrams with lots of detail that people would want to zoom in on.

Info cards image

Aspect ratio: 16:9

Recommended size: 2160x1215 pixels

Use this to add more visual interest or detail to an info card.

Comparison cards image

Aspect ratio: 16:9

Recommended size: 2160x1215 pixels

Good to use for making comparison between things.

Promotional content

Aspect ratio: 3:2

Recommended size: 2160x1440 pixels

Good to use for supporting the text to promote a page, event or campaign.

For any questions, please get in touch with the Digital Content Specialists within the Digital Enablement Team.

You can double check the most up-to-date guidance for our Design System in Zeroheight.