Image Alt Text: Descriptions for SEO and Accessibility

Alt text serves two readers: screen readers and search engines. For users on assistive tech, alt text is the only way to know what an image shows. For Google, alt text provides context that lifts image search rankings and overall page relevance.

It is one of the simplest HTML attributes and one of the most botched. Empty alt on informative images. Keyword-stuffed alt that reads like spam. Vague labels like "image" or "photo" that help nobody.

Writing good alt text takes 10 seconds per image once you know the rules. The effort is small. The accessibility and search payoff is real.

The Core Principles of Good Alt Text

1. Describe the image's content and function, not its appearance

Bad: "A square image with rounded corners showing a photograph" Good: "Customer service representative helping a client at a desk"

2. Be specific but concise

Bad: "Dog" Good: "Golden retriever playing fetch in a park" Too much: "A large golden-furred golden retriever dog breed leaping through the air to catch a red rubber ball in a green grass park on a sunny afternoon"

Aim for 5 to 15 words. Long enough to be useful, short enough to not be tedious for screen reader users.

3. Do not start with "image of" or "picture of"

Screen readers already announce "image" before reading the alt text. Starting with "image of" creates redundancy: "image, image of a sunset" is annoying.

4. Include relevant text visible in the image

If the image contains text (a sign, a button, a headline), include that text in the alt attribute. A screenshot showing an error message should have the error text in the alt.

5. Consider the context

The same image might need different alt text depending on where it appears. A photo of a laptop on a tech review page: "Dell XPS 15 laptop open on desk." The same photo on an interior design page: "Minimalist home office setup with laptop on wooden desk."

Compress images before uploading to ensure fast load times alongside good alt text. The Image Compressor reduces file sizes without quality loss.

Alt Text for Different Image Types

Product photos: include the product name, key features, and distinguishing details. - "Nike Air Max 90 running shoes in white and blue, side view"

Informational graphics (charts, diagrams): describe the conclusion or key data point, not every detail. - "Bar chart showing revenue growth from $2M in 2024 to $5M in 2026"

Decorative images: use empty alt (alt="") for images that are purely decorative and convey no information. A decorative divider line, a background pattern, or an abstract shape that adds visual interest but no content should have empty alt text so screen readers skip them.

Logos: the alt text should be the organization name. -

Portraits and team photos: include the person's name and role if relevant. - "Sarah Chen, CEO of Example Corp, speaking at the annual conference"

Screenshots: describe what the screenshot shows, including any relevant UI text. - "Google Analytics dashboard showing 45,000 monthly visitors with a 12% increase"

Icons used as links or buttons: describe the action, not the icon. - For a search icon: alt="Search" not alt="magnifying glass" - For a home icon: alt="Home" not alt="house"

Write meta descriptions with the same clarity as alt text. The Meta Description Generator helps create concise, descriptive page summaries.

Alt Text for SEO

Google uses alt text as one signal for understanding image content and page relevance. Here is how to optimize for search without compromising accessibility:

Include relevant keywords naturally: if the image shows your product and the page targets "wireless headphones," an alt text like "Sony WH-1000XM5 wireless headphones on desk" is both accessible and SEO-optimized.

Do not keyword stuff: alt="best wireless headphones 2026 buy wireless headphones cheap wireless headphones" is spam. Google penalizes keyword-stuffed alt text. It also provides a terrible screen reader experience.

Match alt text to page content: an image's alt text should be related to the page's topic. An image with alt text about "cooking recipes" on a page about "JavaScript frameworks" sends mixed signals.

Use descriptive file names: wireless-headphones-desk-setup.jpg is better than IMG_20260401_123456.jpg. File names are a secondary SEO signal that complements alt text.

One image, one set of keywords: do not try to target multiple keyword phrases in a single image's alt text. Each image should describe one thing clearly.

Image sitemap: for image-heavy sites, include images in your XML sitemap with and tags. This helps Google discover and index images that might be loaded via JavaScript.

Check the readability of your alt text with the Readability Checker. Alt text should be simple, clear language that any user (human or search engine) can understand.

Common Alt Text Mistakes

Missing alt attribute entirely: the image tag without alt at all () causes screen readers to read the file name or URL, which is usually meaningless gibberish.

Using the file name as alt text: alt="DSC_0042.jpg" or alt="hero-banner-v3-final-FINAL.png" helps nobody.

"Image of..." or "Photo of...": redundant. The screen reader already says "image."

Identical alt text on every image: a product gallery with alt="product image" on every photo provides no useful information. Each image should have a unique, descriptive alt.

Alt text that describes the wrong thing: an image of a team meeting where the alt says "office building" because the writer described the background instead of the subject.

Too long: alt text over 125 characters may be truncated by some screen readers. Keep it concise. If an image needs a lengthy description (a complex chart or infographic), use aria-describedby to link to a longer text description elsewhere on the page.

Empty alt on informative images: decorative images should have alt="". But informative images (anything that conveys meaning) must have descriptive alt text. An article's main photo with alt="" means screen reader users miss a key piece of content.

Alt text that does not match the visible content: if sighted users see a photo of a beach sunset, screen reader users should also get that context. Do not use the alt text to sneak in information or keywords that do not match the image.

FAQ

How long should alt text be?

Keep it under 125 characters for maximum screen reader compatibility. Most good alt text is 5 to 15 words. If the image requires more explanation (a complex chart or detailed infographic), keep the alt text brief and link to a longer description using aria-describedby or a caption.

Should background images have alt text?

CSS background images cannot have alt text (there is no alt attribute in CSS). If a background image conveys important information, it should be an element instead. If it is purely decorative, the CSS background approach is fine because screen readers ignore it.

Does alt text affect image search ranking?

Yes. Alt text is one of the primary signals Google uses to understand image content for Google Images search. Pages with descriptive, relevant alt text are more likely to appear in image search results for related queries.

Should I use AI to generate alt text?

AI can generate reasonable first-draft alt text, especially for straightforward photos. However, AI-generated alt text often misses context (why the image is on this page) and can be overly generic. Use AI as a starting point and edit for accuracy and context. Never publish AI-generated alt text without reviewing it.