MAT MARTIN | Selecting, Creating and Using Photos in Websites

16 March, 2018, 19:00

Blog · Branding · Creating Content · Resources

Using Photos in Websites
Using Photos in Websites

The use of photos in websites is standard practice, but we often don’t lend as much consideration as we could to our choices of imagery.

Photos are an important aspect of web design. They offer an immediate way to communicate nuanced and complex information, but creating and selecting them can be difficult. Because such a large amount of visual communication happens on an instinctive level, it is important to be careful about the layers of meaning an image carries beyond its subject.

In this post we will look at some key things to consider when approaching the selection of photos for a site design project.

Why is this Important?

The more work you have done on defining your brand the more apparent the importance of this consideration is likely to be to you. Of course, this goes for all types of content – including text and iconography – but where photos are concerned we face some quite specific considerations.

Typical cognitive reactions to images tend to be immediate and instinctive – the first moments a user spends on a site will inevitably set the tone for their entire experience. This first impression can affect their instinctive feeling for a brand’s trustworthiness, ability and professionalism long after they have left the site.

For this reason, it really is important to consider the role, message and intent not only of the images we choose, but also of their relationship with the medium of web design. What works for you offline won’t necessarily transfer to your website as you intend.

Visual Immediacy

The immediacy of images cannot be underestimated in design and communication. Again, this does not only apply to photography. For example, it is generally recognised that even something as abstract as colour can elicit a physical response in some subjects, causing changes in heart rate and anxiety levels.

It is worth briefly considering trends in our responses to information suggested by research into user interface design, before going on to explore a few ways in which we can define an approach to non-textual information in a site. User Interface (UI) designers have long understood that visual information speeds up interactions within user interfaces compared to text. This excellent article by Marina Yalanska on UX Planet (originally written for the Tubik Studio Blog) addresses this very point (with specific reference to iconography):

Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in the interfaces such as icons and their impact on general efficiency of the product has been an actual topic in global design community for a long time.

We may see this as a blessing or a curse, but it is important either way to be aware of the incontrovertible effect our image choices have on the experience of visitors to a site. It is prudent to assume that a significant number of site users will by nature be visually driven in their behaviour and understanding (trends in interface design are currently encouraging and rewarding this), and therefore to keep the following points in mind when considering the visual aspects of our designs:

  • Images are fixed considerably more quickly on the human eye than text.
  • On average, it takes a person 1/10 of a second to secure a general sense of a visual scene or element. This speed is impossible when reading.
  • Images are transmitted to the brain more quickly than information received textually. Often even information received via text perception is fixed in the brain as a visual image.
  • Images are more likely than text to create long term memories in interaction.

[Source: Marina Yalanska/Tubik Studio/UX Planet]

A Hierarchy of Information (First Impressions Count)

Considering the above it seems reasonable to conclude that the various elements which make up a web page are likely to be registered by a user at different rates. If we accept this idea we can begin to employ it in an effort to communicate more effectively.

Those aspects of our brand which we are happy for people to discover over time can occupy a different space to those which need to be understood immediately, or appeal to instinct. This offers us opportunities to develop architectural models and practical reasons to consider layout and content communicatively.

In very broad terms then – and with specific reference to photography in websites – we can conclude that images will grab our attention immediately and offer information at a rate which surpasses that of our analytical brain functions. They are thus instrumental in forming not only a user’s first impression of our brand but also the long-term memory of it with which they will leave the site.

Text, by comparison, offers an appeal to the rational brain which serves to deepen and specify our understanding of the site’s subject, but is affected by the context of any initial feelings elicited by imagery. It is therefore important to make sure photos in websites set up an appropriate context for text, and that the two elements do not compete with or contradict one another.

For example, if a site’s copy is focussed on communicating the high quality of the services or product offered but the images used have not been taken and prepared professionally, the site is immediately compromised by a contradiction in message. On the one hand we are being asked to consider the quality and desirability of what’s on offer, whilst on the other being shown that even its proponent doesn’t believe in it enough to display it at its best. It is almost impossible to believe the former whilst being shown the latter.

The quality of the image will communicate this regardless of how appropriate the image’s subject appears. Worse still, it is very likely that no amount of well written copy will erase the first impression a compromised image presents.

Choosing Images for your Website

Here are a few things to consider when deciding on an approach to curating imagery for a website project:

1. Be Deliberate

Consider the large number of signifiers contained in the complex visual information that constitutes a photograph. It is easy to pick an image because it depicts something appropriate, but the layers of information conveyed by the other variables of the image will serve to create a message quite apart from this. For example, a drab, poorly lit or badly composed photograph will communicate lack of vision and indecision no matter how appropriate its subject.

Every aspect of an image communicates something, so be sure to harness it positively. If you don’t make positive decisions about how to present your subject, you are by default making negative ones.

In addition to the subject of your photo, consider the following:

  • Does the photo’s composition lead to a definite focal point? We need to know what we are looking at, and be invited to connect with it immediately.
  • Is the negative space in the photo ‘negative’ enough to empower that focal point? We cannot be distracted by elements elsewhere in the frame. Anything else in our field of vision should be there for a reason, and serve to frame or guide the eye towards the subject.
  • Is the subject framed dynamically? The eye should be drawn to the focal point of the image with a sense of purpose and a feeling of potential. We cannot afford to be apologetic.
  • Is the photo rich in colour, contrast and/or texture? Are the darks deep and the colours bright? Is the light engaging and dramatic enough? The quality of the image should reassure us that we are in safe hands.

Poor quality, unfocussed or vague imagery suggests that a business or individual lacks conviction and belief in itself. This is something people notice immediately and which can nurture a lack of trust.

2. Consider Subject Carefully

If a business makes a product, it seems logical that the landing page of their site would show that product. Many businesses do this, but those few who do it successfully tend to have two things in their favour:

  1. Their product is beautiful/unique looking, and that is one of its selling points.
  2. Their product is exquisitely (and expensively) photographed.

This is fine if a product has those qualities and the photography budget can handle it. However, the bar for this ‘route one’ approach is set very high by those who pull it off. Product images which are anything short of stunning simply fall flat by comparison.

Apple’s MacBook and FiftyThree’s Pencil Stylus are both attractive and unique items to look at. The quality of the photographs foreshadows the quality of the product itself. The pride taken in their presentation suggests pride taken in their manufacture, and in both cases the photographers have managed to emphasise the tactile solidity of the item. Note also how the copy works with these images – Apple’s site presents definite data points, suggesting efficiency and performance – FiftyThree’s site talks about tradition, sustainability and carpentry, and describes the item as having ‘heft’.

Often our subject is by nature more mundane, or is something which looks the same no matter who provides it. If we are peddling, say, ground coffee, then we could certainly use a product image, but even the most gorgeous photo of ground coffee doesn’t tell us anything we didn’t already know.

In this case, our audience are ahead of us – they know what our product looks like and they know there’s nothing unique about the way it looks. If they hadn’t already been thinking about coffee they almost certainly wouldn’t have arrived at our site. What they will have come to the site to be convinced of is the value of connecting with our coffee. They don’t yet know what’s unique about it, how it will make them feel, or how we feel about it.

What we can speak to is their sense of themselves in connection with the product:

Three very different options for the representation of what is essentially the same product (ground coffee), none of which concentrate on the product itself. Photos: Nathan Dumlao, Clem Onojeghuo and Jorge Franco, from Unsplash

Each of the above images is designed to appeal to a different set of demographic values/identifiers and speaks directly to the experience of the user by offering context, texture and style. Any of these images would make a strong landing page image for a ground coffee company, dependent on their target audience (see User Reflection, below).

If we are presenting something less tangible – a service or an experience perhaps, we are faced with a similar problem. It is worse still if our site exists to document an activity or cause we are hoping people will want to engage with. In that case the ‘route one’ option is to use documentary photography of the activity or service being undertaken.

The problem with this approach is that documentary photography is rarely professionally created. Even when it is, the brief is often a very different one to that which produces strong website photographs. It is not hard to find examples of sites which are let down by poorly composed documentary shots, much too literal in their interpretation of purpose. This can often lead to a site feeling not only unprofessional but exclusive – the photos create the sense of being on the outside looking in.

It can seem counter-intuitive, but in order to avoid this we should consider the following:

  • Unless the subject is a clearly definable and uniquely designed object, don’t rely on a photo of it to engage your audience. The competition is very tough, and the reality is that most products aren’t as beautiful as the ones that set the bar.
  • Is the subject of the photo in focus? Not simply sharper than the rest of the picture, but actually in deliberate and controlled focus?
  • If you are using a product photo, don’t take the pictures yourself. Take pride in what you offer, and get a professional to frame, light and edit images properly.
  • If you are looking to represent an experience or service, don’t simply show yourself or your team delivering it. Delivering quality services takes hard work which looks mundane from the outside.
  • Don’t be tempted to think of photos which aren’t of you, your team or your office as dishonest or unreal. Your team may be great at what they do but they may not be great at being in photos, and your office is furnished and lit for work, not for a photo shoot.

This is your opportunity to speak to the individual’s potential experience and engagement. Remember that it’s about them, not you, your team or your company. Read on…

3. Prioritise User Reflection

How do we make sure our message is about the individuals who visit our site?

Photographs are an ideal opportunity for a brand to reflect their client’s desired experience or sense of identity. Begin by asking yourself who your ideal client/user is. Are they present in your choice of photographs? If not, what is, and why is it more important than they are?

If they are present, ask yourself the following questions:

  • Are they active? It isn’t enough to show us who your ideal client is if they are just standing there. We need to imagine ourselves in their place, having a similar experience, achieving something positive.
  • Can we see their faces? If yes, are their expressions appropriate (a positive message about the brand)? In photographs which represent a potential engagement, we need to see why we would want to share in the experience. Neutrality is not a positive message.
  • If their faces cannot be seen, why not? If there is not a very obvious contextual reason why this is the case, the message will be negative (we are facing/moving away from our user).
  • Does what they are doing look fulfilling/rewarding? Would you think this was worth your time and money?
  • Is this a positive picture of the user? Are they empowered, strong and capable?
  • If this were me, would I be happy to see myself in this way? Are you representing your client’s demographic with respect and enthusiasm for its defining qualities?
  • Is what you are presenting something that you and your ideal client/user can aspire to? Will engaging help them feel like the version of themselves they know they can be?

Don’t forget that your website does not exist primarily to look inward. It’s easy to make the mistake of thinking that pictures which best communicate you, your work and your activity are pictures of you, your work and your activity. It is possible though that the most communicative images you can use in your site don’t include your products or services at all. You should be seeking to represent the potential of your ideal client/user’s future interaction with you, which is where the value lies for them.

Uber have two specific client demographics to target: Passengers and Drivers. Here we can see how on each side of their site they have chosen to reflect only the user type in question. Both seem confident and relaxed. The passenger appears successful and affluent; the driver happy and relaxed (clearly these have been defined as core identifiers for the brand’s self-image and personality traits). In each case, the other party has been left out of the image to concentrate our attention on the experience we are seeking for ourselves.

If you feel like what you are doing is about you and your team there’s a good chance you don’t need a site at all. In that situation, everyone who needs to know about what you do already does.*

If you don’t know who your ideal client/user is, some brand reflection exercises may prove invaluable.

*N.B. In some cases, it may be that you genuinely do represent your own ideal client. However, these are very much the exception – you basically have to be a rock star, an actor or a lifestyle guru, and your audience needs to aspire to be just like you. Unless you’re sure this is the case for your brand, it’s wise to assume it isn’t.

4. Think About Composition

Photos work with other content on sites to draw users in and guide their journey towards actions and exchanges. We can offer options which pull focus to various points in the image and by extension allow for text and calls to action to work with, rather than against, images.

The composition of an image can significantly alter the way we see the subject, framing it in a more or less positive/active light. The implied shapes within the composition serve to create either a sense of movement or stasis; a centring of attention away from or towards the subject; a sense of opening up or closing down. These subliminal messages are important when considering the response we hope to elicit from website users.

Theory of image composition is well studied and documented. Considerations include the relationships between foreground and background subjects (figure-to-ground); the lines (implied or explicit) which lead the eye towards a specific point; the implied grid into which the image divides the frame; the direction and speed of movement implied by the subject; the subject’s position within the frame, and so on. With regard to grids in composition, it’s worth reading this article from Expert Photography which gives a clear and detailed discussion of the often-used rule of thirds.

These choices all affect the tone and message of the final image. They are complex, subtle and too numerous to discuss in detail here, but this may be one of the most important differences between photographs taken by professionals and non-professionals. The specifics are difficult to pin down, but the effects are immediate, and a poorly composed image can unintentionally convey a negative message very easily.

If you are looking to create engaging content, consider the following when creating or selecting images:

  • What is the subject’s relationship to the frame? Subjects which do not extend far enough into the foreground or remain mostly below the horizontal centre line have a tendency to lack presence and feel unconfident. Bold, tight cropping which pushes the subject forward and fills the frame can often feel more deliberate and confident.
  • Is the subject present enough? What is the relationship between foreground and background in the image? The greater the difference between the two, the more focussed our attention on the subject. Again, framing dynamically will help with this.
  • Is the image one of movement or stasis? Action or inaction? A static composition can be restful, but often simply seems inactive. When seeking to create engagement, it can be more helpful to use asymmetry to add dynamism.
  • Is the composition tight and confident? How much (and which parts) of the frame does the subject take up? How many other aspects of the image are fighting it for our attention? What shapes are implied by the distribution of elements and what effect do they create?
  • Is the photo detached and passive, or does the composition feel dynamic? How involved do you feel with what is happening in the photo? Are you in amongst it, or looking on from a distance?

Where possible, work with your designer/developer on where and how text and other design units will be used alongside or over the images. This will help them (and you) produce something which complements the other elements rather than fights them for space.

The Oliver Agency uses a carousel of images on its landing page, each carefully composed to frame and lead the eye to the bold logo across the centre. On the left, the leading lines of the road bring us upwards (a positive direction) to the initial letter. The right of the logo is marked with a bright flash of sunlight. On the right, the coloured smoke frames the left of the logo while the depth of field brings the figure on the right of the image into sharp focus. Her proximity to the camera feels dynamic and deliberate, and is accentuated by the distance from the camera of the figure on the left. Their matching activity and complementary stances create a rotational symmetry in the image, too.

Be aware also that in responsive web design some overflow of images which use the full width or height of the window is unavoidable when delivering a true cross-browser experience, so detail on the edge of an image may be wholly or partially lost in some configurations.

5. Look for Depth

A website is a flat thing by nature. Photos offer a possibility of depth both visually and in meaning which can add context and relief. In this way we can create a richer user experience.

Considering focus and depth of field in images can be very useful in guiding attention and being more communicative. Backgrounds in photos can offer context and meaning to a subject but making sure secondary elements in a photo don’t interfere with the principal subject is a delicate process.

This is in many ways not only an exercise in creating depth and inviting users further in, but in concentrating the hierarchy of subject matter and in being more deliberate in communication. Some considerations:

  • Is the subject of your image clear? The dominant element of your image should be just that – dominant. First impressions are not a great forum for complex messages.
  • What is the depth of field like? How appropriate is it to your message? A low depth of field can result in the hierarchy of subject in your image being accentuated. The more in focus your subject and blurred your background, the more singular your message becomes.
  • How much is going on in the background? Even if you don’t consider something the subject of your image, if it’s in there, it is saying something. Does that help or hinder your intended message?

As a rule of thumb, the more clear we are with subject and singular message, the more confident we can appear, and the more trust we can encourage.

On The Renovator website we see low depth of field being used to focus our attention on the subject without isolating it from context. The other people on the left hand side offer a sense of activity, even tribalism, but their status in relation to the subject is clear. The asymmetrical compositions create a more active feel, too. This is one of the rare cases in which subject and client projection may well be the same, underlined by the use of the first person in the copy.

Bespoke vs. Stock Photography

With the above in mind, we should make a short note about stock photography. This can be a contentious topic because no-one likes to feel they can be represented by something generic or otherwise conceptually unrelated to their work and personality. It is common to hear that use of stock imagery feels dishonest or not “real” enough.

We may, however, consider this from a different angle. The choice between bespoke and stock imagery may not first and foremost be one between truth and fiction, but one between literal interpretation of concept and communicative quality. It is difficult but important to remember that the feeling of honesty or reality is mostly relevant to those who are already on the inside of a brand, and that these are not the people with whom we are seeking to encourage engagement.

If a website is going to help broaden the appeal and spread the word for a brand it needs to engage new people rather than consolidating exsiting enthusiasm. Again, we are reminded that a site is about our clients or users, and not about us.

Good professional photographers know how to create images which display the qualities we have considered above, and their work will reflect directly onto our audience’s perception of our brand. In an ideal world of course, we would have the budget to employ a professional to plan and carry out a shoot specifically for our site. This would allow for professionally composed visuals and a more literal idea of conceptual integrity to co-exist, although even then certain concessions would most likely be necessary to turn the everyday world of our brand into something which communicated well photographically.

Seen from this angle, a new visitor’s forgiveness for amateur quality images – no matter how high their conceptual integrity – is not even on the table. The first message they receive will most likely come from the imagery we use, and the quality of that imagery will be one of the first aspects of this to register with them. Thus, the message they need to receive in order to choose to engage more fully can be quite different to the one at the core of our practice.

More often than not, commissioning new images from a professional is not possible, and we must compromise. If using stock imagery results in a greater number of people staying longer on our site, reading more of our copy and following through to more conversions, we must consider the possibility that it is actually more communicative than our instincts can suggest.

Three stock images from the Unsplash website. These images offer variety of subject and style, are professionally composed and prepared, and are free to use. From right to left: Daniel Horvath, Coen Van Hasselt, Alef Vinicius (crediting is not compulsory, but it is polite).

It is useful to remember what we have noted above:

  • Poor quality, unfocussed or vague imagery suggests that a business or individual lacks conviction and belief in itself.
  • It’s easy to make the mistake of thinking that pictures which best communicate you, your work and your activity are pictures of you, your work and your activity.
  • It is possible that the most communicative images you can use in your site don’t include your products or services at all.
  • The composition of an image can significantly alter the way we see the subject, framing it in a more or less positive/active light.

It is worth considering the possibility that a professionally taken and well chosen stock image, even if unrelated to your brand, is a more effective choice for your site than one you have taken yourself. The context of the site (copy, branding etc.) is often enough to re-frame a good image and connect it to your message.

In Conclusion

This is a complex topic, not least because it requires of us that we set aside our self-image and consider the communicative aspects of the choices we make from a detached, even critical, perspective. This can feel like we are fundamentally compromising our message when we are actually taking steps towards making it more graspable for our potential clients/users.

Photographs in websites are so common that it is easy not to consider them beyond an acknowledgement of their subject matter, but as we have seen there are many other considerations which affect the message they convey about our brand personality. This happens quickly, too – first impressions are formed before visitors to a site have had time to read much text, and lasting memories are hard to shake.

When considering images for your website then, remember to ask the following:

  • How deliberate does this choice seem? Is your brand exuding confidence and putting itself forward unapologetically?
  • Is the subject really the most communicative? If it is a product shot, is your product really that unique and beautiful? If you are showing people, is the message inclusive or exclusive?
  • Who is that in the picture? Can you see your ideal client/user in the image, or are you simply showing yourself to the world?
  • How is the image composed? Where is your eye being led? From one distinct spot to another in a gesture of forward moving positivity? Or is it simply floating somewhere near the middle?
  • How deep is this image? How far back does it go? How much context does it give without interfering with the principal message?
  • Is this a quality shot? Has it been framed, focussed and finished professionally? Does it communicate the pride you take in presenting your brand, or does it suggest corner-cutting and cheapness? You can expect visitors to your site to assume you will treat their projects with the same level of pride.

Here we see various combinations of product photography with client reflection, implied interaction with services and careful use of composition/depth of field. Warby Parker take us from left to right on a journey from their product to their users. PayPal’s client reflection shows an individual who is engaged, mobile, and free. Note how this second image is composed to leave a bold amount of negative space, which is then picked up by the designer for an effective call to action. The shallow depth of field here helps with this.

Remember that website imagery is about communication, not documentary. There are other situations in which the reverse is true – blog posts, some social media contexts, specific areas of your site designed to handle documentary content, etc. It is best to keep these types of content separate.

Here we see how brands are either combining product photography with client reflection, or simply implying interaction with their service. Warby Parker take us from left to right on a journey from their product to their users. PayPal’s client reflection shows an individual who is engaged, mobile, and free.

Your imagery is arguably the most immediate and communicative area of your site, offering the most instinctive opportunity for your visitors to engage with your brand. Show them something attractive, professional, capable and confident in which they can see themselves not only getting what they need but having a positive experience of that process.

Finally, be consistent. From page to page, from area to area of your site, consistency of style, quality and message will be key to building and retaining the trust and confidence in your brand you need to make meaningful connections with your visitors.