I'm glad to say that my cohorts here in Digital are – like me – sticklers for style. Of course we all dress well, but punctuation, grammar, and spelling rules are what we work by.

That's not to say there's never room for improvement, though. Iteration and incremental enhancement is key. To this end, the Image Use Guide has been updated to include a passage on best-practice caption writing.

'Why?' you may ask. Well, many of the images we were seeing published included captions that read like alt text. They did little to deliver information, and this is a missed chance at elevating engagement.

A student daining experience in a professional placement
The good: this caption adds context and info to a Placements page

Why captions are important

Almost every image on the website needs a caption. Simple as that. There are exceptions of course: hero images and background images which are a part of the page design don't need a caption. Similarly, caption writing for staff profiles and Location pages is tough. But be creative and you can add information like when a building was opened, how many Learning Commons it has, or its opening hours, for instance.

Captions need to be 'added extras' to the image. They need to tie the image to the content. Captions are entry points. Like crossheads, pull quotes, summaries and headlines. These all offer users a place at which to enter and engage with the content we offer.

Users look at imagery first, then the caption under the image. If the caption intrigues them by providing context and information, they will look back at the image and see something new. This is a positive loop.

Writing a caption that describes the image misses an engagement opportunity.
Writing a caption that describes the image misses an engagement opportunity.

Captions, not Alt Text

It's important to know the difference between image captions and alt text descriptions.

Alt text descriptions need to describe the image. This helps visually-impaired users with screen readers, and in instances where the image doesn't load.

"A caption should normally explain what readers cannot see for themselves in the picture (_President Karista appealing for the education bill at a teachers' conference in Washington on Wednesday_) and should omit the obvious (_A man licking an ice cream cone_)." – The New York Times Style Guide.

Captions need to elaborate and add to a piece of content. Captions must quickly tell the viewer what the picture itself cannot say – people, places, dates, significance.

The Content Publisher makes it easy to define a Caption and an Alt Text description, and gives an example as default.

Use the Alt Text field to describe the image. Use the Caption field to add a relevant captio

Remember the 'Five W's and an H'

Writing a caption is like writing a headline:

What
Why
Where
Who
When
How

Use these prompts to add information otherwise missing from the image and you can't go far wrong.

Bad captions baffle the user and present a barrier to engaging further with content.
Bad captions baffle the user and present a barrier to engaging further with content.

Some dos and don'ts for best-practice caption writing:

Try to:
- use present tense to describe the image and any action
- keep your captions active (where possible)
- think in headlines – punchy and pithy is good
- explain the unknown and/or unshown - what's happening in the image that the reader can't see or know
- provide answers your user might have about the image: use the 'Five W's and an H'

Try and avoid:
- giving readers information they get from just looking at an image
- beginning with an indefinite or definite article e.g. 'she' 'it' 'a', 'an' or 'the'
- writing 'above' or 'pictured'
- repeating information contained in the title or summary

Some images on the website don't require captions. These might include:

- background images used in the page design
- banner images used at the top of a page
- logos

Finally, don't rely on bots to generate captions for you. They might be able to identify an image for you, but they remain pretty hit and miss...

captionbot.ai might claim to be able to recognise and caption an image for you, but it's still not as reliable as a human eye.
captionbot.ai might claim to be able to recognise and caption an image for you, but it's still not as reliable as a human eye.

Posted in: Show & Tell, Style, content and design

Responses

  • (we won't publish this)

Write a response

  • Thanks for a great article and I do agree that images are crucial in web design, being informative as well as adding colour and ‘movement’ to a site. However, Image rich pages, combined with meaningful and informative captions and copy is the best combination.

    A pithy explanatory summary (ie a caption) can make the relevance of a picture 100% clear so everyone gets the reference. Take the image you have used to illustrate this blog. Anyone over a certain age will remember well the film from which the quote and image are taken. But this film was made in 1989, so a whole generation now as old as in their 30’s might not get your reference. It would probably take a long time to explain in words the neat pun you have made here – but you get my point. Unless you target audience is completely ‘in’ with your visual shorthand, a caption does help (even if discretely placed) so as not to over-play the reference and so irritate those who have got the joke.

    Anyway, yes, images are great for adding interest, particularly when pertinently tied into the content and can stress importance, add humour and give further information as well as getting across the atmosphere or mood of a situation very effectively. Captions can add a greater depth of information to an image which is self-explanatory in itself, but it is not necessarily clear why it is being used at that particular spot, the caption can take the viewer to the bigger context, explaining an illustration which while clear in itself as an image, is not immediately obvious in its usage. You can see I could really do need to have a picture to show you what I mean here!!

    I liked your instructions in the Image Use Guide too. By using contrasting good and bad types of image you give some useful advice in how to avoid people in website pictures looking like they are on the cover of a 1950’s knitting pattern or, on the other hand, don’t look like they have accidentally stumbled into someone’s holiday snap. How to choose images, which to discard, how to crop them for best effect, etc…. all really useful stuff.