Useful image alt text starts with the image’s job on a particular page. A photograph explaining a gardening step needs different text from a decorative leaf border, even if both contain leaves. Describe what the reader needs from that image, then check the actual HTML after publishing.
Decide what the image contributes
Read the surrounding heading, paragraph and caption before drafting anything. Ask what information would be missing if the image were unavailable. W3C’s informative-image guidance explains that a text alternative conveys the image’s meaning in context; it need not inventory every visible object.
For the fictional examples below, imagine a gardening tutorial with a photograph of watering seedlings, a decorative border and a linked brand mark. These are three different roles. Keep a short note for each image: its purpose, the nearby text and the alternative you plan to publish. That note is more useful than applying the same product keyword to every picture.
Choose text for three common roles
An image adds information to a tutorial
Suppose the paragraph says to water seedlings gently, while the photograph shows water reaching the soil without flattening the young plants. A filename such as garden-photo-07.png tells the reader nothing about that step. A suitable example is:
<img src="/images/watering-seedlings.png"
alt="Fine water spray directed onto the soil around young seedlings">This describes the relevant action rather than guessing a plant variety, camera setting or result the photograph cannot establish. If the page instead discusses the watering-can attachment itself, rewrite the alternative around the visible attachment. The same file can need different wording in a different context.
An image only decorates the page
For a leaf border that adds no information and is not a link or control, an empty alternative can be appropriate:
<img src="/images/leaf-divider.png" alt="">Keep the attribute present with an empty value. Do not write a description merely because the file contains recognizable objects. The W3C alt decision tree helps distinguish decorative content from meaningful images and functional controls.
An image is the only content of a link
If a fictional Hearth Garden brand mark links to the home page without accompanying text, communicate that destination:
<a href="/">
<img src="/images/hearth-garden-mark.png" alt="Hearth Garden home">
</a>An empty alternative would leave this example without a useful link name. If visible text already supplies the same link name, reconsider whether the image needs to repeat it. Review the complete link, not just the isolated image.
Prepare the file without confusing pixels with alt text
Resize the image separately if the page needs a smaller file. In the Image Resizer, a 1200 by 800 source can become 600 by 400: choose Pixel dimensions, keep Maintain aspect ratio checked and enter a width of 600. Select PNG (.png), click Resize image, then use Download result and inspect the downloaded file.
The resizer changes pixels; it does not write or install an HTML alternative. Add the wording through your website editor or template where the image is used. A resized copy that changes no relevant content can keep the same alternative in the same context. If cropping removes the detail described, revise the text. For layout sizing, see the separate 1x and 2x image preparation guide.
Review the published image in context
- Open the real page and confirm it uses the intended image, not an older export.
- Inspect its
<img>element and check the exactaltvalue, including an intentionally empty value. - Read the heading, nearby text and alternative together. Remove needless repetition and descriptions that no longer match.
- For a linked image, check the destination and accessible link name. For a decorative image, confirm it has no hidden informational role.
These checks review the image alternative; they do not establish that the entire page is accessible.
Keep search descriptions useful and accurate
Google’s image guidance recommends useful, contextual alt text and warns against keyword stuffing. Adding a list of search phrases does not help a reader understand the image. Keep the description tied to the page and avoid ranking promises.
HTML image alternatives and social-preview metadata are separate fields. If you also publish an X card, follow the X card image description guide and check that output separately.