Image Alt Text: The Complete Writing Guide

Alt text (alternative text) is one of the most important yet overlooked aspects of web images. Good alt text makes your content accessible to millions of users with visual impairments while also improving your SEO. This guide covers everything you need to write effective alt text.

What is Alt Text?

Alt text is a text description added to an image’s HTML tag that describes the image content. It serves multiple purposes:

• Screen readers read alt text aloud for visually impaired users
• Search engines use alt text to understand image content
• Broken images display alt text when images fail to load
• Text browsers show alt text instead of images

<img src="golden-retriever-park.jpg" alt="Golden retriever playing fetch in a sunny park">

Why Alt Text Matters

Accessibility Impact

According to the WHO, approximately 2.2 billion people globally have vision impairment. Screen readers are essential tools for these users, and alt text is how they “see” images on the web.

User Group	How They Use Alt Text
Blind users	Screen reader reads description aloud
Low vision users	May use screen readers or magnification
Cognitive disabilities	Alt text provides context and clarity
Slow connections	See description while image loads

SEO Benefits

Search engines can’t “see” images—they rely on alt text and surrounding context to understand what an image depicts. Proper alt text:

• Helps images appear in Google Image Search
• Provides context for page content understanding
• Contributes to overall page relevance signals
• Can drive significant organic traffic

The Alt Text Formula

Good alt text follows a simple formula:

[Subject] + [Action/State] + [Context/Setting]

Examples

Image	Poor Alt Text	Good Alt Text
Product photo	”shoe"	"Nike Air Max 90 running shoe in white and red colorway”
Team photo	”team"	"Marketing team celebrating product launch with champagne”
Chart	”chart"	"Bar chart showing 40% increase in mobile traffic from 2024 to 2026”
Infographic	”infographic"	"Step-by-step guide to image optimization: resize, compress, convert, serve”

Best Practices

1. Be Specific and Descriptive

Describe what’s actually in the image, not what you think should be there.

<!-- Too vague -->
<img src="hero.jpg" alt="Person working">

<!-- Better -->
<img src="hero.jpg" alt="Woman writing code on laptop in modern office with dual monitors">

2. Keep It Concise

Aim for 125 characters or less. Screen readers may cut off longer descriptions.

<!-- Too long -->
<img src="product.jpg" alt="This is our brand new exciting product that we launched
last month and it has many amazing features including water resistance and...">

<!-- Better -->
<img src="product.jpg" alt="Waterproof Bluetooth speaker in matte black finish">

3. Don’t Start with “Image of” or “Picture of”

Screen readers already announce that it’s an image. Adding these phrases is redundant.

<!-- Redundant -->
<img src="sunset.jpg" alt="Image of a sunset over the ocean">

<!-- Better -->
<img src="sunset.jpg" alt="Vibrant orange sunset over Pacific Ocean with silhouetted palm trees">

4. Include Text That Appears in Images

If your image contains text, include that text in the alt attribute.

<img src="sale-banner.jpg" alt="Summer Sale: 50% off all outdoor furniture through August 31">

5. Consider Context

The same image might need different alt text depending on where it’s used.

<!-- On a photography tutorial page -->
<img src="camera.jpg" alt="DSLR camera with 50mm lens showing manual aperture settings">

<!-- On a product page -->
<img src="camera.jpg" alt="Canon EOS R5 mirrorless camera body, $3,899">

Special Cases

Decorative Images

Images that are purely decorative (backgrounds, spacers, visual flourishes) should have empty alt text:

<img src="decorative-divider.svg" alt="">

This tells screen readers to skip the image entirely. Never omit the alt attribute—always include it, even if empty.

Complex Images

For charts, graphs, and infographics, provide a brief alt text plus a longer description:

<figure>
  <img
    src="sales-chart.png"
    alt="Q4 2025 sales by region showing APAC leading with 42% growth"
    aria-describedby="chart-details"
  >
  <figcaption id="chart-details">
    Detailed breakdown: APAC $4.2M (42% YoY), Americas $3.1M (28% YoY),
    EMEA $2.8M (15% YoY). Total Q4 revenue: $10.1M.
  </figcaption>
</figure>

Linked Images

When an image is a link, the alt text should describe the link destination, not the image:

<a href="/products/hiking-boots">
  <img src="boots-thumbnail.jpg" alt="Shop hiking boots collection">
</a>

Icons

Functional icons need alt text that describes their function:

<button>
  <img src="search-icon.svg" alt="Search">
</button>

<a href="/cart">
  <img src="cart-icon.svg" alt="Shopping cart (3 items)">
</a>

Alt Text for E-commerce

Product images require special attention for both accessibility and SEO.

Product Image Checklist

• Include product name
• Mention color/variant
• Note key features visible in image
• Include size if relevant
• Add price for buy buttons

<!-- Main product image -->
<img src="jacket-front.jpg" alt="Patagonia Better Sweater fleece jacket in navy blue, front view">

<!-- Variant images -->
<img src="jacket-back.jpg" alt="Back view showing center seam and drop-tail hem">
<img src="jacket-detail.jpg" alt="Close-up of brushed fleece interior lining">

Using Image CDNs for E-commerce

Services like Sirv can automatically optimize your product images while you focus on writing great alt text. Sirv’s features include:

• Automatic WebP/AVIF conversion
• Smart cropping with face detection
• 360° product spins with zoom
• Responsive image generation

<img
  src="https://your-store.sirv.com/products/jacket.jpg?w=800&format=optimal"
  alt="Patagonia Better Sweater fleece jacket in navy blue"
  loading="lazy"
>

Common Mistakes to Avoid

1. Keyword Stuffing

Don’t cram keywords into alt text unnaturally:

<!-- Bad: Keyword stuffing -->
<img alt="best cheap running shoes buy running shoes online running shoes sale discount running shoes">

<!-- Good: Natural description -->
<img alt="Nike Pegasus 40 running shoes in blue, lightweight design for daily training">

2. Using Filenames as Alt Text

Generic filenames don’t help anyone:

<!-- Bad -->
<img src="IMG_4523.jpg" alt="IMG_4523.jpg">

<!-- Good -->
<img src="IMG_4523.jpg" alt="Team brainstorming session around whiteboard">

3. Leaving Alt Text Empty for Important Images

Only decorative images should have empty alt text. Important content images need descriptions.

4. Being Too Generic

Vague descriptions waste an opportunity:

<!-- Too generic -->
<img alt="food">

<!-- Descriptive -->
<img alt="Margherita pizza with fresh basil and buffalo mozzarella on wooden board">

Alt Text Audit Checklist

Use this checklist to audit your existing images:

Check	Status
All images have alt attributes	☐
Decorative images have alt=""	☐
Product images include name and variant	☐
Charts/graphs have detailed descriptions	☐
No “image of” or “picture of” phrases	☐
No keyword stuffing	☐
Linked images describe destination	☐
Alt text is under 125 characters	☐

Tools for Alt Text

Browser Extensions

• WAVE - Highlights images missing alt text
• axe DevTools - Comprehensive accessibility testing
• Accessibility Insights - Microsoft’s accessibility checker

Automated Testing

// Simple alt text audit script
document.querySelectorAll('img').forEach(img => {
  if (!img.alt) {
    console.warn('Missing alt:', img.src);
  } else if (img.alt.length > 125) {
    console.warn('Alt too long:', img.alt.substring(0, 50) + '...');
  }
});

AI-Assisted Alt Text

For large image libraries, AI can help generate initial alt text drafts. Sirv AI Studio offers automated image analysis that can:

• Detect objects and scenes
• Identify text in images
• Suggest relevant descriptions
• Process images in bulk

Always review AI-generated alt text for accuracy and context.

Conclusion

Writing good alt text is a skill that improves with practice. Remember:

1. Be specific - Describe what’s actually in the image
2. Be concise - Keep it under 125 characters
3. Be contextual - Consider how the image is used
4. Be honest - Describe the image, don’t sell

Well-written alt text makes your site accessible to everyone while improving your search visibility. It’s one of the highest-impact, lowest-effort improvements you can make to any website.

Further Reading

• W3C Alt Text Decision Tree
• WebAIM Alt Text Guide