Skip to navigation Skip to main content

Selecting Effective Images

In recent years we have seen a trend towards more image-led website design. In the most effective of these images supply more than just visual interest. They also contribute towards a website’s usability and work to actively re-enforce the brand style.

Sourcing and selecting the right images is undoubtedly a challenge and all too often it doesn’t get the time and careful consideration it deserves. To help make the process of selecting effective images a bit easier we have established a couple of key criteria to quickly judge whether an image is fit for purpose.

Usability

Usability might seem like a strange concept when thinking about images, but photos that are too small, are generally unclear or seem to contradict rather than support the content they are supposed to compliment can all cause tangible usability issues for a site, distracting or confusing visitors. The quality of your original images is a significant factor here. Unintentionally blurry, noisy or pixelated photos can all negatively impact the user experience. It is important to know your sizing requirements before you start the sourcing process. In general scaling images down from a larger size is perfectly acceptable (and even desirable for high density displays), but scaling up beyond a few percentage points is rarely successful.

With the growth in popularity of Responsive design we also need to consider how our images will be displayed at an array of different physical sizes (and aspect ratios). Sometimes an image that works great on a desktop might become unclear when scaled down on a smartphone. With this in mind we need to either carefully select a single image that will work across all display sizes or serve different images to different device types. The key is to test across these different devices, identify any issues and then take appropriate action.

In this example the content becomes less clear as the image shrinks. But reframing as the image is re-sized really helps.

Cropping as an image is resized

Style & messaging

A carefully selected image can work with your overall page design to re-enforce your brand and aid recall with your audience. Understanding how a particular image is likely to be interpreted by your website visitors and what it will make them feel about your company are important considerations when selecting images to use.

If a picture really can speak a thousand words then we want to make sure that like the rest of our carefully crafted copy those words are consistent with the voice we want to project and that the messaging is clear.

Think about the kind of qualities you are trying to extract from the use of a particular image: aspirational, thought-provoking or is its use more informational? Consider what is most appropriate for the particular context.

Consistency is another aspect that shouldn’t be overlooked. If we changed the font used from page to page on a website the experience would be quite jarring for visitors. The same is true (albeit to a lesser extent) with images. We should try be consistent in the image styles and themes we use unless the intention is to be deliberately eclectic.

Keep image styles and framing consistent

Authenticity

Authenticity is one of those slightly intangible qualities that nevertheless can contribute significantly to the perceived credibility of your website. Visitors will take visual cues to make snap decisions about the sites they visit. If a visitor doesn’t trust what they see then why should they put any more faith in the written copy that accompanies it?

Stock photography in particular often gets a bad press in this area by seeming staged and un-true to life. We are all familiar with the overly smiley model or cliched visual analogies. But with some careful selection (applying our credibility filter) there are some great quality and great value stock options out there.

Authentic images image can work to make your product or service seem more tangible. For example team photos can help make a more human connection and showing a product in a relatable, natural setting can make visitors imagine using it. But we should remember that apparent authenticity is heavily influenced by context. An image that might feel authentic in one setting could come across as completely insincere in another. So it is within context that we should judge them.

Is it licensed?

The importance of ensuring that you have the relevant permissions to use the images you select can’t be overstated. Just grabbing an image from Google and hoping for the best is more likely than you might think to land you in hot water. Some of the bigger stock libraries actively pursue copyright infringement. They have automated tools to find and issue payment demands to infringing sites and the resulting bills can run into hundreds of pounds per image.

As a website owner you have ultimate legal responsibility for ensuring any images used are appropriately licensed.

While you can usually rely on an agency to do the right thing, in cases where multiple in-house staff may contribute to a site too, investing the time in putting the appropriate policies in place will be time well spent. In short, keep track of the source of your images and be cautious of using any you can’t establish the provenance of.

Build a library

At The Pixel Parlour we’re big fans of Shutterstock and use their library extensively in our work. But we are also keen photographers so over the past few years we’ve been building our own library of original images to compliment what’s available as stock or provided by clients on projects. The aim isn’t to replace these sources, but to build a library of images that are as unique as our designs, and where we have complete control over the creative.

Pixelstock stock photography

To do this yourself you don’t necessarily need to worry about having all the professional gear. With a bit if care a decent smartphone can produce some very usable results. While you might not use these images for big photo backgrounds or zoomable product shots, at the right size and in the right context these mobile snaps can be perfectly acceptable and even offer a unique perspective that you couldn’t have otherwise achieved.

Whatever equipment you use or sources you draw from consider trying to build your own pool of images. By establishing your own library of appropriately licensed photos that already pass the quality and brand image criteria you will be free to concentrate on considering an image’s usability and messaging in a particular context.

So now you know how, go forth and critique the images you are already using in your own sites. Before hitting upload consider if the image you have selected is usable, licensed, on-brand, authentic and supporting the message you are trying to convey.

Nick Barron

Written by

Nick Barron

In his role as UX Director Nick ensures that everything we do reflects a clear understanding of our clients’ aims as well the expectations of their audiences.