Essentee Blog

The Essentee Blog

Web design and management articles, guides and even the occasional rant.

15
Jul

5 tips to use images on your website the right way

Posted by on in Web Design

Images can really make a difference to not only the look, but how effective your website is.  They can also seriously damage your credibility!   It's something even the big players can get wrong.

While images do create an ambiance and set the visual mood and tone, images for purely decorative purposes should be avoided in favour of quality images that serve a specific purpose.

The most frequent example of images used purely for aesthetic purposes, is when you see images of happy smiling people. But who are these people and how do they relate to what you do? Just because an image is attractive does not mean it will be effective.

whoarethey

Free image courtesy of FreeDigitalPhotos.net

Here's are some pointers that can turn your images from drab to fab:

1. Use images that have a purpose

Images should either:

  • Convey information or a message
  • Illustrate a point, like charts and product shots
  • Encourage interaction or help navigation by directing attention

Images can be used to convey information that is difficult to do using text, such as trends, data or concepts.

If you have a product, you definitely need good, close up images of the products.

If you provide an intangible service and want to provide images that show how happy you make people, thinking about adding captions that can provide some kind of context for the image.

People like doing business with people, so for this reason include a photo of you, your staff or a team shot. Don't go using models – you're not fooling anyone!

2. Consider image placement and direction

Where you put an image on a page matters a lot.

Research has shown that we will look at an image before we read headlines or copy so when using images on articles, put them above the headline.

There is a lot of debate about whether images should be on the left hand side of the page because doing so disrupts the 'left hand margin' and therefore the flow.

However, this will work well for images you want people to take notice of – like calls to action.

Take care of sight lines in images.

These are created by the direction a person might be looking or pointing, the straight lines of a road, roof or building etc.

People will follow this sight line and you want them to follow it to something important (like a call to action) or deeper into an article – not off the side of the page!

3. Use Captions

Captions under images are read on average 300% more than body copy* so not including captions can mean missing an opportunity to engage a visitor.

Captions are also useful if you need to explain the image such as "Roof before repair".

4. Use high quality images

The quality of images must be high which means make sure the subject is in focus and easy to see (no grainy shots!)

Images should be consistent in style, which means if you use black and white on one page, then you should keep the theme going. If you use cartoons then stick with those. And they should be in line with your brand identity.

There are many people who will say not to use stock images, but stock images can be beautiful and entirely appropriate. They are also much better than out of focus, low saturation images taken by an employee!

5. Optimise your images.

To keep image file sizes as small as possible, resize the images to the desired size before uploading them to your site. Quick loading pages are important from a user perspective, and Google takes notice of load times as part of 'scoring' your site for SEO.

To give a small helping hand to your SEO efforts you should also:

  • Include a descriptive ALT text that includes keywords
  • Include keywords in the image file name
  • Makes sure they are optimised so they don't slow the page donw

Ask Yourself

For each image on your website:
Does this image communicate anything about the content
Is the image appropriate to the message
Does it fit with the style and organisation of the page

 * Source: kissmetrics

Comments

  • No comments made yet. Be the first to submit a comment

Leave your comment

Guest January 22, 2015
Copyright © 2009 - 2015 Essentee Ltd