Publish a Useful Image: Context, Alt Text and the File

Start with the image’s function

In a fictional magazine, a photograph shows how a lid fits into a box. On another page, the same photograph simply accompanies a desk scene. The file is identical, but what it needs to communicate changes. Note what a person would lose if the image disappeared and whether that information already exists in the text.

W3C’s decision tree distinguishes informative, functional and decorative images. Use that distinction to review each context. An ornamental illustration may need an empty alt attribute; an image providing the only content of a link needs to communicate the destination or action.

Write the information that is needed

For the fictional box, an alternative could be “The lid’s tab fits into the slot on the short side.” It describes the detail explaining assembly. “Excellent box, cheap boxes, buy boxes” does not do that job. Nor must you inventory every color when color does not help explain the instruction.

Review the alternative alongside the paragraph and caption. A caption can add visible context or provenance; alt conveys necessary meaning when the image cannot be perceived. Avoid automatically repeating the article title for every image. Google recommends relevant, contextual alt text without keyword stuffing.

Make a chart possible to reconstruct

Imagine a fictional chart of requests received: Monday 4, Tuesday 7 and Wednesday 5. “Requests chart” identifies the object but leaves out its values. A short alternative can introduce the subject and direct readers to an adjacent table containing the complete data. Here the information does not depend on color or guessing bar heights.

Add the unit, period and relevant limitations. If the chart shows an estimate, preserve that condition in the explanation. W3C recommends providing complex image information elsewhere on the page.

Check how the file reaches the page

Keep a short, recognizable filename and a version with sufficient quality at its reading size. Open the page on a small screen: is the important detail visible, or does a crop remove it? An attractive thumbnail may be unusable for following an assembly instruction.

Google documents finding images through src in img elements and does not index CSS background images. Check the actual implementation and open the resource URL. The file and its landing page need separate checks; a page loading does not establish that all its images are available.

Review every context and language

A Chinese edition needs a Chinese explanation of the same detail, even when it shares a file with Spanish. Translate essential chart labels too, or provide the data in understandable text. When the represented information changes, keep an identifiable version so a guide does not continue describing an earlier image.

Our technical foundations guide completes the access check. The article data review helps compare a declared image with the one actually representing the page.

Keep a small publication record

• Page and specific image function.
• File, provenance and verified permission to use it.
• Alternative, caption and additional data in each language.
• Reading size, crop and published URL.
• Review date and unresolved observations.

Try the record on one image and ask another person to explain what information survives when reading the text without seeing it. Record the issue found and its correction. That result demonstrates this editorial review, without promising rankings or a search engine’s thumbnail selection.