Using images successfully

High-quality and relevant images used carefully on your web page are crucial in creating an engaging and interesting page that reinforces the message you are trying to convey to your audience. Poorly chosen and excessive images cause distraction and reduce the impact of your page. Your aim should always be to provide information in a concise and interesting way and to leave viewers with a positive impression.

What makes an effective image?

 If the image appears to be purely decorative we unconsciously ignore it. Studies that track the eye movement of a person viewing a web page have shown viewers don't take notice of obvious stock images and prefer real images. (See the eye-tracking study Images as Obstacles by Jakob Nielsen and Kara Pernice.) An eye-tracking study on a page from New York Magazine's website revealed that the stock images weren't being looked at. The areas of high focus were navigation links, headings and bullet lists. Photos of real people associated with your organisation or project will be more effective than generic stock images. Not everyone can take great photos. If you can afford to use a professional photographer their work will add a great deal of value to your site.

Use quality images

If you can't afford a photographer (most of us work with tight budgets) then choosing quality images is your next best option. Try to select images that have an association with your organisation or project. Interesting people enjoying their work or engaging in discussion are often suitable. Avoid 'glamorous' model types that clearly give away the fact they are stock photos. Select bright, high-contrast and attractive images. Consider the backgrounds in the images. Some photos have extremely distracting backgrounds in them and should be avoided.

File format and size

The file format and size is also just as important. Saving a file as a jpeg allows for the greatest compression without losing quality. An image with a large file size will load slowly on your page and viewers will click elsewhere rather than wait for the image to load.

We have established a number of image sizes for you to use across the FedUni site:

  • Banner images (top of the page): 713 x 230 pixels. File size should be less than 100kb.
  • Content area images: 290 x 210 pixels

Use Photoshop® or other photo editing tools to resize, crop and compress images. View our tutorial on creating images with specific dimensions using a program you can download free. When you upload images to the website don't forget to add 'alt text' that describes the function and purpose if the image is not decorative. Remember, to someone who cannot see the image the 'alt text' replaces the it.

Less is definitely more when it comes to using images and text online.