Skip to content

Using images wisely

Understand why it's best not to rely on images for important website content.

A picture isn't always worth a thousand words

If you're holding an open day or running a competition or special offer, you'll probably create big bright posters to grab the attention of clients in your waiting room. You may be tempted to use the same approach on your website, but please bear in mind this tip from Google's Webmaster Guidelines:

Try to use text instead of images to display important names, content, or links.

Pictures are great for creating a 'mood' for your website and for communicating complex information quickly and easily, but they do have their drawbacks:

  • People may choose to disable images in their web browser. Mobile users may do this because of small screens and the cost of data downloads. Other users may do this if they have a very slow internet connection.
  • Some visitors may have visual impairments, due to age or other factors, meaning that they can't see your pictures properly, or at all.
  • Search engine robots do not analyse pictures, so any information stored in images cannot be found and indexed.

If you do use a poster on your website it's really important to offer alternative text as a backup for those who cannot see your poster.

What is alternative (alt) text?

Alternative text offers a text-based alternative for images - and other non-text content - on web pages. It can be presented in two ways:

  • Within the alt attribute of the img element (sometimes referred to as the alt tag)
  • Within the context or surroundings of the image itself, i.e. in text adjacent to the image or within the page containing the image.

Do all images need alternative text?

Every image must have an alt attribute. There are two categories of image:

Decorative images

  • Used for design and layout.
  • Do not present important or relevant content.
  • Do not appear within a link.

In almost all cases, decorative images should have a blank alt attribute: alt=""

Informative images

  • Present content to the user e.g. a flow diagram, a promotional poster
  • Have a function because they are used as a web link e.g. navigation buttons, clickable banners

The alternative text should explain the content and function of the image. If the content is complex then the alternative text is best provided within adjacent text on the web page rather than within the alt attribute.

WebAIM provides a very helpful article about alternative text, with examples and advice to help you decide on the best text to use.

Alternative text is for helping users, not for SEO

Limit your alternative text to an explanation of image content and function. Alternative text should not be used as a means to include additional information or keywords to search engines.