Design & UX
Article
By Gabrielle Gosha

Why Your Images Might Be Ruining Your Site

By Gabrielle Gosha

Fun fact of the day: the human brain processes imagery 60,000 times faster than text.(source). Despite this, we’re still seeing lots of professional sites whose only image content is their header and ads.

Visual spectacles like Tumblr and Pinterest are simply taking advantage of how the human brain works, making them not only extremely popular but also significantly more engaging than your average blog.

tumblr . pics pics, pics oh and the occasional tesxt post

Don’t get me wrong, people are clearly using visual elements. The larger problem is that a lot of people aren’t investing in their image content because they either think their copy is good enough or they really don’t realize they’re costing their site.

Finding the best visual content for your site starts with understanding how powerful an image is, acknowledging your mistakes and finally moving in the direction to make better image choices.

The Power of Images

Interesting find: BrightLocal found that 60 percent of consumers are more willing to consider local search results that include images and another 23 percent are more likely to contact a business showcasing an image.

That’s a lot of power no matter the size. The point is you should never underestimate how a single element can be the difference between a user continuing or leaving. No users means no conversions which quickly leads to a dying business.

Let’s be honest though – ultimately the percentages quoted above are just numbers. What truly matters is how your visual content impacts on the human psyche. Advertising agencies do this every day.

Broken children

Broken children

The above image is for advocacy against child abuse. The image automatically resonates and calls up emotions to actually incite change regardless of whether it is put into effect or not. By the time the image is seen and ingested by the viewer it already makes an impact.

This is why a lot of viewers might deem advertisements for social change as “shocking” or “disturbing” – this is a strong image. Most of these types of images do not even require text to get their point across but the added accompanying text whether on the image, below or above it, amplifies these points.

Babies in a hospital

And don’t worry: you don’t have to be advocating for social or environmental change in order to have a powerful image. You simply need an impactful image that drives the goal of your site.

Cute Panda tuna

Check Your Quality

Images of low-resolution can have a significant impact on your users. Sometimes this can be the result of not optimizing your images properly or choosing small images and then scaling up.

Two images

Sites just starting out are more likely to have “ugly images” compared to well established ones. The “about” sections are notorious for this mostly because they opt for on-hand images that are typically small in size and low quality instead of taking new shots. Below is not only a good example of low-res images but also failure in visual consistency.

Lighting issues can also contribute to poor images. Take this bed and breakfast image for example. It may actually be quaint but the photos don’t translate that due to poor lighting and lack of editing.

Martha's vineyeard summer madness

This year make sure that your image quality is top of the line even if that means you have to take some time out to get new photos. It will make your site look professional even if you’re just starting out.

Poorly lit photos

Leave the ‘Stock’ Out of Your Stock Photography

Woman holding 'No' sign

Do everything you can to avoid manufactured, “generic” or cliche stock photography.

For those who don’t understand what I’m referring to, just envision those cheesy photos of the self-satisfied business people huddling around a computer or smiling call center people. Or for that matter, any image that looks like the models were herded on set and told they can’t go home until they get it right. Even if they’re really, really ridiculously good looking.

Stock stock

Of course, that doesn’t mean don’t use stock images. Not everyone is a star photographer or has the means to hire one.

The issue is with people who use artless, generic stock that promotes friendly businesses, happy families, and thrilled customers. David Meerman Scott summed it beautifully when he asked “Who the hell are these people?”.

So, What Makes a Photo Look ‘Stock’?

Clearly it has nothing to do with the subject matter. The two images below tell the same essential story of a dinner party with friends – yet we instinctively know they are very different.

(Righthand image credit: https://www.flickr.com/photos/whatsthatpicture/3089020081/)

The left image is clinically lit and mathematically composed, framing a clutch of manicured models who hover over untouched food. They are paid to smile, not eat and drink.

The right image is soft, dark and imperfectly composed yet we get a sense of fun and warmth from it. This is a captured moment – not a pose.

Which image resonates with you?

If that isn’t enough to make you rethink your choice in generic stock and thinking any pretty, high-quality image will do then consider Tommy Walker’s great article on stock photography. He covers some great points and researched cases including how one girl’s image ended up being used by over eight companies.

Where’s the Message?

David Ogilvy, “The Father of Advertising”, conducted research to find the correlation of sales to imagery. He found that an image with no correlation to the content can reduce readership and, in consequence, have negative effects on sales. This is due to lack of consumer response. Every image needs a defined purpose.

UPS woman looks out window.

UPS woman looks out window.

Recently I saw the image above while trying to track a UPS package and immediately wondered what this have to do with anything.

Sure, after a few seconds I noticed the unlit party lights, but while in university I knew of girls who habitually decorated their apartments with lights, no matter the month. I guess the woman is waiting for a package. I’m still not sure.

Regardless, the sad fact is, I spent time musing about the backstory of a random woman instead of tracking my parcel.

Surely that’s not a good result for either me or UPS.

Message not found sign

Try to be sure that the visuals you choose are there to improve comprehension and not just decorate or fill space.

Quick Guide

Okay now that you have an idea why your images are causing your site troubles here are some quick, yet effective ways to reverse the damage:

  • Get hi-res images and use only hi-res images. If you are unable to find an image in high quality for your content then go the graphics route. Try to find an illustration in the photo’s stead. This will avoid any nasty jaggies plus give your site some character.
  • Learn the best image optimizing tricks to not only reduce loading times but to maintain image quality. Quicker loading times will keep people around for longer.
  • Start taking your own pictures or have someone do them for you when you can. This is best for scenarios where it’s possible, e.g. a macro shot of strawberries or a sunset.
  • If you must use stock photos then start learning to edit them so they don’t look so sanitized. Make sure you’re adhering to the license agreements.
  • Re-evaluate your images and see if they match up to the content. Ask family and friends to give you their personal opinion.
  • Choose images that encourage comprehension. Test your image by removing it and then re-adding it to see if it boosts your copy.

Stock Alternatives

There is no getting around stock photography unless you’re a talented photographer or you have the resources to commission someone to do it for you. That doesn’t mean you have to use the same stock sites as everyone else, though.

Here are a few stock sites to try out when Shutterstock, Dreamstime, and 123RF aren’t doing it for you. Oh and they won’t cost you anything:

Bottom Line

Humans have always been very visual creatures so it makes sense to lean on imagery in your websites. However, humans are also very visually discerning and incredibly quick to detect a fraud.

Ensure your imagery is always:

  • Of high quality
  • Sincere and on-brand
  • Using clear and unambiguous messaging

Be sure that every image you select passes the test.

How important are images to you in web design? Do sites with little to no imagery bother you? Let us know in the comments.

  • Hi, I absolutely agree with you! It is just a human factor! We all like a good and creative advertising and most of 80% people buy only nice things! In our time, we can display everything, and this everything must be very interesting for your customers, modern and maybe fashion) That is why, I will use your advices)

  • Contrived Corridors

    This is really unhelpful to me. What if you are writing about something more abstract than parties or strawberry fields? What kind of image are you supposed to find?

    • I hear you @gregpringle:disqus. As SitePoint’s book designer, this is a challenge I hit all the time. How do you visually represent Git? Or Lean websites? Now I can tell you how I get to each answer, but you can’t just plug those answers into your problem.

      What kind of abstract ideas are you writing about?

      • Contrived Corridors

        Mainly the syntax of natural language.

        How do you illustrate a blog post — not an exposition of basic concepts, which might be more systematic and easier to find create images for — but a discussion that dances around the concept of arguments that a verb takes?

        At any rate, I decided to add a few screenshots of foreign-language words (names of languages — Chinese and Japanese in this case — 中文 and 日本語) just to break up the text. So in the end the article was useful in that it prompted me to think of images that might relieve the tedium of a post — which might not be such a great post in itself! — that originally just presented as a solid block of text on the page.

    • @gregpringle:disqus One tip I will give you: Human brains look for patterns and meaning – even when there is none there. That’s why we see faces in tree trunks and clouds.

      So, if your image can hint in the direction of a meaning, people’s brains will nearly always make the connection. For instance, on an article about Amazon services, a hummingbird image might be interpreted as ‘speed and agility’. The exact same image on an article about image optimisation techniques reads as ‘tiny size and efficiency’.

      Our brains can’t help making the connections so don’t be afraid to give them something to think about rather than dictating the obvious.

  • o_k_s_a_n_a

    Can I ask here about which tags value attribute and when should be implemented into the html5 code for covering the image’s authors rights according to modern e-laws?

  • Good to be critical of bad images. Are we allowed to complain about excruciatingly bad French? (Labelle Rivière).

  • Primeview

    Of course, image plays a large role on your website, since the ability to attract potential clients includes putting images on your site. However, it is not enough to just upload a random photo, just like any other content, an image needs to be optimized. As advised by a web design company Primeview, an image is not used for the sake of having a picture on your website, for one, it needs to reflect what you’re website is talking about. If you have the means to do a photo shoot to capture an effective image, it would be better. Additionally, uploading images or photos require that you use an appropriate file names, alt text and image site map. This allows you to provide more information about the image you used. More so, it is essential to determining the right file format to use, and make sure that you compress your image because too large images can slow down page speed. Editing the source code to make your image look smaller does not necessarily reduce the file size.

  • Carl Anderson Thomas

    Images play a large role on your website, since the ability to attract potential clients include putting images on your site. However, it is not enough to just upload a random photo, just like any other content, an image needs to be relevant and optimized. As advised by web design company in Arizona, Primeview, an image is not used for the sake of having a picture on your website, for one, it needs to reflect what your website is talking about. If you have the means to do a photoshoot to capture an effective image, it would be better. Additionally, uploading images or photos require that you use appropriate file names, alt text and image site map. This allows you to provide more information about the image you used. More so, it is essential to determine the right file format to use, and make sure that you compress your image because large images can slow down page speed. Lastly, careful with the use of stock photos – as sometimes people can be immune to them, often dismissed as being cliché and dated.

Recommended
Sponsors
Get the latest in Design, once a week, for free.