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.
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
There 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).
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
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:
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.
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.
- 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.