Image basics

What everyone needs to know about using images

Imagery is a crucial aspect of effective website design. You should use images to:

Here’s what you need to know.

How to choose a suitable image

Howden's brand guidelines provide extensive advice on using photography. Any image you choose should convey at least one of the four photography principles:

• Collective subjects: Compositions of multiple people or objects. 
• Stronger together: People interacting and working together.
• Visually powerful: Thoughtful compositions and visually engaging settings.
• Warm and personal: Relatable situations and natural lighting.

Read the brand guidelines for more comprehensive information.

In addition to the photography principles, here are the technical and practical requirements you need to consider.

Where to find stock photography

Stock photos are pre-existing photos that have been licensed for commercial use. They are available for immediate use, often for free (or for a small charge).

Canto, our internal resource, should be your first port of call. You’ll find a collection of images that meet the brand guidelines and have been approved for use.

If you can’t find what you need on Canto, there are a variety of websites dedicated to providing royalty-free stock photography. These include:

• Unsplash (free)
• Pexels (free)
• Shutterstock (paid)
• Getty Images (paid)

Any image you choose on one of these external sites must meet at least one of our four photography principles.

Using original photography

Photos of genuine Howden team members and locations can build credibility. In turn, this can help to boost trust and user engagement.

Not all original photos will increase your credibility in this way. Poorly lit, obviously staged photos captured by your phone camera may make you appear less credible. Hiring a professional photographer could be a wise investment to help you get photos that suit your needs. 

Make sure to compose photos in line with our brand's photography principles. You must also get permission from anyone featured in the photos.

Format

Images come in a variety of formats. Our CMS supports:

• JPEG – the standard for digital photographs: The compressed image files load quickly while maintaining a high quality.
• PNG – ideal for logos and graphics: PNG images use lossless compression, preserving sharp details.
• WebP – offer the fastest user experience: WebP images files are more compressed than JPGEG images, offering faster loading speeds with a comparable quality. However, not all browsers support WebP.

Orientation

Unless explicitly stated in the component guide, assume that your image should be landscape.

Most of the components are designed in a letterbox style, where the width is significantly greater than the length. Portrait images forced into this shape will lose important details that are beyond the scope of the frame.

While most of the components are designed for landscape images, some require or support other orientations. See the recommended image specifications section on the component page for more information. 

Focal point

Make sure that the most important part of the image is positioned in the centre of the frame. This prevents important details from being cropped when displayed within a component.

Image size

Getting image size right is an important part of delivering a positive user experience. It’s a balancing act. Image files must be large enough to look crisp and clear on large screens. At the same time, the image file must not be so large that it slows the page down.
 

For Howden websites, we recommend that image files are no bigger than 500KB.

Image files are often 3MB or more, so you’ll need to make them smaller. There are two ways of achieving this.

Reduce the image dimensions

Images are made up of pixels. More pixels mean a larger image. Equally, smaller images have fewer pixels.

Make sure the image has enough pixels to appear correctly on screen – an image that’s too small becomes grainy and distorted – but not so many that the file slows the page down.

An image of 1280 x 720 pixels is large enough to be HD standard. You could go slightly higher, if you wish. In general, a width of 1500 pixels is more than enough for most website images. It will display clearly in almost every component.

There are a couple of exceptions. Image Full Width and Fixed Image and Text Scroll both display large images which stretch to the edges of the screen. To accommodate large screens, images used for these components must be at least 1600 pixels wide. 

In most cases, the CMS should automatically resize the image to fit the component. However, you may find that your image doesn’t look right. If this happens, resize the image to the specific requirements for that component and reupload.

Remove colour depth (image compression)

Colour depth refers to the amount of data used to store colour information for each pixel in an image. More bits per pixel means more possible colours and larger image files.

Image compression makes an image file smaller by removing some of the colour depth. When compressing an image, the goal is to remove as much colour depth as possible without changing its appearance to the naked eye.

Data visualisation

Data visualisation is a way of graphically representing information and data sets. You can find extensive advice for how to create on-brand data visualisations in the brand guidelines.

How to change image file size in Squoosh

Squoosh is a powerful image optimiser you can use to resize and compress images. While there are many other tools available, Squoosh is free and easy to use.
 

Here’s how to do it.

Step 1: Open your image in Squoosh

You can drag and drop the image into the app or select it from your saved files.

Step 2: Select ‘resize’

Step 3: Input your desired dimensions

Make sure that the ‘maintain aspect ratio’ box is checked. This means that the image will be reduced in line with its original proportions. When you add a number to the width, the height will decrease by a proportional amount.

Step 4: Compress the image

By default, Squoosh compresses the image by 25%. If you’re happy with this, you don’t need to do anything. Use the ‘quality’ slider if you want to compress the image further.

Step 5: Download the optimised image
 

The bottom right corner tells you the file size of the new image. If it’s below 500KB, you can save and upload the image (if not, either make the dimensions smaller or reduce the quality).

Select the blue download button and save the optimised image.

How to upload images to the CMS

There are two different ways of uploading individual images.  
 

From the content tab

Using the top navigation bar, navigate to ‘content’.

Then select: Media → Add media → Image

Then select ‘choose file’:
 

Select the image file from your documents folder. Add a title and alternative text (see below for more information), then select ‘save’.
 

From a component

Choose a component that supports an image. Navigate to ‘select image’.

Then choose: Import image → Select file
 

Select the image file from your documents folder. Add a title and alternative text (see below for more information), then choose 'select image'. 
 

How to use alternative text

Alternative text (alt text) is used to describe images within digital content. Alt text is particularly helpful for screen reader users – the screen reader converts the alt text into audio or braille, making otherwise hidden visual information accessible. However, alt text is also helpful for sighted users when imagery fails to load.
 

There are two situations where you should use alt text:

Describing meaningful images

A meaningful image conveys important information that isn’t available in the text. This could be an original image or media, such as tables and infographics. Descriptive alt text allows screen reader users to access this important visual information.  

Marking an image as decorative

A decorative image is purely aesthetic – it doesn’t add information. Stock photography is considered decorative. 

Decorative images don’t need detailed alt text. But they should be marked with an empty alt attribute (alt=””). This tells the screen reader to skip over the image, reducing unnecessary clutter.

Follow these tips for writing effective alt text:

• Be specific: Highlight the main reason why you chose an image and what you hope to convey. Include specifics like names and locations.
• Consider the context: The surrounding text is likely to affect which parts of the image are most important to describe – focus on the key details.
• Be concise: Limit alt text to 125 characters to prevent the text being cut off by a screen reader. Aim for a short and meaningful description comprising of a single sentence.
• Avoid redundancy: Don’t repeat information that’s already available in the surrounding text as users will get the same content twice. For the same reason, don’t write ‘image of’ – screen readers automatically indicate when something is an image.