Making Best Use of Your Images

Images can deliver a powerful message in any media. They can reinforce a news story, indicate the position of people, places and objects, explain process and help to build an atmosphere or emotion. On the other hand, a misplaced image can ruin a carefully constructed campaign – the image of a car that has been recalled for a fault will not help to build trust.

Images can also help build brand awareness, sell a product or simply make the visit to the site more enjoyable. But like most other forms of media, adding images to a website requires a little thought.

uselessAppropriate Images

Part of the design process is the selection of images. If you are selling a product then an image of that product is essential. You may need more than one and the product usually looks better in-situ rather than on a plain background. Show somebody wearing cufflinks or clothes, hang a picture on the wall, a saucepan on the stove and so on. This gives the customer an idea of size and setting.

Do not use images indiscriminately, lots of images can lose the page focus – the visitor may not be able to work out what is important and what is decoration.

If you use stock images do not use the freebies – you may well end up with the same pictures found on sites similar to yours (hands clasping a plant to indicate growth or a grinning person in a call centre on your contact page).

Image for Effect

wowThere is nothing wrong with adding a few images to make the site attractive but don’t spend too much time fiddling, it is much more important to concentrate on the purpose of the site and add the images afterwards. And be careful not to overdo things, if the site relies on the images to impress your visitors then it means they will not be focussing on the important things (like buying stuff).

Image Positioning

Keep your images as close as possible to the related text. This may not be the physical position on the page but it does mean keep the image close to the code with the accompanying text. For example, if you have an image of a garden gnome, make sure it is positioned in the code close to the paragraph/heading that discusses garden gnomes. The best way to do this is to use Cascading Style Sheets.

Image Size and Resolution

The image size refers to the file size not the dimensions. Smaller files load faster, reduce bandwidth and usually look just as good as high resolution images.

If you save the image at a higher resolution but force the image to fit into a smaller space on the screen all you will do is increase the load times – the image will not look any clearer.

So it’s worth using an image cruncher as it can make a huge difference to the file size. There are some great online tools like compressor.io or a bit of Googling will find you all sorts of downloadable applications. But for new pictures always optimised before uploading. Squish the the image width to the maximum that will fit on the screen (1000px is usually enough) and reduce the quality to 72ppi (which is sufficient for most people).

But don’t use galleries. They are rubbish on small screens and make the user do all the work. More Anti-Gallery thoughts.

Alt Text and Titles

This is a picture of a gnome that is quite small. It has got a hat on and appears to be smiling. Buy Viagra. Lose weight using this secret recipie. Make $$$ working from home.

IMG_96C

Alt text and titles provide screen readers and the search engine robots with information about the image. They also allow browsers to display a description of the image as a tooltip. So make sure they are relevant and descriptive:

25cm plastic garden gnome.

Is far better than:

Product 12345.

The alt text is properly used as an alternative to the image. The title is properly used to provide information when the pointing device hovers over the image. Internet Explorer gets it wrong (as usual). Hover over the gnome and you will see how not to do it.

Image Names

Saving your image as ‘romper-suit’ is better than ‘product-12345’. Ok so you may be restricted by the supplier’s database but if you want to impress and convert then you need to take the time to rename the files.

Summary

  • Use appropriate images – careful selection will provide the correct visual stimuli to your visitors.
  • Keep the images close to the related text – use CSS to position the image not tables.
  • Keep your image files as small as possible and give them sensible names.
  • Give each image relevant alt tags and titles.

That’s all folks – not rocket science just common sense.

 

Are you struggling with ranking, attracting visitors, generating leads or getting sales?

Or are you just stuck not knowing what to do next?

Call me on: 01252 643927 or 07921 859802 or Send me an email.

Or fill in this form which will appear as if by magic

  1. Stino said:

    This article doesn’t really sell well when there is only 1 image in the article it’s self.

    • Aerin said:

      Ha! I agree. But how much of the article did you read? If you got to the bottom then the lack of images wasn’t really an issue.

    • Laura Ginn said:

      I disagree. I thought the article was really useful, and certainly helped me a lot. Plus, I spot 3 images – all of which are relevant.

      • flower said:

        Actually there are 3 images in this article.

      • Aerin said:

        When I answered the first comment a year ago there was only one image. But I got all excited a while back and added two more. I hope this wasnt too upsetting 😀

What do you think?



Web Statistics Web Statistics