Imagery

Imagery conveys more than a message; it conveys a feeling ... a vibe. A consistent style of imagery is at the heart of creating your brand identity.

Principles of using images

Great imagery stays true to your brand; it conveys a consistent style, i.e. how busy the images are, colour, framing, mood, etc. A great image is also context-relevant. For example, the hero image on a services page could display positive human interaction, giving and receiving.

Using images

Bearing in mind the principles and the need to be context-relevant, the following approach must be kept in mind.

Photography

A perfect image is contextual. Our approach must be practical: it is recommended to conduct a photo-shoot and use real images that are relevant to the brand; if context-relevant images are not available first hand, source from third-party providers. The objective is to communicate real, relevant content visually.

Framing

The rule of thirds in photography helps control the weight of objects in an image. Images with a single subject and solid background should follow the rule of thirds. Single and group objects with solid backgrounds should be centre-weighted.

Use the rule of third to control the weight of an image. Single and group objects with solid backgrounds should be centre-weight. Image with one foreground and background should follow the rule of thirds.

But, be careful when using this rule. The need to balance an image on the left or right is applicable when it comes to hero images, not for small-size containers.

Cropping

Cropping an image follows the foreground and the focal point of the image. An image should be cropped in a way that emphasises the subject and declutters the photo, so there is greater focus on the focal point of the image.

Aspect ratio is part of a plugin in TailwindCSS as well - and is bundled with the design system by default. Learn more about the aspect ratio and how to use it on images.

People

Use photographs that reflect diversity, happiness, and the quality of life that this nation provides to its citizens and residents.

Team photography

A team is a group of people on a singular mission. It is important that this unity is conveyed in a highly consistent visual style. The team section is a block available in the design system.

• Images should be uniform in weight, i.e. each subject occupies a consistent amount of space on their respective image.
• Photos should be taken in natural light at a similar time of day and at the same location for consistent brightness and shadows.

Visual complexity

Visual complexity, also known as the 'busyness' of an image, is a topic that requires consideration when using images on a website. This is a reference to the number of elements, colours, and contrast in an image.

Foreground and background

For images featuring several objects, primarily featuring events or the outdoors, separate the foreground from the background. Always concentrate on the subject.

Use images that have a prominent subject. The focal point should occupy approximately 50% of the image in the foreground. Do not, blur the background artificially to create focus on the object.

Where the use of a photograph that is unavoidable or deemed necessary has visual complexity, ensure there is natural blue or the image is cropped.

Colour, tone, and contrast

If you’re looking for a specific colour palette to be visible in your images, it is important to ensure that photoshoots are set up to capture the intended colour tones. Do not add colour overlays during post-production; only edit for location-based temperature correction.

Text on images

Ideally, use an image that has space to add text. If you have to use images with limited or no space, add an overlay to create contrast.

Image quality

Resolution, sharpness, and size determine the quality of an image. Always use correct dimensions of your image and resize them propotionately as per the aspect ratio of the image.

Using image source sets

Source sets ( or as described as an HTML attribute as ` srcset `) is the attribute that specifies the list of images to use in different browser situations. The browser will pick the most optimal image version, based on the screen size and resolution. This concept is known as responsive images.

Larger images have larger file sizes. There’s no point in loading, for example, a 2400-pixel wide, 20 MB image on a simple mobile phone. So srcset is saving bandwidth and reducing the page load speed. Load speed is a direct ranking factor for searches.

<img 
srcset="gov-image-480w.jpg 480w, gov-image-800w.jpg 800w" 
sizes="(max-width: 600px) 480px, 800px" 
src="gov-image-800w.jpg" 
alt="The image to be used">

Using the picture element for images

The <picture> element also allows browsers to display different images based on device characteristics. But with this element, you can define totally different images, not just their size versions.

In the example below, the image titled ` setup-001_primary.jpg ` or ` setup-001_primary-2x.jpg ` will be displayed on devices where the screem size is more than 768 px. The default image will be what is within the image tag and will be the smallest resolution to load.

<picture>
	<source media="(min-width:768px)" srcset="setup-001_primary.jpg, setup-001_primary-2x.jpg 2x">
	<source media="(min-width:465px)" srcset="setup-001_tablet.jpg">
	<img src="setup-001_mobile.jpg" alt="The default image" >
</picture>

The need for a CDN

A content delivery network, or content distribution network, is a geographically distributed network of proxy servers and their data centres.

It is strongly recommended to use a CDN to distribute assets such as images and video content. The use of a CDN brings:

• speed
• efficiency
• the ability to serve images per device

Using image extensions

WebP was first announced back in 2010 and has since been upgraded and improved until its current version. WebP images are usually smaller than their counterparts, but with the same quality, thanks to their superior compression capabilities.

WebP typically achieves an average of 30% more compression than JPEG and JPEG 2000 do, without loss of image quality.

• Use a converter to serve images in WebP and not in JPEG (JPG).
• The original JPEG (JPG) file should also be preserved within the server to use with browsers that do not support WebP.

Using computer-generated imagery

If taking photographs or searching for relevant stock images is not feasible, CGI is our recommended approach. These images are developed using specialist software; there are a lot of possibilities. You can control the complete process of shaping up the content, from lighting to layout.

However, it must be highlighted that the use of CGI for images must be minimal and used only when required.

The responsible use of AI-generated imagery

With the use of assisted prompt-based artificial intelligence, the use of generating computer-generated imagery has become easy. The use of such images generated by this technology must be carefully used.

Using artificial intelligence (AI) assisted images can be used to create objects and further edit them or use part of the generated images to achieve the final image to be used on the website.

• Do not generate images that are against the values, principles, ethnic beliefs, and culture
• Do not generate and use images that are unrealistic in nature.
• Do not generate images that convey information that is not relevant.

Application of CGI images

It is recommended to use CGI images in hero images only. If CGI is required with other images for cards and tiles, a validation should be provided as to why natural photography was not used.

Using illustrations

Illustrations are used to tell a story, convey a mood, or utilise a metaphor to make a complex idea clear and relevant. They are one of many ways to represent values that users can engage and connect with. Think of illustrations along the same lines as photography and videography—they are visual storytelling tools.

The use of illustrations has to be part of a theme or a pattern. A particular illustration style needs to be selected, and this needs to be used consistently across all communication.