A guide to choosing the right images for your charity website

Introduction

Images play a vital role in shaping the look and feel of your charity’s website. The right images will work to help your website stand out and maintain its technical efficiency. This is important for presenting a sleek and professional look, reflecting the work of your charity and its reputation, and creating an engaging experience for your supporters.

So, how do you choose the right images? In this blog, we’ll look at the steps to achieve this and how to implement best practices for image selection that equally match quality and style.

Image file size

Firstly, let’s look at file size. Regardless of where you’re adding images—whether in hero banners, articles, card grids, or profile bios—file size is an important consideration. For our WordPress sites, we usually recommend keeping images under 2MB. However, this limit is rarely enforced unless dictated by project requirements. In fact, larger files are automatically compressed through a built-in WordPress feature upon upload to maintain fast page loading speeds.

Reducing image file size without compromising quality ensures your site loads quickly, improves user experience, and enhances SEO performance. If you have larger image files that need compressing, try using tools like TinyPNG and Image Resizer.

Image formats

Choosing the correct image format is essential for maintaining quality and usability. Here are some different format options:

Vector
Vector images are smaller in size and are made up of points, lines and curves rendered by a computer using a mathematical formula. They are especially good because they can be resized up or down without ever losing quality. Whenever possible, for graphic-based images such as icons, logos, digital illustrations and graphs, we recommend uploading vector files (.SVG).

Raster
Photos and other digital images are raster files (.PNG and .JPEG) made up of tiny coloured squares called pixels. They are resolution-dependent, meaning that scaling them up or down will cause them to become pixelated.

PNG VS JPEG
Whilst PNG files tend to be larger than JPEG files, they are of higher quality as they use lossless compression, meaning they retain all of the image’s original data and don’t lose quality. JPEGs use lossy compression, which means it permanently deletes some of the image’s data to create a smaller file size.

Image ratios

An image’s aspect ratio—the proportional relationship between its width and height—is critical for consistency in your design. For example, a square image has an aspect ratio of 1:1, where height equals width.

How we handle aspect ratios
During the design process, we define aspect ratios for each module on your site. When you upload images, they’re automatically cropped to fit these predefined frames, so you don’t need to worry about precise dimensions – easy!

Tips for avoiding cropping issues
It is very important to be aware of the aspect ratios and select the right type of imagery to avoid incorrect cropping. For example, uploading a portrait image into a landscape frame will likely crop out important features or subjects. Therefore, we recommend paying attention to the positioning of subjects and focal points to ensure image cropping won’t affect them and your image retains its value.

Image sourcing

Beyond technical considerations, the type and style of imagery you choose can make or break how your website looks, feels and works. Your images should reflect your brand identity so they blend seamlessly with the wider design and resonate with your audience in a meaningful way.

When budget allows it, we always recommend undertaking a bespoke photoshoot to capture unique images that best portray your identity and are of high quality. But, we realise this is not often possible for many charities, and relying on stock imagery might be the only option (we also do that ourselves!). If a photoshoot doesn’t align with your budget, there are lots of free stock imagery websites you can use instead, including Unsplash and Pexels.

To avoid stock images that feel too ‘stock-y’ or inauthentic, here are some factors you can consider to make sure they align with your brand. As a caveat, the following suggestions will depend on your specific brand and tone of voice, but as a general rule of thumb we recommend:

Lighting and colour

• Avoid: overly saturated images or those with harsh lighting, excessive filters, or obvious manipulations.
• Opt for: natural lighting and muted colors that convey authenticity and professionalism.

Poses

• Avoid: staged interactions and subjects awkwardly posed facing the camera.
• Opt for: candid moments, natural expressions, and unposed subjects that feel relatable and genuine.

Framing

• Avoid: unrealistic scenarios, sterile environments, and flat angles.
• Opt for: dynamic angles, depth of field, and strategic focal points to add interest and dimension.

Final considerations

Selecting the right images and uploading them correctly ensures your charity website not only looks great but performs seamlessly. By paying attention to file size, formats, aspect ratios, and sourcing, you’ll create a visually cohesive and technically sound website that works for your charity and your supporters.