Need Help with your Website? Email or call us on 01268 442171.

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 are an integral part of most websites. They 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.

Appropriate 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 loose 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.

Image for Effect

There is nothing wrong with adding a few images to make the site attractive but don't spent 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).

This site uses a single image as a background. It has no intrinsic purpose but does give the site some visual depth - the image is there for effect only.

Image positioning

Keep your images as close as possible to the related text. This may not be the physical position on the page but 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 is 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.

For Example:

The above images were all saved at different resolutions and forced to fit into a box 100 X 40 pixels. The image on the left weighs in at a hefty 22kb and the one on the right is a paltry 2.2kb. And to tell the truth, I think the one on the right looks better than the others.

If you do want to display high quality images then use a thumbnail on the main page that links to the high quality image.

Alt Text and Titles

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.

Image Names

Saving your image as 'romper-suit' is better then 'product-12345'. Ok so you may be restricted by the suppliers 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 then sensible names.
Give each image relevant alt tags and titles.

That's all folks - not rocket science just common sense.

Need Help with your Website? Email or call us on 01268 442171.

top