Image alt text for accessibility and SEO: a practical guide beyond keyword stuffing

Alt text is one of the few places where accessibility, SEO, and honest writing overlap - and it is still widely misunderstood. Some teams treat alt as a keyword dump. Others leave it empty everywhere. Neither helps real users or sustainable search performance.

This guide gives a decision framework, concrete examples, and a connection to how toolit approaches images: you control the file (crop, rotate, compress) and you control the markup on your site. Browser tools do not write alt for you - that is where editorial judgment matters.

What alt text is actually for

The HTML alt attribute provides an text alternative for an image when the image cannot be perceived as intended:

• Screen reader users hear the alternative (or nothing, if the image is purely decorative).
• Search engines use alt (among many signals) to understand what the image depicts in context - not to reward keyword repetition.

WCAG expects meaningful alternatives for informative images. The goal is equivalence of purpose, not a poetic novel.

The four buckets (simplify every decision)

When you add an <img>, ask which bucket you are in:

1. Informative image

The image conveys information not fully present in adjacent text.

Example: a chart of quarterly revenue next to a short caption. The alt should summarize the trend the chart shows, not every tick mark.

<img
  src="/images/revenue-q4.webp"
  alt="Bar chart: revenue up 18% year over year in Q4"
  width="720"
  height="405"
/>

2. Functional image (button or link)

The image is the control - like a magnifying glass icon for search.

Example: alt should describe function, not the brushstroke style of the icon.

<button type="submit">
  <img src="/icons/search.svg" alt="Search" />
</button>

3. Decorative image

The image adds no unique information; removing it would not change meaning.

Example: abstract background shapes behind a headline where the headline already says everything.

Use alt="" (empty) so screen readers skip it.

<img src="/decorative-blob.webp" alt="" role="presentation" />

4. Text-in-image

If important text only exists inside the image, duplicate that text in alt or provide the same text nearby. Prefer real HTML text for headings when possible - better for zoom, selection, and translation.

Meme-style images (see Meme generator) often carry the joke in the picture. If the meme is content in your article, alt should convey the joke or message succinctly. If it is decorative reaction GIF energy, sometimes empty alt is right when surrounding text carries the point.

Long-tail SEO without sounding like a robot

Search engines reward pages that help users. Alt text helps blind users and anyone on a slow connection where images did not load. That alignment is the SEO story - not “stuff five synonyms into alt.”

Weak: alt="best cheap webp jpeg png optimizer seo tool free download 2025"

Strong: alt="Screenshot of image quality slider comparing WebP and JPEG export sizes"

Write for clarity; keywords appear naturally when you describe real content.

Heroes, thumbnails, and product shots

• Hero photos: alt should reflect what the image communicates about the page - not a generic “hero image.” If the page sells hiking boots, describe the scene in a way that matches the product story.
• Thumbnails: if the linked article title already states the topic, thumbnail alt can be shorter - but still not useless. Avoid repeating the exact title verbatim if it adds nothing.
• Logos next to company names: often alt="CompanyName logo" or empty alt if the name is adjacent in text - pick one pattern and stay consistent sitewide.

Technical notes that interact with your image pipeline

Dimensions and performance

Large images hurt LCP; alt text does not fix that. Use Image compress and correct dimensions so users (and bots) get pixels faster. Accessibility includes not wasting people’s time on multi-megabyte decorative assets.

Cropping changes meaning

If Image crop removes a person from the frame, update alt to match the new emphasis. Alt is not a lifetime assignment - it reflects the shipped asset.

Rotation and EXIF

If you rotate a photo so it displays correctly, alt describes the content, not the technical fix. Users do not need “photo rotated 90 degrees clockwise” unless rotation is the story.

A short style guide you can paste into your design system

1. Describe, do not advertise, in alt.
2. Prefer sentence case; skip trailing periods for short phrases (team preference).
3. Avoid “image of” unless the medium matters (photo vs illustration vs diagram).
4. Empty alt for decorative images - not missing alt (attribute should exist).
5. Captions and alt can complement each other; avoid duplicating the same sentence twice unless necessary.

FAQ

Does every image need unique alt? Every meaningful image needs an appropriate alternative. Decorative images use empty alt.

What about title attributes? Do not rely on title for critical information; support varies. Focus on alt for images.

Do I translate alt for multilingual sites? Yes - alternatives should match the page language and context.

Common mistakes in the wild (and quick fixes)

• Same alt on every stock photo: “Business people meeting” repeated twelve times helps nobody. Tie alt to this page’s purpose.
• Alt that repeats the h1 verbatim: sometimes fine for a hero; often redundant if the heading is immediately below. Decide per template.
• Missing alt attribute entirely: invalid and harmful; screen readers may announce the filename (IMG_0294.jpg) - noisy and unhelpful.
• Putting URLs or promos in alt: feels spammy to humans and does not replace good visible copy.

Charts, maps, and data visualization

If the image is a chart, alt should summarize trend and scale (“Line chart: monthly sign-ups doubled from January to March”) not every data point. Long descriptions can live in visible captions or an adjacent table for screen reader users who need detail. longdesc exists historically but is rarely the best modern pattern - prefer accessible tables or text summaries in the article body.

Closing

Alt text is a small string with an outsized impact on who can use your site and how clearly machines understand your visuals. Pair good copy with lightweight, correctly sized images from toolit’s utilities, and you cover both sides: access and performance.

If you audit one thing this week, pick your top ten pages and ask: if images failed to load, would the page still make sense? Fix the worst offenders first.