Effective Web Design ImagesEffective use of images can help convey your message powerfully. They may reinforce news stories, demonstrate the positions of objects, places and people, clarify processes and illicit an emotional response. However, an image that is misplaced can destroy a campaign that has been constructed carefully.

Most websites use images as an integral component. They assist in building brand awareness, selling products and services, and simply making a website visit more pleasurable. However, you need to use some thought when you insert images into your site.

Appropriateness of Images

Part of the process of designing a site is image selection. In cases where you are engaged in selling products, product images are essential. This may require more than one product image  and products will often appear more favourably in-situ, as opposed to placing them in an ordinary background. Show someone wearing clothes, using a utensil while cooking, driving a car, etc. This provides potential customers with a concept of the products size and the setting it is used in.
Do not make indiscriminate use of images. Too many images can ruin the focus of a page. The site visitor may not be able to determine what is of importance and what merely decorative images are.

If you make use of stock images, be sure you do not utilise free images or you could end up using the same images that are on other sites in your niche.

Image positioning

Try to ensure that your images are close to their related text. This might not be the physical location on a web page; however, the image should be close to the code that contains the text that accompanies it. For instance, if there is an image of a motorcycle, ensure that it is positioned in your code near to the text that discusses motorcycles. The most effective way to do this is by using CSS.

Image Resolution and Size

The size of an image is a reference to its file size, not the image dimensions. Smaller files will load more quickly and use less bandwidth, and they often have appearances that are comparable to images with a higher resolution.

If an image is saved at a high resolution and then forced to occupy a smaller screen space, you will only increase its load time and it will not appear any clearer.

If you really want to show a high resolution image, then display it with a thumbnail on a web page with a link to the high resolution image.

Limit Large Above the Fold Images

Site visitors spend 80% of the time on site viewing information that is above the fold. Images are useful for numerous reasons; however, ensure that you don’t give them too high a priority. The web page space above the fold will be the most valuable part of your site.  The area above the fold is the initial part of the site visitors see, and you should make wise use of it. Therefore, you need to ensure that your images don’t displace other catchy or informative content to an area that is below the fold.

Display Real People

Images of people are a very effective means of engaging your visitors. Site visitors enjoy recognising other humans on the internet. It causes them to feel as if they are forming a connection with other people, and not just a sterile coded site.  In particular, human faces draw visitors’ attention and their line of sight is usually followed. When you make use of images that incorporate faces, be sure you examine what part of the site they are drawing visitors’ attention to. In addition, don’t use stock images. Make use of high quality images of individuals, who actually match the character of your site.

Titles and Alt Text

Titles and Alt text provide search engines and site visitors with information regarding an image. They also provide a means for browsers to show image descriptions with tool tips. So, ensure they are descriptive and relevant.

Alt text is appropriately utilised as an image alternative and a title is properly utilised to give information when an image is hovered by a pointing device.

Image Names

Save your images using a descriptive name like ‘red-honda-125-motocross-motorcycle’, rather than ‘product-17324’. There may be restrictions due to the database of a supplier. However, if you want to favourably impress visitors and convert them to buying customers you should rename these files.


  • Use images that are appropriate
  • Maintain images close to its related text
  • Avoid large image files and name them appropriately
  • Don’t let images take up all the space above the fold
  • Use Human images
  • Make sure each image has a relevant Title and Alt tag

About the Author

Cameron Francis is a director of an Australian based company called eTraffic Web Design. He usually writes articles about ongoing web design and development trends.